What problem does it solve? AI agents writing UI code converge on generic, inconsistent designs because they lack visual memory and taste. This Skill replaces agent guesswork with an executable visual contract: a decided aesthetic tone, design tokens enforced by lint, and a persistent DESIGN.md that survives between sessions. ## Core Features & Use Cases - Tone and token contract: Establishes one named aesthetic direction and routes every color, spacing, radius, shadow, and type value through semantic tokens, with a lint rule rejecting raw hex values outside tokens/. - DESIGN.md as persistent memory: Maintains a living design contract at the frontend root covering typography, colors, spacing rhythm, and the 6 mandatory component states (default, loading, empty, error, hover/focus, disabled). - Anti-drift inventory and numeric UX laws: Inventories existing components before creating new ones and applies measurable rules like 44x44px touch targets, WCAG 2.2 AA contrast, and max one primary button per section. - Use Case: When adding a new settings screen to a React frontend, the agent reads DESIGN.md, reuses inventoried primitives, implements all six states per component, and verifies the anti-hex lint passes before handing off to ui-review. ## Quick Start Use the ui-change skill to design and implement the new dashboard screen following the project's DESIGN.md and design token contract.
