---
name: frontend-design
description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
---

# Frontend Design Skill

## Design Thinking

Before writing any frontend code, establish a BOLD aesthetic direction:

1. **Purpose** - What problem does this interface solve? Who uses it?
2. **Tone** - Pick an extreme: brutally minimal, maximalist, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft, industrial, etc.
3. **Constraints** - Technical requirements (framework, performance, accessibility)
4. **Differentiation** - What makes this UNFORGETTABLE?

Execute with intentionality and precision—bold maximalism and refined minimalism both work equally well.

## Typography

- Move beyond overused defaults (Inter, Roboto, Arial, system fonts)
- Pair distinctive display fonts with refined body fonts
- Use font-size and weight for clear hierarchy
- Consider letter-spacing for headings

## Color & Theme

- Commit to a cohesive aesthetic
- Use CSS variables for consistent theming
- Pick dominant colors with sharp accents
- Dark themes should feel intentional, not just inverted

## Motion & Animation

- CSS animations over JS when possible
- Scroll-triggered reveals
- Hover states that feel alive
- Staggered animations for lists/grids
- Focus on high-impact moments (page load, interactions)

## Spatial Composition

- Unexpected layouts over predictable grids
- Asymmetry, overlap, diagonal flow
- Grid-breaking elements for visual interest
- Generous negative space
- Varying content widths

## Backgrounds & Visual Details

- Atmosphere and depth over flat colors
- Gradient meshes, noise textures
- Layered transparencies
- Geometric patterns, custom cursors
- Grain overlays for texture

## Anti-Patterns to AVOID

❌ Generic AI-generated aesthetics
❌ Overused font families (Inter, Roboto, Arial, system fonts)
❌ Cliched color schemes (purple gradients on white backgrounds)
❌ Predictable, cookie-cutter layouts
❌ Lack of context-specific character
❌ Flat, lifeless color schemes
❌ Ignoring micro-interactions

## Implementation Notes

- Complexity should match aesthetic vision
- Maximalist designs need elaborate code with extensive animations
- Minimalist designs need restraint, precision, careful spacing
- Always consider dark/light mode support
- Ensure accessibility (contrast, keyboard nav, screen readers)
