Adilkalam Orca Design QA Skill

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.

• Accessibility: See skills/web-interface-guidelines/SKILL.md for interaction and accessibility rules.

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.

Converted and distributed by TomeVault — claim your Tome and manage your conversions.