---
name: design-qa-skill
description: >
  Skill providing design QA checklists and principles for visual review across
  lanes. Used by design-review agents to enforce hierarchy, spacing, color, and
  responsiveness.
---

# 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.


---
Source attribution: adilkalam
Original project: https://github.com/adilkalam/orca/blob/ecb9256bd44f9c328b1f772282952555d9a3ddf3/skills/design-qa-skill/SKILL.md
License: MIT
License information: https://opensource.org/license/mit
Original upstream instructions; downloaded from Dave AI.

## Upstream license notice

MIT License

Copyright (c) 2026 ORCA-OS Contributors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.



# Dave AI resource metadata

Creator / publisher: adilkalam
Original project: https://github.com/adilkalam/orca/blob/ecb9256bd44f9c328b1f772282952555d9a3ddf3/skills/design-qa-skill/SKILL.md
Attribution basis: Recovered original package and original project license at a pinned revision

Fields of work: Design, Development & Engineering, Product Management
Roles: Design System Lead, Product Manager, QA / Test Engineer, UI Designer, UX Designer
Specialties: Design, Testing
Tools: Puppeteer
Country applicability: Country not specified
Classification basis: Source catalog labels
Instruction SHA-256: bd72aad65da91bdd0589f4abdd4cba0d3cefd9c5c92025c89f4881a921b102ab
Metadata reviewed: 2026-10-27
This metadata supersedes earlier Dave AI catalog attribution. Original instruction and supporting files are preserved.