What is browser-screenshot-diff?

A comparison tool for two recorded browser sessions that checks matching steps using screenshots and accessibility-tree snapshots.

It is for visual regression testing, checking browser replays, comparing form-flow variants, and locating unmatched steps or changed page elements.

It finds where a changed interface or replayed browser flow first differs from the original and reports how large the differences are.

browser-screenshot-diff — Skill for Claude Code by KunanonJ

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add KunanonJ/ai-skills-hub --skill browser-screenshot-diff

Clone the repo

git clone --depth 1 https://github.com/KunanonJ/ai-skills-hub

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/kunanonj/ai-skills-hub/browser-screenshot-diff/github.svg)](https://agentmods.dev/skills/kunanonj/ai-skills-hub/browser-screenshot-diff)

Your own site

<a href="https://agentmods.dev/skills/kunanonj/ai-skills-hub/browser-screenshot-diff"><img src="https://agentmods.dev/badge/skills/kunanonj/ai-skills-hub/browser-screenshot-diff/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/kunanonj/ai-skills-hub/browser-screenshot-diff"><img src="https://agentmods.dev/badge/skills/kunanonj/ai-skills-hub/browser-screenshot-diff.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 27 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 598 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00027	$0.00598
Opus 5	$0.00014	$0.00299
Sonnet 5	$0.00005	$0.00120
Haiku 4.5	$0.00003	$0.00060

Measured 12d ago against content hash 28cdb848c0ac, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-12, from the pricing page.

Security

Grade A, and why

browser-screenshot-diff scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 12d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.agents/skills/browser-screenshot-diff/SKILL.md · 38 lines

How it starts

The opening of the file, as written. The whole thing — 38 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Browser Screenshot Diff

Compare two recorded sessions step-by-step. Pairs each step in session A to the same step-id in session B, diffs the captured screenshot and accessibility snapshot, reports the first divergence and an aggregate similarity score.

When to use

Visual regression after a UI change (record before, record after, diff).
Verifying a browser-replay run matches the parent session within tolerance.
Comparing two A/B variants of the same form flow.

Steps

Locate both RVF containers:

npx -y [email protected] rvf status <session-id-a>.rvf
npx -y [email protected] rvf status <session-id-b>.rvf

Load both trajectories from trajectory.ndjson. Build a step-id → (screenshot_path, snapshot_path) map for each.
Pair steps by step-id. Steps that exist on only one side are flagged as unmatched and contribute to the divergence score.
Pixel diff (--mode pixel|both): compare the two PNGs at each step. Report mse, psnr, and the bounding box of the largest diff cluster. Threshold default 0.02 (2% of pixels).
DOM diff (--mode dom|both): compare the accessibility snapshots node-by-node. Report added / removed / changed nodes with their accessible names.
Aggregate similarity: weighted average across matched steps, weighted by step duration. Verdict goes into a new findings.md under a fresh RVF container so the diff itself is replayable.
Persist the diff verdict in browser-sessions under both source ids' tags so future searches surface "ran a diff against session X".

Caveats

Pixel diff is sensitive to font hinting, antialiasing, and scrollbar position. Keep viewport pinned across both sessions.
DOM diff over Playwright's accessibility tree is more stable than HTML diff. Prefer it.
This skill does not handle dynamic content (clocks, ads); add ignore regions to the field map or pre-process snapshots before diffing.
The browser_screenshot_diff MCP tool is not planned (ADR-0001 §7); the skill operates against locally-saved RVF artifacts and uses browser_eval only for live verification.

Read the full file on GitHub · 38 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

12d ago First seen · 38 lines · 27 tokens per session scan A 28cdb848c0ac

Subscribe to this mod's changes

browser-screenshot-diff is a skill published in the GitHub repository KunanonJ/ai-skills-hub (5 stars, last pushed yesterday), licensed MIT. It adds 27 tokens to every session and 598 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Claude Code E2E testing Testing ai-agents ai-coding codex cursor developer-tools

dev-testing

A testing guide that defines when to use unit, integration, API, and end-to-end tests. Unit tests check small pieces of code, while end-to-end tests check a full user flow.

devcodex-labs/devcodex · 27 tokens

dev-scenario-test

A specification for scenario testing, covering end-to-end tests, integration tests, and Artillery load tests. The input does not provide further details about its exact setup or outputs.

devcodex-labs/devcodex · 26 tokens

web-runtime-verify

Verify a built web or static frontend at runtime: serve the build on an ephemeral free port, assert page identity FIRST (automatic recovery on a collision or stale server), run the web battery (overflow 320 to 2560, keyboard and focus, console errors, Lighthouse and axe when available), and decide a PASS/FAIL/BLOCKED…

Mozurok/fhorja.dev · 229 tokens

browser-screenshot-diff