majiayu000 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:
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.