Design QA Skill – Visual Review Checklists

This skill equips design-review agents (e.g. nextjs-design-reviewer) with structured design QA knowledge without bloating their prompts.

It draws on established UX/UI best practices and visual design principles.

Core QA Areas

Design review should cover:

• Visual Hierarchy & Typography

  • Clear heading/body/meta distinctions,
  • Appropriate type scales and weights,
  • Legibility and line height.

• Spacing & Alignment

  • Consistent spacing grid adherence,
  • Optical vs mathematical alignment,
  • Visual rhythm and breathing room.

• Color & Contrast

  • Design token compliance,
  • Sufficient contrast (WCAG AA/AAA),
  • Semantic color usage.

• Responsive Behavior

  • Common breakpoints: 375px (mobile), 768px (tablet), 1440px (desktop), 1920px (wide),
  • Layout reflow and component adaptation,
  • Touch targets and mobile usability.

• Interaction & Accessibility

  • Keyboard navigation,
  • Focus states and indicators,
  • ARIA attributes where needed,
  • Loading and error states.

Usage Pattern

When performing design QA:

1. Load this skill and build a short internal checklist for this task based on the areas above.

2. Apply that checklist to:

   • Live UI (via Puppeteer/browser tools),
   • Screenshots or visual artifacts,
   • Code-level hints (where necessary).

3. Score issues by severity:

   • Blocker: Breaks core functionality or accessibility
   • High: Major design violations or UX problems
   • Medium: Noticeable inconsistencies
   • Nit: Minor polish issues

4. Provide a design_score (0-100) based on:

   • Adherence to design system tokens
   • Visual hierarchy and clarity
   • Responsive behavior
   • Overall polish and attention to detail

This skill centralizes design QA knowledge so that visual review agents remain lightweight and focused on applying these checklists to the implementation.