Impeccable Design Skills

1---
2name: frontend-design
3description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications. Generates creative, polished code that avoids generic AI aesthetics.
4license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution.
5---
6 
7This 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.
8 
9## Context Gathering Protocol
10 
11Design skills produce generic output without project context. You MUST have confirmed design context before doing any design work.
12 
13**Required context** — every design skill needs at minimum:
14- **Target audience**: Who uses this product and in what context?
15- **Use cases**: What jobs are they trying to get done?
16- **Brand personality/tone**: How should the interface feel?
17 
18Individual skills may require additional context — check the skill's preparation section for specifics.
19 
20**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.
21 
22**Gathering order:**
231. **Check current instructions (instant)**: If your loaded instructions already contain a **Design Context** section, proceed immediately.
242. **Check .impeccable.md (fast)**: If not in instructions, read `.impeccable.md` from the project root. If it exists and contains the required context, proceed.
253. **Run teach-impeccable (REQUIRED)**: If neither source has context, you MUST run the teach-impeccable skill NOW before doing anything else. Do NOT skip this step. Do NOT attempt to infer context from the codebase instead.
26 
27---
28 
29## Design Direction
30 
31Commit to a BOLD aesthetic direction:
32- **Purpose**: What problem does this interface solve? Who uses it?
33- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
34- **Constraints**: Technical requirements (framework, performance, accessibility).
35- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
36 
37**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work—the key is intentionality, not intensity.
38 
39Then implement working code that is:
40- Production-grade and functional
41- Visually striking and memorable
42- Cohesive with a clear aesthetic point-of-view
43- Meticulously refined in every detail
44 
45## Frontend Aesthetics Guidelines
46 
47### Typography
48→ *Consult [typography reference](reference/typography.md) for scales, pairing, and loading strategies.*
49 
50Choose fonts that are beautiful, unique, and interesting. Pair a distinctive display font with a refined body font.
51 
52**DO**: Use a modular type scale with fluid sizing (clamp)
53**DO**: Vary font weights and sizes to create clear visual hierarchy
54**DON'T**: Use overused fonts—Inter, Roboto, Arial, Open Sans, system defaults
55**DON'T**: Use monospace typography as lazy shorthand for "technical/developer" vibes
56**DON'T**: Put large icons with rounded corners above every heading—they rarely add value and make sites look templated
57 
58### Color & Theme
59→ *Consult [color reference](reference/color-and-contrast.md) for OKLCH, palettes, and dark mode.*
60 
61Commit to a cohesive palette. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
62 
63**DO**: Use modern CSS color functions (oklch, color-mix, light-dark) for perceptually uniform, maintainable palettes
64**DO**: Tint your neutrals toward your brand hue—even a subtle hint creates subconscious cohesion
65**DON'T**: Use gray text on colored backgrounds—it looks washed out; use a shade of the background color instead
66**DON'T**: Use pure black (#000) or pure white (#fff)—always tint; pure black/white never appears in nature
67**DON'T**: Use the AI color palette: cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds
68**DON'T**: Use gradient text for "impact"—especially on metrics or headings; it's decorative rather than meaningful
69**DON'T**: Default to dark mode with glowing accents—it looks "cool" without requiring actual design decisions
70 
71### Layout & Space
72→ *Consult [spatial reference](reference/spatial-design.md) for grids, rhythm, and container queries.*
73 
74Create visual rhythm through varied spacing—not the same padding everywhere. Embrace asymmetry and unexpected compositions. Break the grid intentionally for emphasis.
75 
76**DO**: Create visual rhythm through varied spacing—tight groupings, generous separations
77**DO**: Use fluid spacing with clamp() that breathes on larger screens
78**DO**: Use asymmetry and unexpected compositions; break the grid intentionally for emphasis
79**DON'T**: Wrap everything in cards—not everything needs a container
80**DON'T**: Nest cards inside cards—visual noise, flatten the hierarchy
81**DON'T**: Use identical card grids—same-sized cards with icon + heading + text, repeated endlessly
82**DON'T**: Use the hero metric layout template—big number, small label, supporting stats, gradient accent
83**DON'T**: Center everything—left-aligned text with asymmetric layouts feels more designed
84**DON'T**: Use the same spacing everywhere—without rhythm, layouts feel monotonous
85 
86### Visual Details
87**DO**: Use intentional, purposeful decorative elements that reinforce brand
88**DON'T**: Use glassmorphism everywhere—blur effects, glass cards, glow borders used decoratively rather than purposefully
89**DON'T**: Use rounded elements with thick colored border on one side—a lazy accent that almost never looks intentional
90**DON'T**: Use sparklines as decoration—tiny charts that look sophisticated but convey nothing meaningful
91**DON'T**: Use rounded rectangles with generic drop shadows—safe, forgettable, could be any AI output
92**DON'T**: Use modals unless there's truly no better alternative—modals are lazy
93 
94### Motion
95→ *Consult [motion reference](reference/motion-design.md) for timing, easing, and reduced motion.*
96 
97Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions.
98 
99**DO**: Use motion to convey state changes—entrances, exits, feedback
100**DO**: Use exponential easing (ease-out-quart/quint/expo) for natural deceleration
101**DO**: For height animations, use grid-template-rows transitions instead of animating height directly
102**DON'T**: Animate layout properties (width, height, padding, margin)—use transform and opacity only
103**DON'T**: Use bounce or elastic easing—they feel dated and tacky; real objects decelerate smoothly
104 
105### Interaction
106→ *Consult [interaction reference](reference/interaction-design.md) for forms, focus, and loading patterns.*
107 
108Make interactions feel fast. Use optimistic UI—update immediately, sync later.
109 
110**DO**: Use progressive disclosure—start simple, reveal sophistication through interaction (basic options first, advanced behind expandable sections; hover states that reveal secondary actions)
111**DO**: Design empty states that teach the interface, not just say "nothing here"
112**DO**: Make every interactive surface feel intentional and responsive
113**DON'T**: Repeat the same information—redundant headers, intros that restate the heading
114**DON'T**: Make every button primary—use ghost buttons, text links, secondary styles; hierarchy matters
115 
116### Responsive
117→ *Consult [responsive reference](reference/responsive-design.md) for mobile-first, fluid design, and container queries.*
118 
119**DO**: Use container queries (@container) for component-level responsiveness
120**DO**: Adapt the interface for different contexts—don't just shrink it
121**DON'T**: Hide critical functionality on mobile—adapt the interface, don't amputate it
122 
123### UX Writing
124→ *Consult [ux-writing reference](reference/ux-writing.md) for labels, errors, and empty states.*
125 
126**DO**: Make every word earn its place
127**DON'T**: Repeat information users can already see
128 
129---
130 
131## The AI Slop Test
132 
133**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.
134 
135A distinctive interface should make someone ask "how was this made?" not "which AI made this?"
136 
137Review the DON'T guidelines above—they are the fingerprints of AI-generated work from 2024-2025.
138 
139---
140 
141## Implementation Principles
142 
143Match 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.
144 
145Interpret 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.
146 
147Remember: {{model}} 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.
148