Agent skill · alirezarezvani
design-qa
Use when a UI screen, page or component is about to be called done, handed off or shipped, or when generated UI looks generic or half-finished. Gates the rendered result, not the design file - finds controls that do nothing, placeholder copy, removed focus rings, missing loading/empty/error states, low contrast, small targets, hidden focus and broken reflow measured in the real browser, and flags template defaults without blocking on taste.
What it needs
About 3k tokens when loaded.
What this skill does
Design QA Portability: 3 stdlib Python scripts, no network. The browser collector is plain JavaScript; the keyboard pass needs Playwright in your own project. This checks the build, not the taste. Objective defects block; template defaults only warn, because the brief may ask for them. Screens get reviewed in a static, populated, happy-path frame and ship with a button wired to () => {}, an empty state that says "Lorem ipsum", and a focus ring someone removed. Each script catches one class of these before a user does. Workflow Step 1 blocks on inert handlers, dead links, placeholder copy and focus outlines removed without a replacement. It warns on sample data, token drift and each template trait it finds, and rates generic risk LOW, MEDIUM or HIGH. Step 2 derives required states from each surface's kind (dataview, form, action, control, media, page). An unlisted state counts as missing, and DONE without evidence is reported. Start from assets/states.example.csv. Step 3 reads a snapshot of the rendered page and blocks on WCAG 2.2 AA failures: text contrast, no focus indicator, focus obscured, reflow at 320 px, empty accessible names and targets under 24×24 px without the spacing exception. Contrast is composited through translucent layers and opacity, so a token that passes on white but fails inside a tinted card is caught. Repeated rows are grouped. No Playwright? Paste assets/collectsnapshot.js into the DevTools console and run copy(JSON.stringify(designQaSnapshot())). Focus results are then unverified rather than passed. Capture one snapshot per key state (empty, error, long content), not just the populated page. Fill assets/finishsignoff.md from the three runs. Hard rules Unlisted is missing. A state nobody wrote down was not built. Measure the render, not the CSS. Contrast on a real background beats a declared colour pair. Never block on taste. Template traits warn. Record in the sign-off whether the brief asks for the look. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills alirezarezvani/design-qa