# Frontend Design Skill

| name            | description                                                                                                                                                                                             |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| frontend-design | Create distinctive, production-grade frontend interfaces with high design quality. Use for web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics. |

## Design Thinking

Before coding, understand the context and commit to a **BOLD aesthetic direction**:

- **Purpose**: What problem does this interface solve? Who uses it?
- **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.
- **Constraints**: Technical requirements (framework, performance, accessibility).
- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?

**CRITICAL**: Choose a clear conceptual direction and execute it with precision.

## Frontend Aesthetics Guidelines

### Typography

- Choose fonts that are beautiful, unique, and interesting
- Avoid generic fonts like Arial and Inter
- Pair a distinctive display font with a refined body font
- Unexpected, characterful font choices

### Color & Theme

- Commit to a cohesive aesthetic
- Use CSS variables for consistency
- Dominant colors with sharp accents outperform timid, evenly-distributed palettes

### Motion

- Use animations for effects and micro-interactions
- Prioritize CSS-only solutions for HTML
- Focus on high-impact moments: page load with staggered reveals (animation-delay)
- Use scroll-triggering and hover states that surprise

### Spatial Composition

- Unexpected layouts
- Asymmetry, Overlap, Diagonal flow
- Grid-breaking elements
- Generous negative space OR controlled density

### Backgrounds & Visual Details

- Create atmosphere and depth (not solid colors)
- Gradient meshes, noise textures, geometric patterns
- Layered transparencies, dramatic shadows
- Decorative borders, custom cursors, grain overlays

## Anti-Patterns to AVOID

**NEVER** use:

- Generic AI-generated aesthetics
- Overused fonts (Inter, Roboto, Arial, system fonts)
- Clichéd purple gradients on white backgrounds
- Predictable layouts and component patterns
- Cookie-cutter design without context-specific character

## Implementation

Match implementation complexity to the aesthetic vision:

- Maximalist = elaborate code with extensive animations
- Minimalist = restraint, precision, careful spacing and typography

**Remember**: Don't hold back. Show what can truly be created when thinking outside the box.