Owl-ListenerInstall Design QA Checklist
Pick your agent. Every command is ready to paste.
npx skills add Owl-Listener/designer-skills --skill design-qa-checklistThe open skills CLI detects your agents (Claude Code, Cursor, Codex and 70+ more) and installs to the right folder. Add -g to install globally.
01
Install it
Run the command above, or upload the folder in Claude.
02
Ask naturally
Describe the task. Your agent loads design-qa-checklist when the request matches its description.
03
Name it if needed
If it does not trigger, say “use the design-qa-checklist skill”. In Codex, type $design-qa-checklist.
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
- Self-review by developer against checklist
- Designer visual QA pass
- File bugs with screenshots comparing design vs implementation
- Prioritize bugs by severity
- 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
Tips for Design QA Checklist
- • Start a fresh session after installing so your agent picks up the new skill.
- • It is part of a pack with 30 skills. Install only the ones you need with --skill to keep triggers precise.
- • If two skills overlap, mention the one you want by name.
Questions about Design QA Checklist
What does the Design QA Checklist skill do?
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`.
How do I install Design QA Checklist?
Run "npx skills add Owl-Listener/designer-skills --skill design-qa-checklist" in your project. The skills CLI installs it for Claude Code, Cursor, Codex and 70+ other agents. In Claude on the web, upload the skill folder as a ZIP under Customize > Skills.
Does Design QA Checklist work in Cursor and Codex?
Yes. Design QA Checklist uses the open SKILL.md format, so it works in Claude Code, Claude, Cursor, OpenAI Codex, Gemini CLI, GitHub Copilot and other agents that support agent skills.
Is Design QA Checklist free?
Design QA Checklist is open source on GitHub under the MIT license. It is free to install; check the license before commercial use.
Who made Design QA Checklist?
Design QA Checklist is published by Owl-Listener in the Owl-Listener/designer-skills repository, together with 29 other skills.
