// Compare two images pixel-by-pixel and get a visual diff. Use when the user wants to compare their implementation against a design, spot differences between two screenshots, or verify visual regression.
Multi-model agent orchestration using specialized agents for planning, coding, research, math/science, visual analysis, and adversarial review. Use when tasks are complex enough to benefit from different models' strengths, when you want adversarial review to catch blind spots, or when coordinating multi-step workflows across agent roles. Triggers on complex projects, multi-step tasks, architecture decisions, or when explicitly requested.
Web design reference for building production-grade interfaces. Covers layout, typography, color, spacing, shadows, animation, accessibility, responsive design, components, performance, and UX psychology. Use when building UI, reviewing design quality, choosing design tokens, or making any visual design decision.
Check color contrast ratios against WCAG AA and AAA accessibility standards. Use when the user wants to verify if their color combinations are accessible, check contrast between text and background colors, or audit a palette for accessibility.
Extract text from images using OCR. Use when the user shares a screenshot and you need to read the text content, copy UI labels, or extract copy from a design mockup.
Extract color palettes from images (screenshots, Figma exports, design mockups) to help implement matching UI. Use when the user shares a screenshot, design image, or asks to "match these colors", "extract colors from this image", "implement this design", or "get the color palette".
| name | image-compare |
| description | Compare two images pixel-by-pixel and get a visual diff. Use when the user wants to compare their implementation against a design, spot differences between two screenshots, or verify visual regression. |
| metadata | {"author":"pascalorg","version":"1.0.0"} |
Compare two images pixel-by-pixel. Returns a diff count, mismatch percentage, and generates a diff image highlighting the differences in red.
pixelmatch compares every pixel and flags differences above a configurable thresholdbash <skill-path>/scripts/image-compare.sh <image1> <image2> [diff-output.png] [threshold]
Arguments:
image1 — First image path (required)image2 — Second image path (required)diff-output.png — Path to write the diff image (optional, defaults to ./diff.png)threshold — Pixel matching threshold 0-1, lower is stricter (optional, defaults to 0.1)Examples:
# Compare a design against implementation
bash <skill-path>/scripts/image-compare.sh design.png screenshot.png
# Compare with custom threshold and output path
bash <skill-path>/scripts/image-compare.sh before.png after.png ./changes.png 0.05
{
"totalPixels": 921600,
"differentPixels": 4523,
"mismatchPercentage": 0.49,
"dimensions": { "width": 1280, "height": 720 },
"diffImage": "./diff.png",
"threshold": 0.1
}
| Field | Type | Description |
|---|---|---|
| totalPixels | Number | Total pixels compared |
| differentPixels | Number | Number of pixels that differ |
| mismatchPercentage | Number | Percentage of pixels that differ |
| dimensions | Object | Width and height used for comparison |
| diffImage | String | Path to the generated diff image |
| threshold | Number | Sensitivity threshold used |
After comparing, present a summary:
Comparison: design.png vs screenshot.png
Mismatch: 0.49% (4,523 pixels out of 921,600)
Diff image saved to: ./diff.png
The images are nearly identical. Differences are highlighted in red in the diff image.
Interpret the percentage:
Different sized images — The script automatically resizes both images to the smaller dimensions. For best results, use images of the same size.
Too many false positives — Increase the threshold (e.g., 0.2). Anti-aliasing differences are common between browsers.