npx claudepluginhub vizzly-testing/cli --plugin vizzlyThis skill uses the workspace's default tool permissions.
When a user mentions failing visual tests or screenshot differences, follow these steps to investigate and help them understand what changed.
Detects visual and UI regressions via screenshot comparison and pixel-diff analysis using Playwright or Puppeteer. Captures cross-browser/viewport screenshots, categorizes layout shifts and color changes, generates diff reports for CI/CD PR checks.
Detects UI visual regressions via screenshot comparisons using Playwright, Cypress, Percy. Generates diffs, handles responsive breakpoints, and integrates with CI.
Implements visual regression testing with screenshot comparison, diff detection, and baseline management for UI components and pages to catch CSS regressions and layout shifts.
Share bugs, ideas, or general feedback.
When a user mentions failing visual tests or screenshot differences, follow these steps to investigate and help them understand what changed.
Use the Read tool to get .vizzly/report-data.json:
Read .vizzly/report-data.json
If the file is too large, use Bash to extract just the failing comparisons:
cat .vizzly/report-data.json | node -e "
const data = JSON.parse(require('fs').readFileSync('/dev/stdin', 'utf8'));
console.log(JSON.stringify(data.comparisons?.filter(c => c.status === 'failed'), null, 2));
"
Find the failing comparison in the comparisons array. Each comparison has:
name - Screenshot identifierstatus - "failed", "passed", or "new"diffPercentage - How much the screenshot differs (percentage)threshold - The allowed difference thresholdcurrent - Path to current screenshot (relative, like /images/current/name.png)baseline - Path to baseline screenshotdiff - Path to diff imageConvert the paths from report-data.json to filesystem paths:
/images/current/name.png → .vizzly/current/name.png/images/baselines/name.png → .vizzly/baselines/name.pngNote: If paths don't match this format, use the screenshot name field directly:
.vizzly/baselines/{name}.png.vizzly/current/{name}.pngUse the Read tool to view both images:
.vizzly/baselines/<name>.png.vizzly/current/<name>.pngSkip the diff image (.vizzly/diffs/): The diff images are algorithmically generated overlays that highlight pixel differences. They're useful for humans in the dashboard but not helpful for AI analysis - comparing the actual baseline and current images directly gives you better context about what changed.
Compare the two images and describe what you observe:
Look for:
Categorize by diff percentage:
Based on what you observe, suggest likely causes:
CSS changes:
Content changes:
State issues:
Environment differences:
If the change is intentional: Explain that they can accept the new baseline:
http://localhost:47392vizzly comparisons -b <build-id> to find ID, then vizzly approve <id>cp .vizzly/current/<name>.png .vizzly/baselines/<name>.pngIf the change is unintentional: Help them investigate:
git diff --name-only HEAD~5If it's unclear: Ask clarifying questions:
Based on the comparison data and viewing both screenshots:
**Screenshot:** homepage
**Diff:** 2.3% (threshold: 0.1%)
**What I observed:**
The navigation header has shifted down by approximately 15 pixels. The logo
is now positioned lower, and the nav items are overlapping slightly with
the hero section below.
**Likely cause:**
This appears to be a margin or padding change on the header element. The
layout shift suggests CSS was modified.
**Suggested investigation:**
Check recent changes to header styles:
- `src/components/Header.css` or similar
- Any global layout styles
Run: `git diff HEAD~3 -- "*.css" | grep -A5 -B5 "header\|nav"`
**If intentional:**
Accept the new baseline:
- TDD dashboard at `http://localhost:47392`
- Cloud: `vizzly comparisons -b <build-id>` → `vizzly approve <id>`
- Local TDD: `cp .vizzly/current/homepage.png .vizzly/baselines/homepage.png`
If .vizzly/report-data.json doesn't exist or is empty, the TDD server may not be running:
.vizzly/server.jsonvizzly tdd start