What problem does it solve? Product teams often commit engineering effort to features before anyone has seen or evaluated the interface, and UI reviews without objective criteria devolve into subjective opinions. This Skill produces judgeable UI artifacts and ranked, evidence-backed defect lists before any production code is written. ## Core Features & Use Cases - Design Mode (Mode A): Turns a brief, PRD, or feature idea into a clickable, self-contained HTML mockup with default, empty, loading, and error states, built from an audited design-token shell. - Review Mode (Mode B): Audits an existing URL, screenshot, or component file using a runtime browser audit script, Nielsen's 10 heuristics, and Norman's Gulf analysis, returning severity-ranked findings with concrete fixes. - Automated Quality Gate: Runs a static Python check (contrast pairs, spacing scale, focus visibility, one primary CTA per scope) plus a browser-based audit of real hit targets, overlap, and computed contrast before handover. - Use Case: A PM pastes a PRD for a new dashboard and asks "what should this look like" — the Skill produces a responsive HTML mockup with all states, a decision rationale panel, and a gate report stating what was verified. ## Quick Start Ask the assistant to design a mockup of a specific screen or flow from your PRD, or paste a URL and ask it to review the UI for usability problems.
