Run visual regression tests with Percy, Chromatic, or Playwright. Detects visual changes across browsers and viewports.
Runs visual regression tests to detect unintended UI changes across browsers and viewports.
npx claudepluginhub xarlord/devflow-enforcerThis skill inherits all available tools. When active, it can use any tool Claude has access to.
This skill manages visual regression testing:
Detect unintended visual changes. Use this skill:
1. DETECT visual testing tool
2. CONFIGURE viewports and browsers
3. CAPTURE snapshots
4. COMPARE with baselines
5. GENERATE diff report
6. REQUIRE approval for changes
| Parameter | Type | Description | Required |
|---|---|---|---|
| tool | string | percy, chromatic, playwright | No |
| viewports | string[] | Viewport sizes to test | No |
| updateBaseline | boolean | Update baselines | No |
| Tool | Type | Command |
|---|---|---|
| Percy | Cloud | npx percy exec -- npx playwright test |
| Chromatic | Cloud | npx chromatic |
| Playwright | Local | npx playwright test --project=visual |
| Loki | Local | npx loki |
# Visual Test Report
**Date:** [timestamp]
**Tool:** Percy
**Duration:** 2m 15s
## Snapshot Summary
| Status | Count |
|--------|-------|
| ā
No Changes | 42 |
| š Changed | 3 |
| ā Added | 2 |
| ā Removed | 0 |
| **Total** | **47** |
## Changed Snapshots (Require Review)
### 1. Login Page - Mobile (375px)
- **Diff:** 2.3% pixels changed
- **Browser:** Chromium
- **Status:** ā³ Pending approval
- **View:** https://percy.io/diff/abc123
**Detected Changes:**
- Button position shifted down 5px
- Error message styling changed
### 2. Dashboard - Desktop (1280px)
- **Diff:** 0.5% pixels changed
- **Browser:** Firefox
- **Status:** ā³ Pending approval
- **View:** https://percy.io/diff/abc124
## New Snapshots
### 1. Settings Page - Desktop (1280px)
- **Status:** ā
Auto-approved (new page)
### 2. Profile Page - Mobile (375px)
- **Status:** ā
Auto-approved (new page)
## Viewports Tested
| Viewport | Width | Snapshots |
|----------|-------|-----------|
| Mobile | 375px | 15 |
| Tablet | 768px | 15 |
| Desktop | 1280px | 17 |
## Coverage
| Category | Count |
|----------|-------|
| Pages | 8 |
| Components | 25 |
| States | 14 |
## Approval Required
3 snapshots require review before merge.
Review at: https://percy.io/builds/12345
USER: /visual-test
SKILL OUTPUT:
# Visual Test Report
**Date:** 2026-02-17
**Tool:** Percy
**Duration:** 2m 15s
## Snapshot Summary
ā
42/47 snapshots unchanged
š 3 snapshots changed (review required)
ā 2 new snapshots added
## Changed Snapshots
### 1. Login Page - Mobile
**Diff:** 2.3%
Before ā After comparison shows:
- Button moved down 5px
- Input field border changed
[View Diff](https://percy.io/diff/abc123)
## Action Required
Review 3 changed snapshots in Percy:
https://percy.io/builds/12345
USER: /visual-test --update-baseline
SKILL INPUT:
{
"updateBaseline": true
}
SKILL OUTPUT:
# Visual Test Report
**Date:** 2026-02-17
**Mode:** Update Baselines
## Baselines Updated
| Snapshot | Previous | Updated |
|----------|----------|---------|
| Login Page - Mobile | v1.2.0 | v1.3.0 |
| Dashboard - Desktop | v1.2.0 | v1.3.0 |
| Settings Page - Tablet | v1.2.0 | v1.3.0 |
ā ļø Baseline updates committed to repository.
Team will see these as the new expected state.
USER: /visual-test --component Button
SKILL OUTPUT:
# Visual Test Report - Button Component
**Date:** 2026-02-17
**Component:** Button
## Button States Tested
| State | Viewport | Status |
|-------|----------|--------|
| Default | Mobile | ā
No change |
| Default | Desktop | ā
No change |
| Hover | Mobile | ā
No change |
| Hover | Desktop | ā
No change |
| Focus | Mobile | ā
No change |
| Focus | Desktop | ā
No change |
| Disabled | Mobile | ā
No change |
| Disabled | Desktop | ā
No change |
| Loading | Mobile | ā
No change |
| Loading | Desktop | ā
No change |
## All Button States Match Baseline ā
// percy.config.js
module.exports = {
version: 2,
snapshot: {
widths: [375, 768, 1280],
minHeight: 1024,
percyCSS: `
.timestamp { visibility: hidden; }
.random-avatar { visibility: hidden; }
`,
},
};
// playwright.visual.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
expect: {
toHaveScreenshot: {
maxDiffPixels: 100,
maxDiffPixelRatio: 0.01,
},
},
use: {
viewport: { width: 1280, height: 720 },
},
});
// Mask elements that change between runs
await expect(page).toHaveScreenshot('dashboard.png', {
mask: [
page.locator('.timestamp'),
page.locator('.live-chart'),
page.locator('.notification-badge'),
],
maskColor: '#ff00ff',
});
# GitHub Actions
name: Visual Tests
on: [push, pull_request]
jobs:
visual:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- run: npm ci
- run: npx percy exec -- npx playwright test
env:
PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
This skill integrates with:
e2e-testing: Combined E2E + visual testsvisual-regression-agent: Visual analysisui-ux-designer: Design review for changesSearch, retrieve, and install Agent Skills from the prompts.chat registry using MCP tools. Use when the user asks to find skills, browse skill catalogs, install a skill for Claude, or extend Claude's capabilities with reusable AI agent components.
Activates when the user asks about AI prompts, needs prompt templates, wants to search for prompts, or mentions prompts.chat. Use for discovering, retrieving, and improving prompts.
This skill should be used when the user asks to "add MCP server", "integrate MCP", "configure MCP in plugin", "use .mcp.json", "set up Model Context Protocol", "connect external service", mentions "${CLAUDE_PLUGIN_ROOT} with MCP", or discusses MCP server types (SSE, stdio, HTTP, WebSocket). Provides comprehensive guidance for integrating Model Context Protocol servers into Claude Code plugins for external tool and service integration.