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.
npx skills add frankxai/claude-skills-library --skill visual-proofgit clone --depth 1 https://github.com/frankxai/claude-skills-libraryWrote 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.
[](https://agentmods.dev/skills/frankxai/claude-skills-library/visual-proof)<a href="https://agentmods.dev/skills/frankxai/claude-skills-library/visual-proof"><img src="https://agentmods.dev/badge/skills/frankxai/claude-skills-library/visual-proof/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.
<a href="https://agentmods.dev/skills/frankxai/claude-skills-library/visual-proof"><img src="https://agentmods.dev/badge/skills/frankxai/claude-skills-library/visual-proof.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.00116 | $0.00997 |
| Opus 5.5 | $0.00046 | $0.00399 |
| Sonnet 5.5 | $0.00023 | $0.00199 |
| Haiku 4.5 | $0.00012 | $0.00100 |
Grade A, and why
visual-proof 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 11d 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.
How it starts
The opening of the file, as written. The whole thing — 87 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Visual Proof
Screenshots are the only claim about a page's appearance that cannot be hallucinated. Capture before you change anything, and after.
If you cannot capture — no server, no Chromium, no network to the deployed URL — say so and stop making visual claims. Describing a page you never rendered is the single most common way UI work goes wrong undetected.
The matrix
Six shots per state. Not one, not a single desktop hero crop.
| Width | Stands for |
|---|---|
| 375 | phone — where layouts actually break |
| 768 | tablet / the awkward middle breakpoint |
| 1440 | desktop |
× light and dark, if the site ships both themes.
Run it
The pack ships a runner. From the repo root:
# against a local dev server
node .claude/skills/visual-proof/capture.mjs --url http://localhost:3000/ --label before
# ...make the change...
node .claude/skills/visual-proof/capture.mjs --url http://localhost:3000/ --label after
# or against a deployed preview
node .claude/skills/visual-proof/capture.mjs --url https://<preview>.vercel.app/pricing --label after
Output lands in .visual-proof/<label>/<width>-<theme>.png and the script prints
each path. .visual-proof/ belongs in .gitignore — these are evidence for the
turn, not repo artifacts.
Flags: --widths 375,768,1440 · --themes light,dark · --full (full-page
instead of viewport) · --out <dir>.
Exit 0 means every width × theme was captured. Exit 6 means some were not: the
paths it printed are real, the rest are not captured, and the report says which.
The Stop gate does not accept a partial run as proof; capture the missing states
or say why they cannot be captured. Nor does it accept a before run on its own:
that records the starting point, and only the after run shows the change.
The after run must cover all six shots (narrow --widths or --themes for a
quick look, not for the receipt) and start after your last UI edit: change
anything after capturing, and capture again.
Environment notes
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 11d ago Changed · +9 lines beb54667a743
- 1mo ago First seen · 78 lines · 116 tokens per session scan A 7d5b0cdb0824
visual-proof is a skill published in the GitHub repository frankxai/claude-skills-library (47 stars, last pushed today), licensed MIT. It adds 116 tokens to every session and 997 once invoked, about $0.0005 per session on Opus 5.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.
Other skills, from other repositories
visual-regression-testing
A guide for planning visual regression tests, which compare a current interface with an earlier approved image to find unintended visual changes.
qa
QA Specialist Agent for smoke testing production deployments. Runs Playwright-based smoke tests against live URLs to verify health, auth flows, protected routes, and core UI. Use when validating a deploy, checking if a production app is working, or when asked to run QA on a project.
webapp-testing
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
migrate-to-shoehorn
A testing guide for Shoehorn, a TypeScript library that lets tests provide only the fields they need from a larger data type.
tdd
A reference for Test-Driven Development (TDD), a method where you write a failing test, make it pass, and then improve the code. It covers how to write durable tests, where to place them, and which patterns to avoid.
accessibility-testing-expert
Expert guide for automated and manual Web Accessibility (a11y) testing — axe-core, Pa11y, Playwright a11y, screen reader testing, and WCAG 2.2 Level AA/AAA compliance / Panduan ahli pengujian aksesibilitas web.