design-qa-checklist
design-qa-checklist generates systematic verification checklists for comparing design implementations against specifications. Use this skill when preparing to audit a built component or feature across visual accuracy, layout, interaction, content, accessibility, and cross-platform requirements. It provides structured categories and specific criteria to catch discrepancies between design intent and actual implementation.
git clone --depth 1 https://github.com/Owl-Listener/designer-skills /tmp/design-qa-checklist && cp -r /tmp/design-qa-checklist/design-ops/skills/design-qa-checklist ~/.claude/skills/design-qa-checklistSKILL.md
# 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
Design an A/B experiment — hypothesis, variants, primary metric, and sample size. Use when a change can be measured quantitatively at scale. For observing behaviour qualitatively, use `test-scenario`.
Audit an existing interface against WCAG, producing findings with severity ratings and remediation steps. Use when you have a design or build to assess now. Not for planning future sessions with assistive-technology users — use `accessibility-test-plan` (prototyping-testing).
Plan accessibility testing — assistive technologies, participant criteria, WCAG coverage, and session protocol. Use when scheduling testing with real AT users. Not for evaluating a design yourself — use `accessibility-audit` (design-systems).
Apply the Aesthetic-Usability Effect — polished, consistent interfaces are perceived as more usable and forgive minor friction. Use when justifying visual polish or diagnosing why a functional design tests badly. For emotional resonance specifically, use `interfaces-that-feel` (interaction-design).
Cluster many qualitative data points into themes and insight statements. Use when synthesising across multiple sessions or sources. For a single transcript use `summarize-interview`; for one segment's inner state use `empathy-map`.
Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use `motion-system` (design-systems); for a full interaction spec use `micro-interaction-spec`.
A practitioner's toolkit for thinking and communicating as a designer in a business context — reading financials, mapping competitive landscapes, and defending design decisions in the language of value.
Analyse open or closed card sort results into a proposed grouping and label set. Use after running a sort study. For turning that evidence into a full structure, use `information-architecture` (ux-strategy).