MCPInstall

visual-regression-testing

by aj-geddesTesting & QA

Detect unintended visual changes in UI by comparing screenshots across versions. Use for visual regression, screenshot diff, Percy, Chromatic, UI testing, and visual validation.

Installs
718
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill visual-regression-testing
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads visual-regression-testing automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Visual Regression Testing

Table of Contents

Overview

Visual regression testing captures screenshots of UI components and pages, then compares them across versions to detect unintended visual changes. This automated approach catches CSS bugs, layout issues, and design regressions that traditional functional tests miss.

When to Use

  • Detecting CSS regression bugs
  • Validating responsive design across viewports
  • Testing across different browsers
  • Verifying component visual consistency
  • Catching layout shifts and overlaps
  • Testing theme changes
  • Validating design system components
  • Reviewing visual changes in PRs

Quick Start

Minimal working example:

// tests/visual/homepage.spec.ts
import { test, expect } from "@playwright/test";

test.describe("Homepage Visual Tests", () => {
  test("homepage matches baseline", async ({ page }) => {
    await page.goto("/");

    // Wait for images to load
    await page.waitForLoadState("networkidle");

    // Full page screenshot
    await expect(page).toHaveScreenshot("homepage-full.png", {
      fullPage: true,
      maxDiffPixels: 100, // Allow small differences
    });
  });

  test("responsive design - mobile", async ({ page }) => {
    await page.setViewportSize({ width: 375, height: 667 }); // iPhone SE
    await page.goto("/");

    await expect(page).toHaveScreenshot("homepage-mobile.png");
  });

  test("responsive design - tablet", async ({ page }) => {
// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

GuideContents
Playwright Visual TestingPlaywright Visual Testing
Percy Visual TestingPercy Visual Testing
Chromatic for StorybookChromatic for Storybook
Cypress Visual TestingCypress Visual Testing
BackstopJS ConfigurationBackstopJS Configuration
Handling Dynamic ContentHandling Dynamic Content
Testing Responsive ComponentsTesting Responsive Components

Best Practices

✅ DO

  • Hide or mock dynamic content (timestamps, ads)
  • Test across multiple viewports
  • Wait for animations and images to load
  • Use consistent viewport sizes
  • Disable animations during capture
  • Test interactive states (hover, focus)
  • Review diffs carefully before approving
  • Store baselines in version control

❌ DON'T

  • Test pages with constantly changing content
  • Ignore small legitimate differences
  • Skip responsive testing
  • Forget to update baselines after design changes
  • Test pages with random data
  • Use overly strict thresholds (0% diff)
  • Skip browser/device variations
  • Commit unapproved diffs

FAQ

What does the visual-regression-testing skill do?

Detect unintended visual changes in UI by comparing screenshots across versions. Use for visual regression, screenshot diff, Percy, Chromatic, UI testing, and visual validation.

How do I install visual-regression-testing?

Run npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill visual-regression-testing in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/visual-regression-testing/ (personal) or .claude/skills/visual-regression-testing/ (project).

Which AI agents can use visual-regression-testing?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is visual-regression-testing safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains visual-regression-testing?

It is published by aj-geddes in aj-geddes/useful-ai-prompts. It has 718 recorded installs.

More from aj-geddes/useful-ai-prompts

View all →

nodejs-express-server

aj-geddes/useful-ai-prompts

Build production-ready Express.js servers with middleware, authentication, routing, and database integration. Use when creating REST APIs, managing requests/responses, implementing middleware chains, and handling server logic.

Backend & APIs3.3K installs

code-review-analysis

aj-geddes/useful-ai-prompts

Perform comprehensive code reviews with best practices, security checks, and constructive feedback. Use when reviewing pull requests, analyzing code quality, checking for security vulnerabilities, or providing code improvement suggestions.

Code Quality & Workflow2.4K installs

rest-api-design

aj-geddes/useful-ai-prompts

Design RESTful APIs following best practices for resource modeling, HTTP methods, status codes, versioning, and documentation. Use when creating new APIs, designing endpoints, or improving existing API architecture.

Backend & APIs2.1K installs

jenkins-pipeline

aj-geddes/useful-ai-prompts

Build Jenkins declarative and scripted pipelines with stages, agents, parameters, and plugins. Implement multi-branch pipelines and deployment automation.

AI & Agents2K installs

architecture-diagrams

aj-geddes/useful-ai-prompts

Create system architecture diagrams using Mermaid, PlantUML, C4 model, flowcharts, and sequence diagrams. Use when documenting architecture, system design, data flows, or technical workflows.

Code Quality & Workflow2K installs

ansible-automation

aj-geddes/useful-ai-prompts

Infrastructure automation and configuration management using Ansible playbooks, roles, and inventory. Use for deploying applications, patching, and managing servers.

Productivity & Automation1.8K installs

Popular testing & qa skills

View category →

tdd

mattpocock/skills

Test-driven development. Use when the user wants to build features or fix bugs test-first, mentions "red-green-refactor", or wants integration tests.

Testing & QA1.2M installs

grilling

mattpocock/skills

Grill the user relentlessly about a plan, decision, or idea. Use when the user wants to stress-test their thinking, or uses any 'grill' trigger phrases.

Testing & QA996.2K installs

migrate-to-shoehorn

mattpocock/skills

Migrate test files from as type assertions to @total-typescript/shoehorn. Use when user mentions shoehorn, wants to replace as in tests, or needs partial test data.

Testing & QA484.1K installs

run-train

lllllllama/rigorpilot-skills

Rigor Train skill for deep learning research repositories. Use when a documented or selected training command should be run conservatively for startup verification, short-run verification, full kickoff, or resume, with command, config, seed, log, checkpoint, status, and metric evidence written to standardized trainoutputs/. Do not use for environment setup, exploratory sweeps, speculative idea implementation, or end-to-end orchestration.

Testing & QA337.8K installs

test-driven-development

obra/superpowers

Use when implementing any feature or bugfix, before writing implementation code

Testing & QA261.8K installs

finishing-a-development-branch

obra/superpowers

Use when implementation is complete, all tests pass, and you need to decide how to integrate the work

Testing & QA216.8K installs