sota-frontend-designlisted

# SOTA Frontend Design ## Purpose Make every interface this agent builds — and every interface it reviews — meet 2026 state-of-the-art for visual craft, UX, accessibility, motion, and CSS architecture. The skill has two operating modes (BUILD and AUDIT) backed by seven rules files. WCAG 2.2 AA is the hard floor in both modes; distinctive, intentional design (not template/AI-generic output) is the quality bar. Rules are written for an expert reader: imperative, numeric, with good/bad pairs. ## BUILD mode When creating or modifying UI (components, pages, styles, animations): 1. **Lock the system before the screens.** Establish or locate the project's tokens first: type scale, color ramps (OKLCH, semantic layer), 4/8pt space scale, radius scale, depth language, duration/easing tokens. If a design system exists, conform to it — extend tokens rather than inlining values. Read `rules/01` + `rules/03` before writing the first stylesheet. 2. **Default stack:** semantic HTML → CSS grid/flex with `gap` → container queries for component responsiveness → logical properties → cascade layers. Headless library or native element (`<dialog>`, `popover`, `<details>`) for any interactive widget before hand-rolling. 3. **Build all states, not the happy path.** Every interactive component ships the 9-state contract (hover, focus-visible, active, disabled, loading, error, empty, skeleton + default); every data view ships loading/error/empty/partial/ideal (`rules/03 §4`, `