design-qa-checklist — Claude Code skill: what it does, how to install
Builds a systematic QA checklist to verify that an implementation matches design specs. Use it during review to catch visual, layout, and accessibility bugs.
npx skills add Owl-Listener/designer-skills --skill design-qa-checklist -a claude-codeWhat design-qa-checklist does
The skill structures implementation reviews across six categories. It guides checks for visual accuracy like design tokens, typography, and spacing, alongside layout reflow and breakpoint limits. It also verifies interactive states, keyboard navigation, and touch target sizes of at least 44px.
The review follows a five-step workflow. It covers developer self-review, visual QA pass by the designer, filing bugs with side-by-side screenshots, bug prioritization, and fix verification. It advises testing edge cases with real content rather than relying on memory.
If you need a spec for engineers before development begins, use handoff-spec instead — this skill is designed strictly for reviewing finished builds.
What it helps with
- build a systematic visual QA checklist for frontend code
- verify design tokens, typography, and spacing against specs
- check component interactive states and 44px touch targets
- audit interface accessibility against WCAG AA standards
Example prompts for the agent
- Generate a design QA checklist for our new checkout form
- Help me review the navigation bar build against the design tokens
- Create an accessibility and layout checklist for the dashboard table
How to install design-qa-checklist
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-qa-checklist -a claude-code2Manually: put the files in place
~/.claude/skills/design-qa-checklist/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/design-qa-checklist/
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-qa-checklist -a codex2Manually: put the files in place
.agents/skills/design-qa-checklist/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-qa-checklist -a cursor2Manually: put the files in place
.cursor/skills/design-qa-checklist/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills design-qa-checklist2Manually: put the files in place
.github/skills/design-qa-checklist/SKILL.md1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-qa-checklist -a gemini-cli2Platform CLI
gemini skills install https://github.com/Owl-Listener/designer-skills --path design-ops/skills/design-qa-checklistManually: put the files in place
.devin/skills/design-qa-checklist/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-qa-checklist -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about design-qa-checklist
How do I install design-qa-checklist in Claude Code?
Run npx skills add Owl-Listener/designer-skills --skill design-qa-checklist -a claude-code in your terminal.
What does design-qa-checklist cover?
It generates checks for visual accuracy, layout breakpoints, interaction states, real content rendering, accessibility criteria, and cross-platform behavior.
How is this different from handoff-spec?
The handoff-spec skill creates the initial specification engineers build from, while design-qa-checklist verifies the finished build during implementation review.
Source text
SKILL.md · MIT
--- name: design-qa-checklist description: Build a QA checklist for verifying that a build matches the design. Use at implementation review. For the spec engineers build from, use `handoff-spec`. --- # Design QA Checklist You are an expert in creating systematic QA checklists for verifying design implementation. ## What You Do You create checklists that help designers systematically verify that implementations match design specifications. ## QA Categories ### Visual Accuracy - Colors match design tokens - Typography matches specified styles - Spacing and sizing match specs - Border radius, shadows, opacity correct - Icons are correct size and color - Images are correct aspect ratio and quality ### Layout - Grid alignment is correct - Responsive behavior matches specs at each breakpoint - Content reflows properly - No unexpected overflow or clipping - Minimum and maximum widths respected ### Interaction - All states render correctly (default, hover, focus, active, disabled) - Transitions and animations match specs - Click/touch targets are adequate size (44px minimum) - Keyboard navigation works in correct order - Focus indicators are visible ### Content - Real content fits the layout (no lorem ipsum in production) - Truncation works as specified - Empty states display correctly - Error messages are correct - Loading states appear as designed ### Accessibility - Screen reader announces correctly - Color contrast meets WCAG AA - Focus management works - ARIA labels and roles are correct - Reduced motion is respected ### Cross-Platform - Works in required browsers - Works on required devices - Handles different text sizes (OS accessibility settings) - Handles different screen densities ## QA Process 1. Self-review by developer against checklist 2. Designer visual QA pass 3. File bugs with screenshots comparing design vs implementation 4. Prioritize bugs by severity 5. Verify fixes ## Best Practices - QA against the design spec, not memory - Test with real content and data - Check edge cases, not just happy paths - Use browser dev tools to verify exact values - Document recurring issues for prevention
© Owl-Listener · MIT · Owl-Listener/designer-skills
