debug-visual-regression

Solid

Analyze visual regression test failures in Vizzly. Use when the user mentions failing visual tests, screenshot differences, visual bugs, diffs, or asks to debug/investigate/analyze visual changes. Works with both local TDD and cloud modes.

Code & Development 359 stars 65 forks Updated today MIT

Install

View on GitHub

Quality Score: 93/100

Stars 20%
85
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# Debug Visual Regression Automatically analyze visual regression failures when the user mentions them. This Skill helps identify the root cause of visual differences and suggests whether to accept or fix changes. ## When to Use This Skill Activate this Skill when the user: - Mentions "failing visual test" or "screenshot failure" - Asks "what's wrong with my visual tests?" - Says "the homepage screenshot is different" or similar - Wants to understand why a visual comparison failed - Asks to "debug", "analyze", or "investigate" visual changes - Mentions specific screenshot names that are failing ## How This Skill Works 1. **Automatically detect the mode** (local TDD or cloud) 2. **Fetch comparison details** using the screenshot name or comparison ID 3. **View the actual images** to perform visual analysis 4. **Provide detailed insights** on what changed and why 5. **Suggest next steps** (accept, reject, or fix) ## Instructions ### Step 1: Call the Unified MCP Tool Use `read_comparison_details` with the identifier: - Pass screenshot name (e.g., "homepage_desktop") for local mode - Pass comparison ID (e.g., "cmp_abc123") for cloud mode - The tool automatically detects which mode to use - Returns a response with `mode` field indicating local or cloud ### Step 2: Check the Mode in Response The response will contain a `mode` field: - **Local mode** (`mode: "local"`): Returns filesystem paths (`baselinePath`, `currentPath`, `diffPath`) - **Cloud mode** (`mode: "cloud"`): R...

Details

Author
majiayu000
Repository
majiayu000/claude-skill-registry
Created
5 months ago
Last Updated
today
Language
HTML
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Solid

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".

2,266 Updated today
jeremylongshore
Code & Development Listed

debug

This skill should be used when the user asks to "debug this", "find the bug", "fix this error", "why isn't this working", "troubleshoot", or when code changes need verification through browser testing.

42 Updated 2 months ago
diegosouzapw
AI & Automation Solid

visual-verdict

Screenshot comparison QA for frontend development. Takes a screenshot of the current implementation, scores it across multiple visual dimensions, and returns a structured PASS/REVISE/FAIL verdict with concrete fixes. Use when implementing UI from a design reference or verifying visual correctness.

495 Updated 1 months ago
vibeeval
Testing & QA Solid

backstopjs-visual-testing

BackstopJS visual regression testing for self-hosted visual comparison

1,034 Updated today
a5c-ai
AI & Automation Listed

visual-regression

Transitional standalone visual regression guard using before/after screenshot comparison. Two modes: SIT (compare staging vs local dev) or Local (compare git-stashed base vs current changes). No long-lived baselines — captures fresh screenshots each run and deletes after comparison. Config-driven from workspace-config.yaml. Use when: "跑 visual regression", "檢查畫面", "頁面有沒有壞", "visual test", "screenshot test", "畫面測試", "截圖比對", "有沒有跑版", "畫面壞了嗎", "UI 有沒有問題", "check if pages look right", for standalone manual investigation. Engineering / verify-AC Layer C uses scripts/run-visual-snapshot.sh instead.

4 Updated yesterday
HsuanYuLee