What problem does it solve? AI-generated frontend code tends to converge on generic, recognizable aesthetics—default fonts, gradient text, side-stripe cards, and templated layouts. This Skill guides the creation of distinctive, production-grade web interfaces by enforcing deliberate design decisions grounded in project-specific brand context. ## Core Features & Use Cases - Design Context Setup (teach mode): Explores the codebase, asks targeted UX questions, and writes a persistent Design Context file capturing audience, brand personality, and aesthetic direction. - Guided Feature Building (craft mode): Shapes a design brief, loads relevant references (typography, color, spatial, motion, interaction, responsive, UX writing), builds the feature, and iterates visually against quality checks. - Design System Extraction (extract mode): Identifies repeated components, hard-coded values, and patterns, then consolidates them into reusable components and design tokens. - Use Case: When asked to build a landing page or dashboard, the Skill first establishes who the users are and what the brand should feel like, then produces code with intentional font pairing, OKLCH color palettes, and spacing rhythm—avoiding the visual fingerprints of generic AI output. ## Quick Start Ask the assistant to run /impeccable teach to set up design context for your project, then use /impeccable craft followed by a feature description to build a polished interface.
