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.
git clone --depth 1 https://github.com/noelpuig/claude-explainsnpx agentmods add skills/noelpuig/claude-explains/verify-diagramWrote 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/noelpuig/claude-explains/verify-diagram)<a href="https://agentmods.dev/skills/noelpuig/claude-explains/verify-diagram"><img src="https://agentmods.dev/badge/skills/noelpuig/claude-explains/verify-diagram/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/noelpuig/claude-explains/verify-diagram"><img src="https://agentmods.dev/badge/skills/noelpuig/claude-explains/verify-diagram.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.00026 | $0.00238 |
| Opus 5 | $0.00013 | $0.00119 |
| Sonnet 5 | $0.00005 | $0.00048 |
| Haiku 4.5 | $0.00003 | $0.00024 |
Grade A, and why
verify-diagram 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 10d 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.
What it actually says
Visual Verification
Verify the visual quality of: $file
Step 1: CLI Validation
node ../cli/bin/claude-explains.js $file --validate
Parse the JSON output. Report all issues.
Step 2: Render Preview
node ../cli/bin/claude-explains.js $file --preview 0 -o /tmp/verify_preview
Read the rendered PNG.
Step 3: Visual Inspection
- All labels readable (not overlapping, not clipped)
- Content fills 80%+ of viewport
- Clear visual hierarchy (3 size tiers)
- Connector lines properly attached
- Content centered or intentionally positioned
- Colors match theme (60-30-10 rule)
Step 4: Report
{"file": "$file", "pass": true, "issues": []}
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.
- 10d ago First seen · 35 lines · 26 tokens per session scan A be883d5ff08f
verify-diagram is a skill published in the GitHub repository noelpuig/claude-explains (2 stars, last pushed 3mo ago), licensed MIT. It adds 26 tokens to every session and 238 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 skills, from other repositories
theme-builder
Create or customize a site theme interactively. Walks through site purpose, audience, visual direction, and design specifics before generating a complete base.html template with all SEO, accessibility, search, pagination, and i18n requirements.
brand-identity
Create a logo (SVG) and brand color palette for a project. Walks through brand personality, audience, and visual preferences before generating an SVG logo, color system, and favicon — then optionally applies colors to the site theme.
landing-page
Create or redesign a landing page — the site homepage, a product page, a launch page, or any standalone marketing page. Guides you through messaging, structure, and design iteratively.
taste
Delivers a ruthless, structured critique of any screen, mockup or site — scores hierarchy, spacing rhythm, contrast, typography pairing and color discipline /10 with evidence, detects clichés (purple gradients, glassmorphism-by-default, emoji soup, cookie-cutter heroes), and ranks the top 5 highest-leverage fixes with…
ui-ux-pro-max
Builds an end-to-end UI system for a product — design tokens (color scale, type scale, spacing, radii, shadows), a component inventory covering every interaction state, a layout grid, and WCAG contrast checks — emitted as CSS variables plus a component spec doc. Use when the user says "set up a design system", "create…
web-artifacts
Turns any idea into a live single-file HTML prototype in minutes — inline CSS/JS, CDN-only dependencies (cdnjs), mobile-first, seeded with believable fake data, interactive states wired — ready to open in a browser or paste as a Claude artifact. Use when the user says "prototype this", "show me a working demo", "make…