Borrowing it
Nothing to install: this file belongs to opensesh/karimo-overview. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/opensesh/karimo-overview/main/.claude/skills/frontend-design/SKILL.mdgit clone --depth 1 https://github.com/opensesh/karimo-overviewWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/opensesh/karimo-overview/frontend-design)<a href="https://agentmods.dev/skills/opensesh/karimo-overview/frontend-design"><img src="https://agentmods.dev/badge/skills/opensesh/karimo-overview/frontend-design/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/opensesh/karimo-overview/frontend-design"><img src="https://agentmods.dev/badge/skills/opensesh/karimo-overview/frontend-design.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00030 | $0.05040 |
| Opus 5 | $0.00015 | $0.02520 |
| Sonnet 5 | $0.00006 | $0.01008 |
| Haiku 4.5 | $0.00003 | $0.00504 |
Grade A, and why
frontend-design scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 6d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 734 lines — stays where its author put it; the contents beside it link to each section on GitHub.
This skill guides creation of distinctive, production-grade frontend interfaces that feel genuinely designed. When working on BOS-3.0 projects, it automatically applies our warm neutrals philosophy and brand tokens.
Attribution: Interaction patterns, animation timing, and form UX guidelines adapted from Vercel's Web Interface Guidelines, synthesized with BOS brand principles. Skill structure informed by Claude Code.
Source Files (Exact Specs)
For precise values, always reference these configuration files:
| File | Contains |
|---|---|
tailwind.config.ts |
Colors, shadows, font families, animations, semantic tokens |
app/theme.css |
CSS custom properties, color scales, shadow definitions |
lib/motion.tsx |
Framer Motion variants, easing curves, timing constants |
lib/brand-styles/tokens.json |
Design token definitions |
Best practice: Use Tailwind classes mapped to CSS variables (e.g., bg-bg-primary, text-fg-secondary, border-border-primary) rather than arbitrary values. This ensures consistency across light/dark modes and future token updates.
1. Design Thinking
Before writing any code, establish your design intent:
Purpose & Context
What problem are we solving? Who uses this? Think about the user's emotional state, their goals, and what success looks like.
Aesthetic Direction
Choose a clear visual direction:
| Direction | Feel | When to Use |
|---|---|---|
| Warm Minimal | Clean, inviting, focused | Dashboard UIs, tools, productivity |
| Editorial | Magazine-like, typographic | Content-heavy pages, portfolios |
| Soft/Organic | Rounded, gentle, approachable | Consumer apps, onboarding |
| Industrial/Raw | Utilitarian, honest, functional | Developer tools, technical docs |
| Luxury/Refined | Spacious, elegant, deliberate | Brand sites, premium products |
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 6d ago First seen · 734 lines · 30 tokens per session scan A 17b88ddb1a49
frontend-design is a skill published in the GitHub repository opensesh/karimo-overview (11 stars, last pushed 4mo ago), licensed Apache-2.0. It adds 30 tokens to every session and 5,040 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
glassmorphism
Glassmorphism design system skill. Use when building frosted-glass UI components with blur, transparency, and layered depth effects.
liquid-glass
Apple Liquid Glass design system. Use when building UI with translucent, depth-aware glass morphism following Apple's design language. Provides CSS tokens, component patterns, dark/light mode, and animation specs.
frontend-design
Frontend design skill fused from Impeccable + custom extensions. Covers design philosophy, anti-AI-slop patterns, typography, color (OKLCH), spatial design, motion, interaction, responsive, UX writing, state management, engineering, and 4 style variants. Includes 20 command skills for audit/critique/polish/animate/etc.
adapt
Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.
extract
Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens.
normalize
Audits and realigns UI to match design system standards, spacing, tokens, and patterns. Use when the user mentions consistency, design drift, mismatched styles, tokens, or wants to bring a feature back in line with the system.