All skills
Skillintermediate
/compare - Compare Visual Screenshots
Compare current screenshots against baselines to detect visual regressions.
Claude Code Knowledge Pack7/10/2026
Overview
/compare - Compare Visual Screenshots
Compare current screenshots against baselines to detect visual regressions.
Steps
- Verify that baseline screenshots exist in the baselines directory
- Capture current screenshots using the same configuration as baselines
- Match current screenshots to their corresponding baselines by name
- Perform pixel-by-pixel comparison using a diff threshold (default 0.1%)
- Generate diff images highlighting changed regions in red
- Calculate the percentage of pixels that differ for each comparison
- Classify results: pass (below threshold), warn (near threshold), fail (above threshold)
- Present a summary table: page, viewport, diff percentage, status
- For failures, display the baseline, current, and diff images side by side
- Ask the user whether to update baselines for intentional changes
- Save comparison report with all results and diff images
Rules
- Use an anti-aliasing tolerance to avoid false positives from font rendering
- Default diff threshold is 0.1%; allow user to configure per-component
- Always generate diff images for failed comparisons
- Do not auto-update baselines without user confirmation
- Exclude known dynamic areas from comparison using ignore regions
- Report the total number of new pages without baselines
- Clean up temporary screenshot files after comparison