frontend-uilisted

# Frontend UI Engineering ## Overview Build UIs that read as hand-crafted production work, not machine output. The failure mode is the generic "AI aesthetic": default palettes, oversized cards, template layouts with no tie to the content. Conform to the project's real design system, meet WCAG 2.1 AA, and handle every interaction state. ## When to Use - Building new UI components or pages - Modifying existing user-facing interfaces - Implementing responsive layouts - Adding interactivity or state management - Fixing visual or UX issues ## State Management The narrowest-to-widest state category table (local, lifted, context, URL, server, global store) and the prop-drilling guard live in `references/state-management.md` — read it when the task adds or changes component state; skip it for pure styling, accessibility, or layout-only changes. ## Design System Adherence Take the spacing scale, type hierarchy, and semantic color tokens from `references/design-system.md`. Never invent values the project's system does not define. ### Avoid the AI Aesthetic Machine-generated UI has recognizable tells. Reject each: | AI Default | Why It Is a Problem | Production Quality | |---|---|---| | Purple/indigo everything | Models default to visually "safe" palettes, making every app look identical | Use the project's actual color palette | | Excessive gradients | Gradients add visual noise and clash with most design systems | Flat or subtle gradients matching the design system | | Roun