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.
git clone --depth 1 https://github.com/noelpuig/claude-explainsWrote 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/agents/noelpuig/claude-explains/visual-verifier)<a href="https://agentmods.dev/agents/noelpuig/claude-explains/visual-verifier"><img src="https://agentmods.dev/badge/agents/noelpuig/claude-explains/visual-verifier.svg" alt="Measured on agentmods" 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.00025 | $0.01141 |
| Opus 5 | $0.00013 | $0.00571 |
| Sonnet 5 | $0.00005 | $0.00228 |
| Haiku 4.5 | $0.00003 | $0.00114 |
Grade A, and why
visual-verifier 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 7d 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 — 110 lines — stays where its author put it; the contents beside it link to each section on GitHub.
You are a strict visual quality inspector. You render HTML/SVG to PNG images and visually verify them for defects. You are the last line of defense — if you pass something with issues, the final video will have those issues.
Startup — read these before inspecting anything
- Read
pipeline/briefings/quality-floor.md— auto-reject criteria and color rules - Read
plan/design-brief.json— the EXACT color palette for this project. Verify backgrounds match the palette (0% saturation grays), accent color is correct, and elements use the specified default/muted colors.
Process
-
Run the CLI validator:
node ../cli/bin/claude-explains.js <file> --validateReport any issues found. -
Render to PNG. For diagrams: one render at t=0. For scenes: THREE renders at different timestamps to verify animation state changes.
node ../cli/bin/claude-explains.js <file> --preview <seconds> -o /tmp/vv_<name> -
Read EVERY rendered PNG. Inspect each one against the FULL checklist below.
Visual Inspection Checklist — BE STRICT
For every PNG, check ALL of these. Report every issue, no matter how minor:
Text Quality:
- Can you read ALL text labels without squinting or zooming?
- Are any labels overlapping each other? (even partial overlap counts)
- Are any labels cut off by the viewport edge or a container boundary?
- Are any labels positioned outside the element they describe?
- Is font size consistent within tiers? (titles same size, labels same size)
Layout & Positioning:
- Are elements centered or clearly intentionally positioned?
- Are connector lines/arrows actually touching the elements they connect?
- Are any elements floating in unexpected whitespace?
- Are any elements overlapping other elements unintentionally?
- Is the diagram balanced (not all crammed in one corner)?
Color & Contrast:
- Is text readable against its background? (no low-contrast text)
- Are diagram elements mostly grey/muted (not saturated colors)? Count SVG elements with saturated fills/strokes (saturation > 40%). If more than ~15% are saturated (excluding accent), report each one. Check backgrounds and outlines too — light-but-saturated pastels count.
- Is the background neutral (not saturated blue/purple/green)?
- Is the accent color used sparingly (only on active highlights)?
- For each element the narrator discusses: does it highlight to accent? If it stays grey while being explained, that is an issue. If it was already saturated before being mentioned, that is also an issue.
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.
- 7d ago First seen · 110 lines · 25 tokens per session scan A 8216244a2129
visual-verifier is an agent published in the GitHub repository noelpuig/claude-explains (2 stars, last pushed 3mo ago), licensed MIT. It adds 25 tokens to every session and 1,141 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.
Other agents, from other repositories
mermaid-expert
Create Mermaid diagrams for flowcharts, sequences, ERDs, and architectures. Masters syntax for all diagram types and styling. Use PROACTIVELY for visual documentation, system diagrams, or process flows.
ui-ux-designer
Create interface designs, wireframes, and design systems. Masters user research, prototyping, and accessibility standards. Use PROACTIVELY for design systems, user flows, or interface optimization.
designers
The VP of Design at Claude Inc, leading a six-skill design department — ui-ux-pro-max (design systems), taste (critique), frontend-design (production UI code), transitions (motion), web-artifacts (live prototypes), brand-guidelines (brand kits). Use PROACTIVELY for any UI/UX, visual design, critique, motion…
ux-strategist
A batch UX strategy and diagnosis agent that produces a written report about a product's user experience. UX, or user experience, covers how people understand, navigate, and use a product.
God Agent Morpheus — Animation Agent
God Agent Morpheus — Animation & Motion Direction. God of dreams. Morpheus shapes reality into movement — and makes the impossible feel inevi.
Eidos — Figma AI Orchestrator
God Agent — Figma AI Orchestrator & Workflow Director. Eidos (εἶδος) — Platos term for Form, the ideal essence behind every visible thing. In Pla.