skills.rest
adilkalam
adilkalamCOMMUNITY
Explore all skills by this author →
GitHub

design-qa-skill

Automate design QA checks across breakpoints and generate severity-scored reports.

Updated Aug 23, 2026
Search Tags:#quality assurance#consistency#accessibility#UI/UX#design system#design QA#visual review
One-click install
npx skills add https://github.com/adilkalam/orca-os --skill design-qa-skill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-qa-skill
Source: https://github.com/adilkalam/orca-os/tree/main/skills/design-qa-skill
Command: npx skills add https://github.com/adilkalam/orca-os --skill design-qa-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Maintaining high visual quality and consistency across UI implementations is a constant challenge, often leading to design drift, accessibility issues, and a degraded user experience. This Skill equips AI agents with structured checklists to automate rigorous design quality assurance, ensuring every pixel is perfect.

Core Features & Use Cases

  • Comprehensive QA Checklists: Provides detailed guidelines covering visual hierarchy, typography, spacing, alignment, color, contrast, responsive behavior, interaction, and accessibility.
  • Severity-Based Issue Scoring: Categorizes identified design flaws as Blocker, High, Medium, or Nit, enabling prioritized remediation and efficient bug tracking.
  • Quantitative Design Score Generation: Generates a design_score (0-100) based on adherence to design system tokens, visual clarity, responsive behavior, and overall polish, offering measurable quality metrics.
  • Use Case: Before launching a new feature, you need to ensure it meets all design standards. Use this Skill to automatically apply a detailed QA checklist to the UI, identify visual inconsistencies, and generate a clear report with severity ratings, saving hours of manual review and preventing costly post-launch fixes.

Quick Start

Perform a design QA on the attached UI screenshot, focusing on spacing, color contrast, and responsive behavior.

Frequently Asked Questions about design-qa-skill

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate design quality assurance checks across my UI?▼

Design QA automation applies structured checklists to evaluate visual hierarchy, spacing, color, typography, contrast, and responsive behavior across breakpoints. It generates a design_score (0-100) and categorizes issues by severity—Blocker, High, Medium, or Nit—enabling prioritized remediation without manual review.

What design elements does automated QA check for?▼

Automated design QA evaluates visual hierarchy, typography, spacing, alignment, color consistency, WCAG AA/AAA contrast thresholds, token compliance, semantic color usage, keyboard navigation, focus states, ARIA attributes, loading and error states, and responsive behavior across 375px, 768px, 1440px, and 1920px breakpoints.

Can I use design QA to check accessibility compliance?▼

Yes. Design QA enforces WCAG AA/AAA contrast thresholds, validates ARIA attributes, verifies keyboard navigation and focus states, and checks semantic color usage. These checks identify accessibility issues alongside visual inconsistencies in a single automated review.

How does design QA handle responsive design testing?▼

Design QA uses browser automation and screenshots to evaluate UI consistency across four standard breakpoints: 375px, 768px, 1440px, and 1920px. It detects layout shifts, spacing irregularities, and visual degradation at each resolution.

What output does design QA provide after running checks?▼

Design QA produces a comprehensive report with a design_score (0-100), severity-categorized issues (Blocker, High, Medium, Nit), and actionable findings on visual quality, design system token compliance, contrast, and responsive behavior for efficient bug tracking and remediation.

Do I need to set up code-level hints for design QA to work?▼

No. Design QA works via live UI evaluation and browser automation with screenshots, or optionally integrates code-level hints. It requires only UI access at specified breakpoints—no environment setup or dependencies are mandatory.

Related Skills

Explore More Design & Creative Skills→
marktantongcomarktantongco

visual-design-foundations

Standardize visual design tokens for typography, color, spacing, and iconography.

Community
Intermediate
Jia-Hong-PengJia-Hong-Peng

qa

Automate end-to-end QA testing and bug remediation for web applications.

Community
Advanced
hanzilihanzili
175

a11y-auditor

Audit web pages for WCAG 2.1 AA accessibility issues with screenshots and remediation steps.

Community
Advanced
TheGreatLTheGreatL

ui-visual-validator

Validate UI modifications for visual regressions, design compliance, and accessibility.

Community
Advanced