frontend-design

---
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, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
license: Complete terms in LICENSE.txt
---

Guides distinctive, production-grade frontend. Avoid generic "AI slop". Ship working code. Obsess details.

User supplies requirements: component, page, app, interface. May include purpose, audience, tech constraints.

## Design Thinking

Before code, commit to BOLD direction:
- **Purpose**: Problem? User?
- **Tone**: Pick extreme — brutally minimal, maximalist chaos, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, pastel, industrial. Inspiration only — design true to chosen direction.
- **Constraints**: Framework, perf, a11y.
- **Differentiation**: UNFORGETTABLE hook? One memorable thing?

**CRITICAL**: Pick clear conceptual direction, execute precisely. Bold maximalism and refined minimalism both work — intentionality matters, not intensity.

Implement code (HTML/CSS/JS, React, Vue, etc.):
- Production-grade, functional
- Visually striking, memorable
- Cohesive POV
- Refined details

## Frontend Aesthetics Guidelines

Focus:
- **Typography**: Beautiful, unique fonts. Skip Arial/Inter. Pick characterful. Pair distinctive display + refined body.
- **Color & Theme**: Cohesive aesthetic. CSS vars. Dominant colors + sharp accents beat timid even palettes.
- **Motion**: Animations + micro-interactions. CSS-only for HTML. Motion lib for React. High-impact moments: one orchestrated page load w/ staggered reveals (animation-delay) > scattered micro-interactions. Scroll triggers, surprise hovers.
- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking. Negative space OR controlled density.
- **Backgrounds & Visual Details**: Atmosphere, depth — not flat color. Contextual effects, textures matching aesthetic. Gradient meshes, noise, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, grain.

NEVER: Inter, Roboto, Arial, system fonts, purple-gradient-on-white, predictable layouts, cookie-cutter patterns.

Make unexpected choices fitting context. Vary themes (light/dark), fonts, aesthetics. NEVER converge on common picks (e.g. Space Grotesk) across generations.

**IMPORTANT**: Match code complexity to vision. Maximalist = elaborate code, heavy animation. Minimalist = restraint, precision, spacing, typography, subtle detail. Elegance = vision executed well.

Claude does extraordinary creative work. Don't hold back. Commit fully to distinctive vision.