What problem does it solve? Web interfaces built or reviewed without a systematic design process tend to drift toward generic, machine-generated looks, miss WCAG accessibility requirements, and ship layout or motion defects that only surface on real devices. This Skill provides a disciplined workflow for planning visual direction, reviewing existing UI code, modernizing CSS platform features, and redesigning existing pages. ## Core Features & Use Cases - Design direction planning: Produces a one-line design read, variance/motion/density dial settings, a four-part plan (color, type, layout, principles), and a cliché gate that checks the plan against five generated-design clusters before any code is written. - UI code review: Walks a category-by-category checklist covering accessibility, focus, forms, content handling, animation, performance, touch, theming, and locale, emitting findings grouped by file as path:line - problem plus a concrete replacement. - CSS modernization and redesign: Verifies Baseline support for modern CSS/HTML features via the modern-web-guidance CLI with fallback policies, and runs a preserve-versus-overhaul redesign workflow that protects URLs, navigation labels, and existing accessibility behavior. - Use Case: Given a nine-section marketing page that reads as machine-generated, the Skill counts eyebrow labels against the ceil(sections/3) budget, flags consecutive image-and-text splits, theme inversions, and em dashes in copy, and returns a per-file fix list. ## Quick Start Ask the agent to review your landing page HTML file for accessibility, generated-look tells, and motion issues, with findings reported per file and line number.
