Menu
Use when building frontend components or pages. Core design skill for creating distinctive, production-grade interfaces that avoid generic AI aesthetics.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
'Use this when the users says: "review existing feature","make this change"
Use when the user says: "extract learnings", "save this for next time", "remember this pattern", "consolidate memories", "dream", "clean up memories".
Use when the user asks about Claude token usage, wants to see how much they are spending on Claude, understand cache hit rates, review Claude Code workflow patterns, or get cost optimization recommendations.
Use when the user asks to recall, search, or continue past conversations. Triggers on "what did we discuss", "continue where we left off", "remember when", "as I mentioned", "you suggested", "we decided", "search my conversations", "find the conversation where", "what did we work on". Also triggers on implicit signals like past-tense references ("the bug we fixed"), possessives without context ("my project"), or assumptive questions ("do you remember").
Generate a commit message
Manage conversations and task context
| name | i-frontend-design |
| description | Use when building frontend components or pages. Core design skill for creating distinctive, production-grade interfaces that avoid generic AI aesthetics. |
| user-invocable | false |
| license | Apache 2.0. Based on Anthropic's frontend-design skill. |
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
Last reviewed: 2026-04-05
Design skills produce generic output without project context. You MUST have confirmed design context before doing any design work.
Required context — every design skill needs at minimum:
Individual skills may require additional context — check the skill's preparation section for specifics.
CRITICAL: You cannot infer this context by reading the codebase. Code tells you what was built, not who it's for or what it should feel like. Only the creator can provide this context.
Gathering order:
design/context.md from the project root. If it exists and contains the required prose sections (Users & Purpose, Brand Personality, Aesthetic Direction), proceed. The Design Tokens section may be empty — that's valid.design/context.md doesn't exist, check .impeccable.md in the project root. If found and it contains the required context, proceed.design/direction.md (exact filename). If found, read it and extract audience, intent, and aesthetic direction from its sections.Hard gate: If a context file exists (any of steps 2-4) but is missing required prose sections (Users & Purpose / Users, Brand Personality, Aesthetic Direction), redirect to /i-teach-impeccable with a message identifying what's missing. Do not proceed with incomplete context — a partial file is more dangerous than no file.
All i-* skills inherit this default scoping behavior:
/i-typeset src/components/Header.tsx), scope to that target.AskUserQuestion:
question: "What should I work on?"
header: "Scope"
options:
- label: "Current file"
description: "The file we're currently looking at"
- label: "Specific component"
description: "I'll name the component or path"
- label: "Whole UI"
description: "Scan the entire frontend codebase"
Do not guess scope. Operating on the wrong files wastes time and produces irrelevant proposals.
Commit to a BOLD aesthetic direction:
CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work—the key is intentionality, not intensity.
Then implement working code that is:
→ Consult typography reference for scales, pairing, and loading strategies.
Choose fonts that are beautiful, unique, and interesting. Pair a distinctive display font with a refined body font.
DO: Use a modular type scale with fluid sizing (clamp) DO: Vary font weights and sizes to create clear visual hierarchy
→ See anti-patterns reference § Typography for what to avoid.
→ Consult color reference for OKLCH, palettes, and dark mode.
Commit to a cohesive palette. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
DO: Use modern CSS color functions (oklch, color-mix, light-dark) for perceptually uniform, maintainable palettes DO: Tint your neutrals toward your brand hue—even a subtle hint creates subconscious cohesion
→ See anti-patterns reference § Color & Theme for what to avoid.
→ Consult spatial reference for grids, rhythm, and container queries.
Create visual rhythm through varied spacing—not the same padding everywhere. Embrace asymmetry and unexpected compositions. Break the grid intentionally for emphasis.
DO: Create visual rhythm through varied spacing—tight groupings, generous separations DO: Use fluid spacing with clamp() that breathes on larger screens DO: Use asymmetry and unexpected compositions; break the grid intentionally for emphasis
→ See anti-patterns reference § Layout & Space for what to avoid.
DO: Use intentional, purposeful decorative elements that reinforce brand
→ See anti-patterns reference § Visual Details for what to avoid.
→ Consult motion reference for timing, easing, and reduced motion.
Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions.
DO: Use motion to convey state changes—entrances, exits, feedback DO: Use exponential easing (ease-out-quart/quint/expo) for natural deceleration DO: For height animations, use grid-template-rows transitions instead of animating height directly
→ See anti-patterns reference § Motion for what to avoid.
→ Consult interaction reference for forms, focus, and loading patterns.
Make interactions feel fast. Use optimistic UI—update immediately, sync later.
DO: Use progressive disclosure—start simple, reveal sophistication through interaction (basic options first, advanced behind expandable sections; hover states that reveal secondary actions) DO: Design empty states that teach the interface, not just say "nothing here" DO: Make every interactive surface feel intentional and responsive
→ See anti-patterns reference § Interaction & Copy for what to avoid.
→ Consult responsive reference for mobile-first, fluid design, and container queries.
DO: Use container queries (@container) for component-level responsiveness DO: Adapt the interface for different contexts—don't just shrink it
→ See anti-patterns reference § Interaction & Copy for responsive anti-patterns.
→ Consult ux-writing reference for labels, errors, and empty states.
DO: Make every word earn its place
→ Consult anti-patterns reference for the full AI Slop Test and all DON'T guidelines.
Critical quality check: If you showed this interface to someone and said "AI made this," would they believe you immediately? If yes, that's the problem. A distinctive interface should make someone ask "how was this made?" not "which AI made this?"
Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details.
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices across generations.
Remember: Claude is capable of extraordinary creative work. Don't hold back—show what can truly be created when thinking outside the box and committing fully to a distinctive vision.