What problem does it solve? Visual work often ships without anyone actually looking at the rendered result, leading to broken layouts, missing states, accessibility failures, and generic designs that could belong to any product. This Skill enforces a design-and-verify workflow where every composition is rendered, screenshotted, and judged before being declared done. ## Core Features & Use Cases - Composition and hierarchy review: Covers balance, spacing, alignment, typographic scale, and rejects generic generated-design defaults like unprompted gradients and decorative grids. - State and accessibility coverage: Designs empty, loading, error, populated, and responsive breakpoint states, plus contrast, focus order, keyboard operability, labels, and reduced-motion support. - Visual verification loop: Requires rendered screenshots as evidence for visual claims, with an optional on-page annotation loop where users mark up the live render directly. - Use Case: When building a new dashboard page, use this Skill to design the full composition across breakpoints, render it in a browser, capture screenshots, and iterate until the result is specific to the product brief. ## Quick Start Ask the agent to design and render the settings page for your app, then review the screenshots it produces and request changes to any state or breakpoint that looks wrong.
