What problem does it solve? After building a UI, it is hard to objectively verify that the implementation matches the intended design direction, works across breakpoints, and meets accessibility standards. This Skill runs a structured design critique that combines code inspection with mandatory visual screenshot analysis. ## Core Features & Use Cases - Brief-Aligned Review: Reads the feature's DESIGN_BRIEF.md and evaluates the built components against the stated aesthetic philosophy and requirements. - Mandatory Screenshot Capture: Captures full-page screenshots at mobile (375px), tablet (768px), and desktop (1280px) breakpoints via Playwright MCP or Cursor IDE browser, including dark mode and interactive states. - Comprehensive Checklist: Covers visual hierarchy, consistency, component quality, states, responsive behavior, accessibility (WCAG contrast, keyboard navigation, focus indicators), typography, and dark mode. - Use Case: After finishing a landing page, ask for a design review and receive a prioritized DESIGN_REVIEW.md with must-fix, should-fix, and could-improve items, each referencing specific files and screenshots. ## Quick Start Ask the assistant to run a design review of the feature you just built against its design brief, including screenshots at all breakpoints.
