What problem does it solve? Frontend work often ships as generic, templated UI that ignores the product's actual workflow, content states, and visual identity. This Skill guides the design and implementation of web interfaces so screens are built around the user's task, use deliberate color and type systems, support both dark and light themes, and are visually verified in a real browser before handoff. ## Core Features & Use Cases - Design consultation and durable records: Captures outcome, audience, workflow, states, constraints, and visual direction in a project DESIGN.md, with a reusable brief template for substantial flows and redesigns. - Role-based visual systems: Defines palettes by semantic roles (surfaces, ink, one accent, semantic states), compact type scales, and a single signature element, while avoiding overused AI-default aesthetics. - Screen-type guidance: Provides concrete patterns for text-heavy pages, complex forms, and data-dense dashboards, plus complete interaction states (hover, focus, loading, empty, error, success). - Browser-based visual verification: Requires inspecting the rendered interface with browser-use or computer-use tools at desktop and narrow widths in both prefers-color-scheme themes before handoff. - Use Case: When asked to restyle a settings page, the Skill establishes the design direction, implements the change within the project's existing framework, then screenshots both themes to confirm hierarchy, contrast, and state coverage. ## Quick Start Redesign the account settings page of this project with a clear visual direction, then verify it in the browser in both dark and light themes.
