What problem does it solve? Frontend work without a design mockup often produces generic, cookie-cutter interfaces with default fonts, cliched color palettes, and predictable layouts. This Skill applies a designer's decision process to UI implementation so components have intentional typography, color, motion, and composition. ## Core Features & Use Cases - Aesthetic Direction First: Commits to a bold, context-specific visual direction (brutalist, editorial, luxury, playful, etc.) before writing any code. - Design Token Discipline: Uses CSS variables for cohesive palettes and avoids anti-patterns like generic fonts (Inter, Roboto, Arial) and purple-gradient cliches. - Motion and Composition Guidance: Orchestrated page-load animations, staggered reveals, asymmetric layouts, and atmospheric details like grain overlays and layered transparencies. - Use Case: Ask it to build a landing page hero section in React; it explores the existing codebase, picks a distinctive font pairing and palette, implements the component with CSS animations, then verifies the result with a build and screenshots. ## Quick Start Ask the agent to design and implement a pricing page component for your React app with a bold editorial aesthetic.
