visual-qa

Audit web page visual design against the Industrial Modern DotMac design system.

Updated Feb 3, 2026
One-click install
npx skills add https://github.com/michaelayoade/dotmac_crm --skill visual-qa-michaelayoade
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: visual-qa
Source: https://github.com/michaelayoade/dotmac_crm/tree/main/.claude/skills/visual-qa
Command: npx skills add https://github.com/michaelayoade/dotmac_crm --skill visual-qa-michaelayoade

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams catch visual design drift and implementation gaps in web pages by automatically checking typography, spacing, components, dark mode, accessibility, and responsive behavior against the DotMac Industrial Modern design system.

Core Features & Use Cases

  • Playwright-based visual QA: Navigates to a target URL, captures accessibility snapshots, and collects light-mode and dark-mode screenshots for comparison.
  • Design system compliance checklist: Verifies typography rules, border radius standards, domain color expectations, and component macro usage.
  • Frontend quality gates: Checks console errors/warnings, validates accessibility details (e.g., aria-labels, heading hierarchy, focus rings), and ensures responsive patterns and dark-mode variants are present.

Quick Start

Run visual-qa against your page URL by passing page_url as the path you want audited, ensuring the test environment is reachable at http://localhost:8000 and any required login uses environment-provided test credentials.

Frequently Asked Questions about visual-qa

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

FAQPage Schema
How do I audit UI visuals against a design system using Playwright?

You can audit UI visuals by running Playwright-driven navigation to capture accessibility snapshots and paired light-mode and dark-mode screenshots, verifying typography, spacing, and component structure against the design system.

Can I check dark mode and accessibility attributes on an admin dashboard?

Yes, you can check dark mode and accessibility by verifying required dark variants, aria-labels, heading hierarchy, focus ring visibility, and responsive wrappers like overflow-x-auto on admin dashboards and UI-heavy pages.

What is visual regression testing for frontend quality?

Visual regression testing for frontend quality captures paired screenshots and accessibility snapshots to detect visual design drift, checking console error levels, focus visibility, and responsive layout consistency across themes.

Do I need a local test environment to run a visual UI audit?

Yes, you need a reachable test environment at http://localhost:8000 to pass the page_url for auditing, and any required login must use environment-provided test credentials to access the target page.

Does this visual QA process verify design system component macros and typography?

Yes, the visual QA process verifies required design-system macros, typography rules, border radius standards, and domain color expectations to ensure strict compliance and catch implementation gaps.

What are the limitations of automated UI auditing for responsive layout consistency?

Automated UI auditing limitations include dependency on a reachable local test environment and environment-provided credentials, meaning pages requiring complex external authentication or unreachable local servers cannot be audited.