qa-visual-regression
Visual regression testing: 8 skills (chromatic-visual-regression-testing, percy-visual-regression-testing, playwright-snapshots, responsive-breakpoint-runner, storybook-visual-regression-testing, visual-baseline-conventions, visual-baseline-gate, visual-diff-summarizer) and 3 agents (visual-baseline-curator, visual-ci-gate-orchestrator, visual-diff-classifier).
Install this plugin
/plugin install qa-visual-regression@testland-qaPart of role bundles: qa-role-automation-engineer, qa-role-sdet, qa-role-frontend
qa-visual-regression
Visual regression testing across Percy, Chromatic, Playwright snapshots, Storybook visual tests, plus diff classification, baseline curation, and per-PR diff summarization.
Components
| Type | Name | Description |
|---|---|---|
| Skill | percy-visual-regression-testing | Author Percy snapshots via @percy/playwright/cypress/selenium/storybook; run with percy exec; review diffs in the Percy UI. |
| Skill | chromatic-visual-regression-testing | Run Chromatic on Storybook / Playwright / Cypress; configure baselines, TurboSnap, exit codes for CI gating. |
| Skill | playwright-snapshots | Author expect(page).toHaveScreenshot() assertions; configure mask/clip/threshold/maxDiffPixels; manage per-OS / per-browser snapshot dirs and --update-snapshots. |
| Skill | storybook-visual-regression-testing | Wire visual regression into Storybook via @chromatic-com/storybook (hosted) or @storybook/test-runner postVisit + Playwright (self-hosted). |
| Skill | responsive-breakpoint-runner | Dispatcher across viewport matrices for whichever engine the project uses; produces a single cross-breakpoint matrix report. |
| Skill | visual-baseline-conventions | Reference catalog: engine selection, story/page/breakpoint coverage, mask/threshold/wait decision matrix, severity tiering, anti-patterns. |
| Agent | visual-diff-classifier | Adversarial reviewer of visual diffs: classify each as intentional / incidental / regression; surfaces "looks intentional but isn't" cases that humans rubber-stamp. |
| Agent | visual-baseline-curator | Builder: proposes a coverage-optimal initial baseline set, generates engine config files, runs a dry-run to verify the suite compiles. |
| Skill | visual-baseline-gate | CI gate: aggregate diff classifications + acceptance log into a single go/no-go verdict; enforce author-cannot-self-approve on baseline updates. |
| Agent | visual-ci-gate-orchestrator | Aggregates visual-diff-classifier verdicts via visual-baseline-gate into a single CI BLOCK/REVIEW/OK decision. |
| Skill | visual-diff-summarizer | Build-an-X per-PR visual-diff summary across Percy / Chromatic / Playwright / Storybook; intent-based aligned / adjacent / unrelated clustering. |
Install
/plugin marketplace add testland/qa
/plugin install qa-visual-regression@testland-qaSkills
chromatic-visual-regression-testing
Authors and runs Chromatic visual tests on Storybook, Playwright, or Cypress projects via the `chromatic` CLI; configures baselines, TurboSnap, UI Review, and CI gating; reads exit codes for change-vs-error classification. Use when the project ships visual regression coverage to Chromatic Cloud.
percy-visual-regression-testing
Authors Percy visual snapshot tests via the @percy/cli + framework SDK (Playwright, Cypress, Selenium, Storybook), runs them with `percy exec -- <test command>`, configures viewports / masking / ignored regions, and reviews diffs in the Percy build UI. Use when the project ships visual regression coverage to BrowserStack Percy.
playwright-snapshots
Authors Playwright `expect(page).toHaveScreenshot()` assertions, configures masks / clips / threshold / maxDiffPixels per test, manages the per-OS / per-browser snapshot directory, and runs the update flow with `--update-snapshots`. Use when the project ships self-hosted visual regression coverage in Playwright (no external snapshot service).
responsive-breakpoint-runner
Produces a single breakpoint-matrix report (rows = pages/stories, columns = viewports) across Percy, Chromatic, Playwright snapshots, or Storybook test-runner. Routes per-engine viewport syntax, runs each, and aggregates the results into one cross-breakpoint view. Use when the team needs one unified pass/fail view across three or more viewport widths instead of separate per-engine or per-breakpoint reports. The matrix-view output is the distinguishing trait: it dispatches to playwright-snapshots (and the other engines) rather than replacing any single-engine skill.
storybook-visual-regression-testing
Sets up visual regression coverage for a Storybook project - either via the official @chromatic-com/storybook addon (hosted) or via @storybook/test-runner with a postVisit hook that calls Playwright's toHaveScreenshot (self-hosted). Covers test-runner install, lifecycle hooks (setup / preVisit / postVisit), and CI integration.
visual-baseline-conventions
Reference catalog for visual regression coverage decisions - which Storybook stories or pages get baselines, how to choose breakpoints, when to mask vs adjust threshold, when to add or remove a baseline, and a decision matrix for picking among Percy / Chromatic / Playwright / Storybook test-runner. Use when designing visual coverage for a new project or auditing an existing baseline set.
visual-baseline-gate
Consumes visual-diff-classifier JSON and a reviewer-signed acceptance log to produce a single go/no-go CI verdict for visual regression. Blocks when intentional baseline changes lack a non-author reviewer sign-off or when regressions are present, and emits a markdown + JSON artifact for the CI step. Use this skill when the gate's input is pre-classified diff data and the enforcement concern is reviewer approval, not when the goal is fanning out to multiple engines (use visual-ci-gate-orchestrator for that).
visual-diff-summarizer
Builds a per-PR visual-diff summary that clusters intentional vs incidental changes across snapshots emitted by Percy, Chromatic, Playwright `toHaveScreenshot`, Storybook test-runner, and other visual testing tools - groups diffs by component / route, separates "intent-aligned with PR scope" from "cascade / regression suspect", surfaces baseline-update recommendations, and emits a single PR comment that points the reviewer at the screenshots that need actual eyes. Use when a PR has 20+ visual diffs and the reviewer needs help triaging which ones to actually open.
Agents
visual-baseline-curator
Builder agent that proposes a coverage-optimal initial baseline set for a Storybook (or page-driven app), generates the matching engine config (Chromatic story parameters / Percy widths / Playwright projects / Storybook test-runner postVisit hook), and writes the files into the repo. Use when starting visual regression on a project that has none, or auditing an existing baseline set against the conventions.
visual-ci-gate-orchestrator
CI-enforcement agent that reads visual-classifications.json, applies the visual-baseline-gate decision rules, enforces author-cannot-self-approve, and writes visual-gate.json + visual-gate.md so the pipeline can exit non-zero on BLOCK. Use after visual-diff-classifier has finished and you need binding gate output files, not just the decision logic the skill provides.
visual-diff-classifier
Adversarial reviewer of visual regression diffs. Classifies each diff in a build (Percy / Chromatic / Playwright snapshot report) into one of three categories - intentional, incidental, or regression - with rationale and recommended action. Use when reviewing a visual-test build that the team is about to accept; surfaces "looks intentional but isn't" cases that human reviewers rubber-stamp.