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 across typography, color, spacing, motion, and interaction. ## Core Features & Use Cases - Design Context Setup (teach mode): Explores the codebase, asks targeted UX questions, and writes a reusable Design Context section to .impeccable.md so all future design work stays on-brand. - Guided Feature Building (craft mode): Shapes a design brief, loads relevant reference files (typography, color, spatial, motion, interaction, responsive, UX writing), builds the feature, and iterates visually against an anti-AI-slop checklist. - 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 gathers brand context, then produces interface code with intentional font pairing, OKLCH-based palettes, 4pt spacing scales, and accessible interaction states 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 a polished interface.
