What problem does it solve? AI-generated and hastily built interfaces often compile correctly but render as generic, category-average designs with decorative color, card-in-card nesting, and placeholder metrics. This Skill replaces subjective taste with explicit design contracts, numeric thresholds, banned-default lists, and a render-and-compare loop so visual quality is verified from screenshots rather than assumed from code. ## Core Features & Use Cases - Design contract and aesthetic direction: Lock audience, surface job, color roles, type roles, and one of eight named tonal directions before writing CSS. - Numeric design laws and scoped bans: Apply contrast floors, fluid type scales with clamp(), dark-mode surface rules, and component laws for forms, modals, tables, and navigation, with named replacements for banned patterns like gradient text and ghost cards. - Rendered visual QA: Capture desktop (1280x900) and mobile (390x844) screenshots via Playwright, compare mocks against implementations, and write a visual-qa-report.md with P0-P3 findings. - Design system scoring and ship gate: Score systems out of 100 across ten dimensions and end with a ship, ship-with-caveats, or hold verdict backed by evidence. - Use Case: Ask for a review of a dashboard at a local URL; receive a diagnosis naming exact files and lines, a committed redesign direction, rendered screenshots at both breakpoints, and a ship gate verdict. ## Quick Start Review the design of the page at http://localhost:3000 and tell me what is wrong with it, rendering it at desktop and mobile sizes before answering.
