---

name: frontend-design description: "Create production-ready frontend interfaces with high-quality, memorable design. Use when building web components, pages, or applications." enabled: true visibility: default allowedTools: ["read", "write", "edit", "glob", "grep", "bash"]

Frontend Design Skill

Create visually striking, production-grade frontend interfaces that avoid generic AI aesthetics.

Design Thinking Process

Before writing any code, understand and commit to a bold aesthetic direction:

1. Understand Context

• Purpose: What problem does this interface solve? Who uses it?
• Tone: Choose a distinctive aesthetic direction
• Constraints: Technical requirements (framework, performance, a11y)
• Differentiation: What makes this memorable?

2. Aesthetic Directions

Choose one and commit fully:

CRITICAL: Pick a clear direction and execute with precision. Both bold maximalism and refined minimalism work. What matters is intentionality, not intensity.

---

Aesthetic Guidelines

Typography

Copy❌ AVOID: Inter, Roboto, Arial, system fonts, Space Grotesk
✅ USE: Beautiful, unique, interesting typefaces

Strategy:
- Distinctive display font + refined body font
- Unexpected, personality-driven font choices
- text-balance for headings, text-pretty for body
- tabular-nums for data display

Color & Theme

Copy✅ Use consistent CSS variables
✅ Dominant color + striking accent
❌ AVOID: Timid, evenly-distributed palettes
❌ AVOID: Purple gradients on white (overused AI aesthetic)

Light vs Dark:
- Don't just invert colors
- Different fonts, different aesthetics possible
- Each theme should feel intentionally designed

Motion & Animation

CopyPriority:
1. One unified animation on page load
2. Staggered reveals (animation-delay)
3. Scroll-triggered and hover states
4. CSS-only when possible with HTML/CSS

Technical:
- Animate only transform and opacity
- Duration ≤ 200ms for micro-interactions
- Respect prefers-reduced-motion
- Use motion/react for JavaScript animations
- High-impact moments over scattered micro-interactions

Spatial Composition

Copy✅ Unexpected layouts
✅ Asymmetry and overlapping elements
✅ Diagonal flows
✅ Grid-breaking elements
✅ Generous negative space OR controlled density
❌ AVOID: Cookie-cutter predictable layouts

Background & Visual Details

CopyCreate atmosphere and depth, not just solid colors:

- Gradient meshes
- Noise textures
- Geometric patterns
- Layered transparency
- Dramatic shadows
- Decorative borders
- Custom cursors
- Grain overlays

---

Technical Implementation

Stack Preferences

CopyCSS:          Tailwind CSS (default)
Animation:    motion/react for JS, CSS for simple effects
Class logic:  cn() utility (clsx/tailwind-merge)
Icons:        aria-label required for icon-only buttons

Component Guidelines

CopyAccessibility:
- Use accessible primitives: Base UI, React Aria, Radix
- NEVER rebuild keyboard/focus behavior manually
- Icon-only buttons must have aria-label

Interactions:
- Destructive actions require AlertDialog confirmation
- Display errors near where action happens
- Never block paste functionality

---

Do's and Don'ts

❌ NEVER

1. Use overused fonts (Inter, Roboto, Arial, system fonts)
2. Purple gradient on white background
3. Predictable cookie-cutter layouts
4. Designs lacking context-specific personality
5. Scattered micro-interactions without purpose
6. Add animations unless explicitly requested

✅ ALWAYS

1. Interpret creatively
2. Make unexpected choices
3. Design as if truly made for the context
4. Make light/dark themes genuinely different
5. Ensure every design is unique
6. Match implementation complexity to aesthetic vision

---

Complexity Matching

CopyMaximalist Design:
→ Complex code with extensive animations and effects
→ Rich layering, bold choices, density

Minimalist Design:
→ Restraint, precision, careful attention to space
→ Focus on typography and subtle details
→ Elegance from well-executed vision

---

Output Approach

When building interfaces:

1. State your aesthetic direction before coding
2. Explain key design choices (fonts, colors, layout approach)
3. Implement with full commitment to the chosen direction
4. Include responsive considerations
5. Provide accessible markup

Copy## Design Direction
[Aesthetic: chosen direction]
[Key choices: typography, color, layout approach]

## Implementation
[Code with detailed styling]

## Responsive Notes
[Mobile/tablet considerations]

---

Mindset

Claude can do extraordinary creative work. Don't hold back. When you "think outside the box" and fully commit to a clear vision, show what you can truly create.

The goal: interfaces that are intentional, memorable, and production-ready.