How do I install the Visual Diff skill?

Run npx skillmds@latest add mohamed-amine-ben-mallessa/visual-diff in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Visual Diff safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: executes scripts. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Visual Diff?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Visual Diff free to use?

Yes. Installing skills from SkillMD is free. This skill is licensed under MIT.

Who published Visual Diff?

mohamed-amine-ben-mallessa (@mohamed-amine-ben-mallessa) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Visual Diff by mohamed-amine-ben-mallessa

Name: Visual Diff
Rating: 4.666666666666667 (3 reviews)
Author: mohamed-amine-ben-mallessa

Visual Diff

Visually compare two states of a web page with iris — before/after a change on the same URL, or two different URLs (A/B, staging vs production) — by capturing both and producing a structured report of what added, removed, moved or restyled. Use when the user asks to compare two pages, check what changed visually, review a before/after diff, or verify a redesign matches a reference.

File contents

Visual diff — two captures, one honest report

Capture both states with the SAME settings, inspect them side by side, and report the differences. iris has no pixel-diff engine: you are the diff engine. Consistency of capture settings is what makes the comparison valid.

Preflight (once per session)

Paths like scripts/ and references/ below are relative to THIS skill's directory — run them from there, or prefix them with the skill's absolute path.

bash scripts/doctor.sh

If it fails, run bash scripts/install.sh and re-run. If $CHROME is not set, add --chrome <path printed by doctor> to every iris call (or export CHROME). If iris is not on PATH, use the absolute path doctor printed.

Capture (identical settings, always)

Pick ONE mode and apply it to both sides:

A/B — two URLs

iris --full -s desktop <url-a> -o shots/diff/a.png --json
iris --full -s desktop <url-b> -o shots/diff/b.png --json

Before/after — same URL, two moments (e.g. across a deploy or a local change): capture the first state, make/apply the change, capture again with the exact same flags.

Useful variants: --selector '#component' --padding 16 to focus the diff on one region; -s iphone for mobile; --dark on both sides.

Cheap pre-check (before looking)

Compare the --json lines first:

identical bytes + css_width/css_height + scale → almost certainly no visual change; say so and stop (unless the user insists).
large bytes delta or different dimensions → real change; continue.

Visual comparison (you are the diff engine)

Open both PNGs (Read tool) and scan region by region, top to bottom:

Added — elements, sections, copy present in one and not the other.
Removed — the inverse.
Moved — same content, different position/size/order.
Restyled — same content, different colors, fonts, spacing, imagery.
Reflow consequences — cascading shifts, misalignments, overflow introduced by the change (even if unintended).

Long pages: if the full captures are too tall to compare reliably, re-capture both sides scoped with --selector on the changed region.

Report format

VISUAL DIFF — <a> vs <b>   (mode: A/B | before/after, viewport, scale)
Δ metadata: bytes a→b, css size a→b, scale

Added     : - …
Removed   : - …
Moved     : - …
Restyled  : - …
Reflow    : - unintended layout fallout, if any

Verdict: no visible change | expected change (matches intent: …)
         | unexpected change — highlight the riskiest item

State the verdict explicitly. When the user gave an intent (“I changed the pricing card”), check it first and say whether the change landed as intended; then list anything the intent did not mention.

---name: visual-diffdescription: Visually compare two states of a web page with iris — before/after a change on the same URL, or two different URLs (A/B, staging vs production) — by capturing both and producing a structured report of what added, removed, moved or restyled. Use when the user asks to compare two pages, check what changed visually, review a before/after diff, or verify a redesign matches a reference.license: MIT---# Visual diff — two captures, one honest reportCapture both states with the SAME settings, inspect them side by side, andreport the differences. iris has no pixel-diff engine: you are the diffengine. Consistency of capture settings is what makes the comparison valid.## Preflight (once per session)Paths like `scripts/` and `references/` below are relative to THIS skill'sdirectory — run them from there, or prefix them with the skill's absolute path.```bashbash scripts/doctor.sh```If it fails, run `bash scripts/install.sh` and re-run.If `$CHROME` is not set, add `--chrome <path printed by doctor>` to every iriscall (or export CHROME). If `iris` is not on PATH, use the absolute pathdoctor printed.## Capture (identical settings, always)Pick ONE mode and apply it to both sides:**A/B — two URLs**```bashiris --full -s desktop <url-a> -o shots/diff/a.png --jsoniris --full -s desktop <url-b> -o shots/diff/b.png --json```**Before/after — same URL, two moments** (e.g. across a deploy or a localchange): capture the first state, make/apply the change, capture again withthe exact same flags.Useful variants: `--selector '#component' --padding 16` to focus the diff onone region; `-s iphone` for mobile; `--dark` on both sides.## Cheap pre-check (before looking)Compare the `--json` lines first:- identical `bytes` + `css_width`/`css_height` + `scale` → almost certainly no visual change; say so and stop (unless the user insists).- large `bytes` delta or different dimensions → real change; continue.## Visual comparison (you are the diff engine)Open both PNGs (Read tool) and scan region by region, top to bottom:1. **Added** — elements, sections, copy present in one and not the other.2. **Removed** — the inverse.3. **Moved** — same content, different position/size/order.4. **Restyled** — same content, different colors, fonts, spacing, imagery.5. **Reflow consequences** — cascading shifts, misalignments, overflow introduced by the change (even if unintended).Long pages: if the full captures are too tall to compare reliably, re-captureboth sides scoped with `--selector` on the changed region.## Report format```VISUAL DIFF — <a> vs <b> (mode: A/B | before/after, viewport, scale)Δ metadata: bytes a→b, css size a→b, scaleAdded : - …Removed : - …Moved : - …Restyled : - …Reflow : - unintended layout fallout, if anyVerdict: no visible change | expected change (matches intent: …) | unexpected change — highlight the riskiest item```State the verdict explicitly. When the user gave an intent (“I changed thepricing card”), check it first and say whether the change landed as intended;then list anything the intent did not mention.

Frequently asked questions