What problem does it solve? AI-generated frontend code tends to converge on generic, recognizable aesthetics—default fonts, gradient text, card-heavy layouts, and safe color palettes. 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. - Structured Build Workflow (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 interface code with intentional font pairing, OKLCH color palettes, and rhythmic spacing instead of generic defaults. ## Quick Start Ask the AI to run /impeccable teach to set up design context for the project, then use /impeccable craft followed by a feature description to build the interface.
