ab-visual-compare

Community

Spot visual and accessibility diffs quickly.

Authoranouar1991
Version1.0.0
Installs0

System Documentation

What problem does it solve?

The tool helps teams quickly detect visual regressions and accessibility differences between web pages by generating pixel diffs, side-by-side comparisons, and DOM-tree diff reports.

Core Features & Use Cases

  • Visual regression detection using ImageMagick pixel differences
  • Accessibility snapshot comparison to catch ARIA/structure changes
  • Side-by-side and overlay diffs for QA and design reviews
  • Use Case: compare staging vs production, verify responsive layouts, and review design changes

Quick Start

Run the ab-visual-compare script with two URLs and an output directory to generate visual and accessibility diffs.

Dependency Matrix

Required Modules

imagemagick

Components

scripts

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: ab-visual-compare
Download link: https://github.com/anouar1991/binaryPetsClaude/archive/main.zip#ab-visual-compare

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.