Agent skill
design-qa-skill
Skill providing design QA checklists and principles for visual review across lanes. Used by design-review agents to enforce hierarchy, spacing, color, and responsiveness.
Install this agent skill to your Project
npx add-skill https://github.com/adilkalam/orca/tree/main/skills/design-qa-skill
SKILL.md
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.mdfor interaction and accessibility rules.
Usage Pattern
When performing design QA:
-
Load this skill and build a short internal checklist for this task based on the areas above.
-
Apply that checklist to:
- Live UI (via Puppeteer/browser tools),
- Screenshots or visual artifacts,
- Code-level hints (where necessary).
-
Score issues by severity:
- Blocker: Breaks core functionality or accessibility
- High: Major design violations or UX problems
- Medium: Noticeable inconsistencies
- Nit: Minor polish issues
-
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.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
adilkalam/orca
web-interface-guidelines
Web UI quality rules: interactions, forms, loading, animations, layout, content, performance, accessibility, design. Apply to all web UI work. Adapted from Vercel Design Guidelines.
adilkalam/orca
react-performance
React/Next.js performance patterns with wrong/right code examples. Apply when building or reviewing React components. Adapted from Vercel React Best Practices by @shuding.
adilkalam/orca
stripe-integration
Payment integration patterns for Stripe. Covers checkout sessions, subscriptions, webhooks, idempotency, and the sharp edges that cause real-money bugs. Backend-agnostic with examples for Next.js App Router and Django REST Framework.
adilkalam/orca
testing-strategy
Testing strategies and best practices for unit, integration, and end-to-end tests. Use when setting up test infrastructure, writing test cases, or deciding what to test. Covers test pyramid, mocking strategies, and coverage guidelines.
adilkalam/orca
frontend-aesthetics
Global frontend aesthetics skill that helps Claude avoid generic "AI slop" UI and make bold, intentional visual decisions while still honoring each project's design-dna, tokens, and architecture.
adilkalam/orca
pg-style-editor
Edit writing to adopt Paul Graham's exceptionally clear style for research and long-form content - concrete language, varied sentence rhythm, accessible formality, specific evidence. Use when user wants to rewrite content in PG's style or asks to "make this clearer" or "simplify research writing."
Didn't find tool you were looking for?