image-compare
Installation
SKILL.md
Image Compare
Overview
"Are these two images the same?" has four separate answers, and a useful comparison gives all of them: whether any pixel differs, how many differ beyond a tolerance, how alike the two are in structure (SSIM), and where the differences sit. This skill runs one script that prints those numbers with a list of changed regions and writes a diff picture, then has the agent look at the regions and say in words what changed. A percentage alone cannot tell a re-encoded copy from a missing button.
Instructions
1. Establish what is being compared
Find out, from the user or from the files:
- Which image is the reference (the design, the baseline, "before") and which is the candidate.
- Whether both came out of the same renderer. Two PNG screenshots from one browser on one machine can be compared exactly. A design export against a browser capture, captures from two operating systems, or anything saved as JPEG or WebP cannot: fonts, anti-aliasing and compression move pixel values without changing the picture.
- What is supposed to differ (the change under review) and what changes on its own: clocks, avatars, ads, carousels, a blinking caret.
- Sizes. The script prints both. Equal sizes compare directly; a longer page or a 2x export needs a choice in step 3.