Claude Code Plugins

Community-maintained marketplace

Feedback

design-qa-skill

@adilkalam/orca
0
0

>

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

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.

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