ui

What problem does it solve? Frontend work often ships as generic, templated-looking interfaces with missing states, weak hierarchy, and inconsistent interactions. This Skill provides a five-phase process that takes a UI from direction picking through design system definition, screen building, redesign or audit, and a mandatory verification gate before anything ships. ## Core Features & Use Cases - Five-phase workflow: pick the visual direction, design the token system, build the screen, redesign or audit existing UI, and verify against a finish gate covering seven viewports, accessibility, dark mode, and copy. - Product-ready quality bar: enforces complete UI states (empty, loading, error, disabled), realistic content, responsive reflow, keyboard accessibility, and intentional motion instead of decorative animation. - Reference library: nine reference files covering accessibility, build discipline, copywriting, dark mode, direction picking, redesign audits, responsive design, style recipes, and design system tokens. - Use Case: Ask the agent to build a dashboard for a new SaaS product. The Skill infers the design direction, outputs Tailwind tokens, builds the screen with real content and all states, then runs the verification gate across viewports and themes before declaring it done. ## Quick Start Ask the agent to design and build a new page or redesign an existing screen, and it will run the matching phase and verify the result before shipping.