What problem does it solve? Web projects often ship with generic, inconsistent, or template-driven interfaces because product requirements were never translated into concrete visual and interaction rules. This Skill turns product goals, repository evidence, and constraints into a coherent design direction a frontend developer can implement directly. ## Core Features & Use Cases - Design Direction Definition: Produces one primary art direction with named attributes, anti-attributes, typography, color, spacing, shape, elevation, and layout rules. - Component and State Guidance: Specifies how component families (buttons, tables, dialogs, empty states) should look and behave across default, hover, focus, loading, error, and reduced-motion states. - Implementation Translation: Converts abstract recommendations into semantic design-token groups, priority components, and a sequenced implementation plan. - Use Case: A developer has a working dashboard that feels visually fragmented. The Skill audits the existing CSS and components, then returns a structured design direction covering foundations, hierarchy, motion, and accessibility so the redesign stays consistent across screens. ## Quick Start Ask the agent to analyze this repository and produce a UI design direction for the main dashboard page.
