ui-design

# UI Design Owns everything that touches the built artifact: pick the visual direction, implement it in code, and audit what shipped. - **IS:** choosing visual direction (palettes, type scales, tokens, layout systems, CRO strategy, brand boards), building UI in code, and auditing built React or Next frontends for user-facing defects with `file:line` evidence, applied fixes, and a ship verdict. - **IS NOT:** deciding what an interface should do before it exists (use `product-design`); non-UI correctness and code quality (use `tidy`); agentic-app review (use `ax-audit`); deep typography or motion passes (use `typography-audit`, `ui-animation`); the wording of a string (use `ghostwriter`). ## Contents - [Routing boundary](#routing-boundary) - [Modes](#modes) - [Direction mode](#direction-mode) - [Extract mode](#extract-mode) - [Build mode](#build-mode) - [Audit mode](#audit-mode) - [Other modes](#other-modes) - [Quality Bar](#quality-bar) - [Verify](#verify) - [Gotchas](#gotchas) - [Sources](#sources) - [Related skills](#related-skills) ## Routing boundary `product-design` owns action semantics, scope, reversibility, and contested state choices. `ui-design` builds and styles those states. `ui-animation` owns timing, gestures, and measured motion. A routine missing loading or error state stays with the UI build; a gesture replacing a control needs a product decision and an accessible alternative before its physics. For brand positioning, identity changes, or a system span...