design-qa-checklist
owl-listener/designer-skills
Build systematic QA checklists to verify implementations match design specifications.
What is design-qa-checklist?
Creates structured checklists for designers to verify that built features match design specs during implementation review. Use alongside handoff-spec for the original design specification.
- Generates visual accuracy checklists covering colors, typography, spacing, shadows, and icons
- Creates layout verification items for grid alignment, responsive behavior, and content reflow
- Builds interaction state checklists for hover, focus, active, disabled, and animation states
- Produces content and accessibility verification items including screen reader testing and WCAG contrast
- Provides cross-platform testing checklists for browsers, devices, and accessibility settings
- Organizes QA process steps from developer self-review through designer sign-off
How to install design-qa-checklist
npx skills add https://github.com/owl-listener/designer-skills --skill design-qa-checklistHow to use design-qa-checklist
- 1.Request a QA checklist for the component or feature you're verifying
- 2.Review the generated checklist categories: visual accuracy, layout, interaction, content, accessibility, and cross-platform
- 3.Have the developer self-review their implementation against the checklist
- 4.Conduct your designer visual QA pass using the checklist items
- 5.Document any discrepancies with screenshots comparing design vs implementation
- 6.Prioritize bugs by severity and track fixes until verified
Use cases
- Verify a new component implementation matches the design system before merging
- Conduct design QA on a feature build across multiple breakpoints and interaction states
- Create a checklist for testing accessibility compliance during implementation review
- Document and track visual bugs found during QA with design-vs-implementation comparisons
- Establish recurring QA processes to catch common implementation issues early
- Designers conducting implementation reviews
- Frontend developers self-reviewing work against specs
- QA engineers verifying design compliance
- Design systems teams validating component implementations
design-qa-checklist FAQ
handoff-spec creates the design specification that engineers build from; design-qa-checklist creates the QA checklist to verify the build matches that spec.
Always test with real content and data, not lorem ipsum, to catch layout and truncation issues that only appear with production content.
Verify touch targets are at least 44px to meet accessibility and usability standards.
File bugs with side-by-side screenshots comparing the design spec to the actual implementation, noting the specific difference.
Test on all browsers and devices specified in your project requirements; the checklist will prompt you to verify each one.
Full instructions (SKILL.md)
Source of truth, from owl-listener/designer-skills.
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
- 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
Related skills
More from owl-listener/designer-skills and the wider catalog.
design-rationale
Write design rationale that connects decisions to user needs, business goals, and principles.
design-review-process
Establish design review gates, criteria, and approval workflows to ensure consistent quality.
design-sprint-plan
Plan and run a focused design sprint from challenge to tested prototype in 5 days.
design-system-adoption
Drive design system adoption with strategy, enablement materials, and team engagement tactics.
design-system-governance
Define contribution models, versioning, and change management for multi-team design systems.
design-token
Define and organize design tokens for color, spacing, type, and elevation with systematic naming rules.