visual-review

visual-review is a skill for Claude Code, Codex from JansenAnalytics/claudex. It costs 24 tokens per session (750 once invoked), scanned A, original, MIT.

A screenshot comparison tool that checks two images of a webpage and highlights changed pixels. It can measure whether the difference stays below a chosen limit.

In plain words
What is it for?
Use it to compare before-and-after screenshots, check visual changes in automated checks, and create diff images or reports for several pages.
Why use it?
It helps catch accidental changes to layout, styling, or other visible parts of a website. The result shows exactly where the new version differs from the baseline.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

Needs its repository: it runs a file that does not travel with it, so clone the repository first. The line is python3 scripts/screenshot-diff.py \.

Good fit Use it to compare before-and-after screenshots, check visual changes in automated checks, and create diff images or reports for several pages.

Compare 6 skills from other repositories ↓
Install

Getting it into your agent

It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.

Clone the repo
git clone --depth 1 https://github.com/JansenAnalytics/claudex
agentmods
npx agentmods add skills/jansenanalytics/claudex/visual-review

Made for: Claude Code, Codex.

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.

agentmods badge for visual-review

README.md
[![agentmods](https://agentmods.dev/badge/skills/jansenanalytics/claudex/visual-review.svg)](https://agentmods.dev/skills/jansenanalytics/claudex/visual-review)
Your own site
<a href="https://agentmods.dev/skills/jansenanalytics/claudex/visual-review"><img src="https://agentmods.dev/badge/skills/jansenanalytics/claudex/visual-review.svg" alt="Measured on agentmods" height="20"></a>
Per session 24 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 750 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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00024 $0.00750
Opus 5 $0.00012 $0.00375
Sonnet 5 $0.00005 $0.00150
Haiku 4.5 $0.00002 $0.00075

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

Security

Grade A, and why

visual-review 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 4d 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.

skills/visual-review/SKILL.md · 110 lines

How it starts

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

visual-review

Screenshot comparison and visual regression detection: pixel diffing, before/after overlays, threshold-based change detection.

When to Use

  • Comparing UI states before and after changes
  • Detecting visual regressions in CI or manual review
  • Creating before/after diff images for stakeholder review
  • Validating that CSS/layout changes didn't break other components
  • Generating visual regression reports across multiple pages

Scripts

screenshot-diff.py

Compares two PNG screenshots pixel-by-pixel and generates a diff image.

python3 scripts/screenshot-diff.py \
  --before before.png \
  --after after.png \
  --output diff.png \
  --threshold 0.5

Arguments:

  • --before — Path to the baseline screenshot (required)
  • --after — Path to the new screenshot (required)
  • --output — Path for the diff image output (default: diff.png)
  • --threshold — Maximum allowed change percentage, 0-100 (default: 0.5)

Output:

  • Diff image with changed pixels highlighted in red on a dimmed background
  • Prints change percentage to stdout
  • Exit code 0 if change% ≤ threshold, exit code 1 if above

Notes:

  • Images must be the same dimensions (script will error if not)
  • Uses per-pixel RGB distance comparison (threshold per-pixel: 30/255)

visual-report.py

Generates a Markdown report from a directory of before/after screenshot pairs.

python3 scripts/visual-report.py \
  --dir ./screenshots \
  --output report.md \
  --threshold 0.5

Arguments:

  • --dir — Directory containing before/after pairs (required)
  • --output — Output report path (default: stdout)
  • --threshold — Pass/fail threshold percentage (default: 0.5)

Naming convention: Files must be named <name>-before.png and <name>-after.png.

Report includes:

  • Each pair with change percentage and pass/fail status
  • Sorted by most changed first
  • Summary: total pairs, pass count, fail count

overlay-gen.py

Creates visual comparison images in different modes.

Read the full file on GitHub · 110 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.

  1. 4d ago First seen · 110 lines · 24 tokens per session scan A a6699613743f

Subscribe to this mod's changes

visual-review is a skill published in the GitHub repository JansenAnalytics/claudex (5 stars, last pushed 2mo ago), licensed MIT. It adds 24 tokens to every session and 750 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-09-03.

Related

Other skills, from other repositories

solopi-ai

A command-line framework for testing Android apps and devices with SoloPi, including on-device or cloud AI decision models. It manages devices, test cases, recorded interactions, replays, performance history, and evidence.

alipay/SoloPi · 127 tokens

testing-e2e

End-to-end testing patterns with Playwright — page objects, AI agent testing, visual regression, accessibility testing with axe-core, and CI integration. Use when writing E2E tests, setting up Playwright, implementing visual regression, or testing accessibility.

yonatangross/orchestkit · 55 tokens

storybook-testing

Storybook 10 testing patterns with Vitest integration, ESM-only distribution, CSF3 typesafe factories, play() interaction tests, Chromatic TurboSnap visual regression, module automocking, accessibility addon testing, and autodocs generation. Use when writing component stories, setting up visual regression testing…

yonatangross/orchestkit · 77 tokens

Espresso Android Testing

Android UI testing with Espresso framework including view matchers, actions, assertions, idling resources, and RecyclerView testing patterns.

PramodDutta/qaskills · 30 tokens

hatch3r-browser-verify

Opt-in browser verification skill — spec-run-first Playwright verification (assertions execute in the runner, agent reads only failures), axe-core a11y audits, toHaveScreenshot() regression diffs, E2E test scaffolds, and snapshot-mode exploratory driving. Default ON for UI-affecting agent invocations; disable globally…

hatch3r/hatch3r · 83 tokens

playwright-e2e-testing

Production-grade Playwright end-to-end testing skill for AI coding agents. Provides specialized guidance for writing, debugging, and maintaining Playwright tests in TypeScript, JavaScript, and Python. Covers the full testing lifecycle: test structure and architecture (Page Object Model, fixtures, custom matchers)…

JPeetz/agent-skills · 316 tokens