Frontend Design

A 7-step loop: prose direction → committed docs/design/direction.md + paired ADR → tokens.css → components → audited output. Works across React, Next.js, Tailwind, and vanilla HTML/CSS/JS.

Supporting files (loaded per step, not upfront): banned-patterns.md — tiered anti-pattern catalogue with paired alternatives; direction-doc-format.md — 9-field spec, bootstrap mechanics, ADR pairing; design-tokens.md — color / type / motion / spacing+depth taxonomy.

Scope

Use for: greenfield UIs, re-themes, design reviews, accessibility audits, design-token foundations, component generation.

Defaults: WCAG 2.2 AA minimum, keyboard + screen-reader paths, prefers-reduced-motion respected, fluid from 320 px up, Next.js RSC-safe unless interactivity is needed.