skills.rest
Arete-Consortium
Arete-ConsortiumOFFICIAL
Explore all skills by this author →
GitHub

compare

Compares two images side-by-side and highlights pixel differences with a diff overlay.

4|2|Updated Jan 27, 2026
Search Tags:#diff#ui testing#visual regression#pillow#screenshot testing#image comparison#pixel difference
One-click install
npx skills add https://github.com/Arete-Consortium/ai-skills --skill compare-arete-consortium
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: compare
Source: https://github.com/Arete-Consortium/ai-skills/tree/main/personas/web/compare
Command: npx skills add https://github.com/Arete-Consortium/ai-skills --skill compare-arete-consortium

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires Pillow.

What problem does it solve? Manually spotting visual differences between two versions of a UI screenshot or image is slow and error-prone. This Skill automates pixel-level comparison so you can instantly see what changed between a before and after image. ## Core Features & Use Cases - Side-by-Side Comparison: Generates a three-panel output image showing BEFORE, AFTER, and an enhanced DIFF view. - Difference Highlighting: Amplifies pixel differences so subtle UI changes become clearly visible. - Change Statistics: Reports the count and percentage of changed pixels for quantitative regression checks. - Use Case: During visual regression testing of a web page, compare a baseline screenshot against a new build to detect unintended layout or styling changes. ## Quick Start Ask the AI to compare two images, for example: run /compare before.png after.png to generate a side-by-side diff image with changed-pixel statistics.

Frequently Asked Questions about compare

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I compare two images and highlight differences in Python?▼

Use Pillow's ImageChops.difference to compute per-pixel differences between two RGB images, then amplify the result with point() to make changes visible. Paste the original images and the enhanced diff into a single side-by-side output image.

How to do visual regression testing for UI changes?▼

Capture a baseline screenshot and a new screenshot, then run a pixel comparison to detect changed regions. This Skill produces a BEFORE, AFTER, and DIFF panel plus the percentage of changed pixels to quantify the visual difference.

What happens when comparing images of different sizes?▼

The comparison script resizes the second image to match the first image's dimensions using Pillow's resize method before computing the difference. This prevents errors but may distort results if aspect ratios differ significantly.

What are the limitations of pixel-based image comparison?▼

Pixel-based comparison flags any rendering difference, including anti-aliasing noise, font rendering shifts, and minor compression artifacts. It cannot distinguish intentional changes from noise, so thresholds on changed-pixel counts are often needed.

Related Skills

Explore More Software Engineering Skills→
is-ivanovis-ivanov
2

screenshot

Capture PNG screenshots from HTML mockups using Puppeteer.

Community
Intermediate
EvolutionAPIEvolutionAPI
520

dev-visual-verdict

Compare before and after screenshots to detect visual regressions in UI components.

Official
Intermediate
robit-manrobit-man

regression-visual

Compare screenshots and analyze pixel differences across browsers and viewports.

Community
Advanced
curiositechcuriositech
181

pixel-art-infographic-creator

Generate pixel art diagrams and infographics in a 16-bit SNES aesthetic.

Official
Intermediate