visual-qa

Runs automated visual QA on built web UIs using headless Chromium, axe-core, and pixel-diff baselines.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, axe-core, sharp, and includes scripts (resource) components.

What problem does it solve? Front-end changes often ship with bugs that eyeballing one screenshot misses: horizontal overflow on mobile, text colliding with art at certain scroll positions, nav contrast failures over dark sections, WCAG violations, and unintended visual regressions from shared-component edits. This Skill makes those checks mechanical and repeatable instead of relying on manual review. ## Core Features & Use Cases - Automated multi-width sweep: Builds and serves the static site, then drives it through headless Chromium at 390/768/1440px widths, auto-scrolling pinned scenes, checking horizontal overflow, console errors, and running axe-core for WCAG AA violations. - Baseline screenshot regression: Pixel-diffs every route against committed full-page baselines, writes diff images with changed pixels highlighted, and supports blessing intentional redesigns via --update-baselines. - Design fidelity checks: Companion scripts compare a build against a reference design — ground-sequence contact sheets, lateral scroll-motion detection, glyph-width/display-scale fidelity metrics, and a vision-judge loop for clone work. - Use Case: After adding a new hero section to a Next.js marketing site, run the gate before committing to catch a 6px iPhone SE overflow, a contrast failure, and an unintended change to an unrelated page — all in one command. ## Quick Start Run the visual QA gate on my built site by executing bash .claude/skills/visual-qa/run.sh against my project directory and then review the screenshots and report it produces.

Frequently Asked Questions about visual-qa

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

FAQPage Schema
How do I run automated visual regression testing on a Next.js site?

Build the static export, serve it locally, and run the sweep script which screenshots every route at multiple widths and pixel-diffs each against committed baselines. The run.sh wrapper handles build, serve, sweep, and teardown in one command, exiting non-zero on failures.

How to check WCAG accessibility violations with axe-core and Playwright?

The sweep injects axe-core into each page loaded in headless Chromium and fails the run on any serious or critical WCAG 2 AA violations, including contrast, alt text, landmarks, and heading order. Results are reported per route and width alongside the screenshots.

Why does my visual regression baseline diff report false positives?

Auto-rotating content like carousels, animated counters, or randomized testimonials changes pixels between runs, producing diffs that are real but not regressions. Read the generated diff image before believing the percentage, and consider reduced-motion capture for deterministic freezes.

Does this visual QA approach work with any web framework?

Yes, it is framework-agnostic as long as the project produces a static build output that can be served over HTTP. The wrapper auto-detects routes from the output directory, and routes or widths can be overridden with flags.

What are the limitations of pixel-diff visual regression testing?

Pixel diffs cannot judge whether a change looks right, only that pixels moved, so intentional redesigns require re-blessing baselines. Permanently animating elements above the fold can push noise toward the threshold, and the checks complement rather than replace logic and e2e test suites.