What problem does it solve? Designing or polishing frontend interfaces often leads to inconsistent spacing, hardcoded colors, missing UI states, and broken responsive layouts. This Skill enforces a structured design methodology so every screen or component follows the project's design system, accessibility rules, and responsive standards. ## Core Features & Use Cases - Design methodology with modes: Classifies each surface as Persuade, Operate, Read, or Experiment, then applies matching design principles for spacing (8px grid), typography, color contrast (≥4.5:1), and layout. - Command-based refinement: Provides commands like critique, audit, polish, bolder, distill, harden, animate, adapt, and optimize to evaluate, refine, improve, or fix interfaces. - Visual verification with Playwright: Captures screenshots at mobile (375px), tablet (768px), and desktop (1280px) breakpoints, with graceful fallback to static code inspection when Playwright is unavailable. - Use Case: Ask it to redesign a dashboard settings page; it reads the design system tokens, writes a spec to .agents/designs/, creates the components in src/modules/, and verifies all UI states (loading, empty, error, success) across three breakpoints. ## Quick Start Ask the agent to redesign the settings screen using the design craft skill and verify it on mobile, tablet, and desktop breakpoints.
