qa-design

Evaluate design system consistency and UX usability issues across web interfaces.

2|1|Updated May 27, 2025
One-click install
npx skills add https://github.com/VirtoCommerce/vc-mcp-testing-module --skill qa-design-virtocommerce
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: qa-design
Source: https://github.com/VirtoCommerce/vc-mcp-testing-module/tree/main/skills/qa-design
Command: npx skills add https://github.com/VirtoCommerce/vc-mcp-testing-module --skill qa-design-virtocommerce

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps QA teams detect design system drift, usability issues, and inconsistent user experiences by applying structured visual, token, and heuristic evaluations.

Core Features & Use Cases

  • Design System Auditing: Validates live theme tokens, spacing, typography, colors, layout stability, accessibility signals, and component consistency against defined UI invariants.
  • UX Heuristic Evaluation: Applies Nielsen's 10 usability heuristics with severity scoring and business-specific cross-references for B2B commerce experiences.
  • State and Visual Testing: Evaluates loading, error, empty, overflow, and revenue-critical flows with screenshots, measurements, and actionable findings.
  • Use Case: Review a storefront component or checkout flow to identify design violations, accessibility risks, and usability problems before release.

Quick Start

Use the qa-design skill to audit the checkout flow for design consistency, usability issues, and UI invariant violations.

Frequently Asked Questions about qa-design

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

FAQPage Schema
How do I audit a checkout flow for UX usability issues and design system consistency?

To audit a checkout flow for UX usability issues, evaluate design system consistency by inspecting live theme tokens, measuring layout stability, checking accessibility signals, and applying heuristic scoring to identify UI invariant violations. Generate structured defect reports for actionable findings.

What is a UX heuristic evaluation and how does severity scoring work for B2B commerce?

A UX heuristic evaluation applies Nielsen's 10 usability heuristics to web interfaces to identify usability problems. It includes severity scoring and business-specific cross-references for B2B commerce experiences to prioritize design violations and accessibility risks before release.

How do I detect design system drift in live storefront components?

Detect design system drift by validating live theme tokens, spacing, typography, colors, and component consistency against defined UI invariants. Inspect storefront components directly to measure layout stability and capture structured findings of any visual inconsistencies.

Can I use Figma comparisons to test state-based visual scenarios in web interfaces?

Yes, Figma comparisons support state-based visual testing scenarios by evaluating loading, error, empty, and overflow states. Capture screenshots and measurements of revenue-critical flows to identify design violations and verify UI implementation against design system specifications.

Does this approach support accessibility checks and Playwright UI testing?

Yes, this approach integrates accessibility checks with Playwright UI testing to evaluate loading, error, and empty states. It captures live token inspections, layout measurements, and screenshots to produce actionable findings and structured defect reports for web interfaces.

When should I perform a UX audit on a storefront component?

Perform a UX audit on a storefront component before release to identify design violations, accessibility risks, and usability problems. Evaluate revenue-critical checkout flows and state-based visual scenarios to ensure consistent user experiences and prevent design system drift.