performing-visual-regression-testing

This skill enables Claude to execute visual regression tests using tools like Percy, Chromatic, and BackstopJS. It captures screenshots, compares them against baselines, and analyzes visual differences to identify unintended UI changes. Use this skill when the user requests visual testing, UI change verification, or regression testing for a web application or component. Trigger phrases include "visual test," "UI regression," "check visual changes," or "/visual-test".

1.02x

Quality

53%

Does it follow best practices?

Impact

97%

1.02x

Average score across 12 eval scenarios

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./backups/skills-migration-20251108-070147/plugins/testing/visual-regression-tester/skills/visual-regression-tester/SKILL.md

Evaluation results

100%

Visual Regression Testing for E-Commerce Product Catalog

BackstopJS viewport configuration

Criteria

Without context

With context

Uses BackstopJS

100%

Multiple viewports

100%

Viewport width+height

100%

Named scenarios

100%

Target URL or path

100%

Baseline directory

100%

Baseline update method

100%

Config file format

100%

Test run command

100%

Async/timing setting

100%

92%

Automated Visual Regression Checks in Pull Request Workflow

CI/CD pipeline integration

Criteria

Without context

With context

Uses Percy/Chromatic/BackstopJS

100%

API token as env var

100%

No hardcoded credentials

100%

Triggers on PR/push

100%

Tool install step

100%

70%

Test execution command

100%

Baseline strategy addressed

100%

Multi-environment or browser coverage

20%

60%

CI fail on diff

100%

90%

App setup step

100%

90%

10%

Cross-Browser Visual Testing for a Dashboard Component

Cross-browser visual testing setup

Criteria

Without context

With context

Uses Percy/Chromatic/BackstopJS

100%

Multiple browsers targeted

100%

Desktop viewport defined

100%

Mobile viewport defined

Viewport labels

100%

Specific component targeted

100%

Baseline comparison step

100%

Diff report output

100%

Baseline update process

100%

Executable run script

100%

Setting Up Visual Regression Testing for a React Dashboard

Percy project setup and API configuration

Criteria

Without context

With context

Uses Percy

100%

PERCY_TOKEN env var

100%

No literal credentials

100%

Multiple viewports

100%

Viewport width specified

100%

Percy config file

100%

Snapshot capture command

100%

Baseline guidance

100%

Specific pages or components

100%

Install instructions

100%

README or usage doc

100%

Classifying Visual Changes After a Planned UI Refresh

Visual diff analysis and false positive avoidance

Criteria

Without context

With context

Uses Percy/Chromatic/BackstopJS

100%

Diff classification

100%

Baseline update command

100%

False positive avoidance strategy

100%

Test run script

100%

Diff report artifact

100%

Targets specific components

100%

Multiple viewports

100%

Baseline directory configured

100%

Usage documentation

100%

Automating a Complete Testing Workflow for a Component Library

Combined functional and visual testing pipeline

Criteria

Without context

With context

Uses Percy/Chromatic/BackstopJS

100%

Functional tests run first

100%

Visual tests conditional on passing

100%

API token as env var

100%

Multiple viewports configured

100%

Specific pages or selectors targeted

100%

Combined test runner script

100%

Install/setup step included

80%

100%

Baseline guidance

100%

Clear failure separation

100%

Component Library Visual Regression Testing Setup

Chromatic component library visual testing

Criteria

Without context

With context

Uses Chromatic

100%

CHROMATIC_PROJECT_TOKEN env var

100%

No hardcoded credentials

100%

Multiple viewports configured

100%

Viewport width values present

100%

Storybook integration

100%

Chromatic run command

100%

Baseline approval guidance

100%

Package install step

100%

Usage README

100%

Targeted Component Visual Regression Testing

Component-level selector visual testing

Criteria

Without context

With context

Uses Percy/Chromatic/BackstopJS

100%

CSS selector or component targeting

100%

Multiple components targeted

100%

Multiple viewports

100%

Viewport dimensions specified

100%

Baseline storage path

100%

Baseline update command

100%

Test execution command

100%

Config file produced

100%

Diff threshold or sensitivity

100%

Component scenario labels

100%

95%

Visual Regression Analysis for UI Redesign Review

Visual diff analysis and HTML reporting

Criteria

Without context

With context

Uses Percy/Chromatic/BackstopJS

100%

HTML or structured report produced

100%

Intentional vs unintended classification

80%

86%

Baseline update mechanism

100%

Multiple viewports

100%

Specific pages or components targeted

100%

Test run script

100%

False positive mitigation

70%

Report output path specified

100%

Workflow documentation

100%

Repository: jeremylongshore/claude-code-plugins-plus-skills
Commit: 13d35b8

Evaluated: about 2 months ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

Visual Regression Testing for E-Commerce Product Catalog Automated Visual Regression Checks in Pull Request Workflow Cross-Browser Visual Testing for a Dashboard Component Setting Up Visual Regression Testing for a React Dashboard Classifying Visual Changes After a Planned UI Refresh Automating a Complete Testing Workflow for a Component Library Component Library Visual Regression Testing Setup Targeted Component Visual Regression Testing Visual Regression Analysis for UI Redesign Review

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.