What problem does it solve? Web UI reviews often rely on subjective opinions and guesswork, leading to inconsistent design changes, unfixed responsive defects, and accessibility regressions. This Skill enforces an evidence-based workflow: audit with a real browser, propose a design direction, get approval, then implement and verify. ## Core Features & Use Cases - Evidence-based audit: Captures screenshots across a 320–1440px viewport matrix, reads computed styles and rendered geometry, checks horizontal overflow in open and closed UI states, and computes WCAG contrast ratios. - Structured four-part review: Delivers current UI assessment, design direction with keep/weaken/delete lists, page structure proposal, and a prioritized improvement plan before any code changes. - Guided implementation and verification: Implements in priority order (tokens → layout → typography → components → responsive) and verifies each change with puppeteer assertions, build, and test gates. - Use Case: A user reports that section numbering is inconsistent across a portfolio site and the mobile menu overflows at 375px. The Skill audits the whole structural family, measures the open-menu bounding box, proposes fixes, and verifies rendered geometry after the change. ## Quick Start Ask the agent to review your web app's UI, for example: "Review my site's UI, find responsive and accessibility problems, and propose a redesign before changing any code."
