---
name: frontend-design
description: Create distinctive, production-grade frontend interfaces with high design quality. Use when building or refining web components, pages, or apps (HTML/CSS/JS/React) with bold aesthetics, purposeful layouts, motion, and accessibility. Avoid generic AI-looking output.
---

# Frontend Design

## Overview

Build memorable, functional interfaces with a clear aesthetic direction (no generic templates). Focus on bold typography, cohesive palettes, purposeful motion, semantic structure, and accessibility.

## Quick Start
- Collect intent: purpose, audience, platform constraints, framework, delivery format (HTML/React/Vue).
- Choose an aesthetic direction and signature move (stripe, glow, grain, magazine stack). See `references/aesthetic-playbook.md`.
- Define tokens: fonts, palette, shadows, radii, spacing scale. Load fonts early.
- Plan layout: hero + supporting sections, data/timeline rails, cards; pick grid system and motion plan.
- Build semantic markup, wire CSS variables, add motion with staggered reveals, then run accessibility and responsive checks.

## Workflow

### 1) Define intent and aesthetic
- Ask for: target users, tone (brutalist, editorial, neon, soft craft, industrial, etc.), content types (cards, forms, charts), performance constraints.
- Pick a single memorable gesture and stick to it. Avoid mixed-font chaos unless the style calls for it.
- If the user is vague, propose 2–3 aesthetic directions from `references/aesthetic-playbook.md` and confirm.

### 2) Plan structure and tokens
- Establish CSS variables for palette, shadows, radii, spacing, and motion curve. Keep accent count to 1–2.
- Choose font pairing (display + body, optional mono). Provide fallbacks after custom fonts.
- Map sections and micro-interactions. For vanilla builds, start from semantic HTML; for React, break into composable pieces (Hero, FeatureList, Timeline, CTA Rail).
- Reference `references/implementation-patterns.md` for layout, motion, accessibility, and responsive patterns.

### 3) Build and animate
- Markup: semantic headings, skip links, ARIA labels for interactive elements, descriptive alt text.
- Layout: prefer CSS Grid for macro and Flexbox for clusters. Break the grid deliberately (asymmetry, overlaps) while preserving readability.
- Styling: use custom backgrounds (gradient meshes, grain, hatch) to avoid flat color; design buttons and cards with intentional borders/shadows.
- Motion: orchestrate a few meaningful animations (page-load stagger, hover magnetic lift, scroll reveals). Guard with `prefers-reduced-motion`.
- Data-driven UI: define arrays of content (cards, metrics, steps) to keep components DRY and easy to restyle.

### 4) Polish and QA
- Responsive: collapse grids, maintain padding, ensure CTAs remain prominent on mobile, swap hover cues for focus/active styles.
- Accessibility: one `h1`, logical heading order, focus styles, contrast AA+, labeled inputs, `aria-live` where status changes.
- Performance: avoid heavy shadows on mobile, compress/limit assets, use font-display swap, prefer CSS animations over JS-heavy effects.

## References
- `references/aesthetic-playbook.md`: Pick strong aesthetic directions with fonts, colors, layout, and motion cues.
- `references/implementation-patterns.md`: HTML/React patterns, tokens, motion recipes, responsive and accessibility guidance.

## Assets
- `assets/vanilla-starter/`: Ready-to-run vanilla HTML/CSS/JS concept (avant studio theme) with gradients, grain, staggered reveals, skip link, and accessible structure. Copy and retheme by updating CSS variables, fonts, and content.