What problem does it solve? Live sites accumulate visual debt: inconsistent spacing, broken hierarchy, AI-slop patterns, and slow interactions that nobody catches until users complain. This Skill acts as a designer's eye QA loop, finding those issues on a running site and fixing them directly in source code with before/after screenshot verification. ## Core Features & Use Cases - Visual audit of live sites: Crawls pages via a headless browse binary, detecting spacing issues, hierarchy problems, typography inconsistencies, and AI-generated-looking patterns, calibrated against your repo's DESIGN.md if one exists. - Iterative fix-and-verify loop: Fixes each issue in source code, commits atomically, and re-verifies with before/after screenshots so every change is provable. - Diff-aware mode: On a feature branch with no URL given, reviews only the pages your branch changed. - Use Case: You just shipped a new settings page and something feels off. Run the design review against localhost:3000, and it flags the misaligned form labels and inconsistent card padding, fixes them, and shows you screenshots proving the improvement. ## Quick Start Ask the AI to run a design review on your local dev server at http://localhost:3000 and fix any visual issues it finds.
