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 ussumant/useful-agent-skills --skill explainer-diagramsgit clone --depth 1 https://github.com/ussumant/useful-agent-skillsWrote 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/ussumant/useful-agent-skills/explainer-diagrams)<a href="https://agentmods.dev/skills/ussumant/useful-agent-skills/explainer-diagrams"><img src="https://agentmods.dev/badge/skills/ussumant/useful-agent-skills/explainer-diagrams/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/ussumant/useful-agent-skills/explainer-diagrams"><img src="https://agentmods.dev/badge/skills/ussumant/useful-agent-skills/explainer-diagrams.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.00122 | $0.02235 |
| Opus 5.5 | $0.00049 | $0.00894 |
| Sonnet 5.5 | $0.00024 | $0.00447 |
| Haiku 4.5 | $0.00012 | $0.00224 |
Grade A, and why
explainer-diagrams 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 1mo 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 — 140 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Explainer diagrams
A diagram in this grammar is a scene: shapes, positions, and arrows that
carry the meaning, with few words. The first attempt at this usually comes
out as a table in nice colors. The verdict that produced this skill was
"they're not visual, they look boring." Read examples/severance-week/
before your first diagram: index.html is the source of seven diagrams and
out/ holds the PNGs they produced. That is the reference implementation.
The grammar
| token | value | used for |
|---|---|---|
blue #1a52e0 |
flow, structure, the real thing | card strokes, solid arrows, solid nodes, stat numbers, index badge |
orange #d66b2f |
intervention, return path, the outside hand | dashed arrows, seed cards (#fff3ea tint), rewind |
panel #f5f7ff |
containers, callouts | dashed container fill, callout background |
gray #aaa / #f2f2f2 |
invalid, scripted, never happened | hollow nodes, struck-through lines, "never entered" boxes |
text #666, muted #767676, ink #000 |
Type: Pixelify Sans (Google Fonts) for the title and the callout heading
only; system mono for everything else; system sans bold only for card labels
and node names. Cards are white, 1px stroke, border-radius: 3px. Arrows use
a 6×6 triangle <marker>, one per diagram with a unique id.
Components (all in template.html): .shot (1100px white sheet, 40px
padding; the PNG is this element) → .shot-head (blue mono index 01,
Pixelify <h2>, one-line mono <p>) → .scene (1020px, #fbfbfb, 1px
border; the picture) → optional .stat-row of .stat-tile (big blue mono
number over a gray label) → optional .callout (blue left border, Pixelify
one-liner + one mono sentence) → optional .footnote (11px mono caveat).
Card variants: .tint-orange, .tint-blue, .solid, .dashed, .gray;
inside a card: .tag (mono caps), .label (sans bold), .sub (mono body).
components.md has copy-paste snippets for every piece.
Scene, not table
- One idea per diagram. The title says it, the scene shows it, the callout says what it means in one line. If it needs a paragraph, it is two diagrams.
- Shapes carry the meaning: a line that thickens day by day, a path that
stops short of a box with an
×, a hollow node beside solid ones, a strike-through on the canned line, a bar split into scored segments. The reader should get it before reading a word. - Words are receipts, not prose: quotes ≤ 14 words with an ellipsis, never reworded; ids and times in mono beside them; ≤ ~10 text objects per scene.
- Nothing smaller than 13px at the 1020px scene. Most newsletter and forum layouts show the PNG at ~700px wide. Stat numbers 24px, titles 27px.
- Every number and quote comes from a source file, verbatim. A caption or a callout is a factual claim; check it against the source before shooting.
- Footnotes carry method caveats. Never reference an unpublished URL or "see 01–06 above" inside a PNG that will travel on its own.
What ships with it
20 files 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.
- components.md 7.7 KB
- examples/after.png 91 KB
- examples/before.png 85 KB
- examples/general/after.html 8.9 KB
- examples/general/before.html 1.1 KB
- examples/general/plan.after.json 560 B
- examples/general/plan.before.json 365 B
- examples/severance-week/index.html 42 KB
- examples/severance-week/out/03-before-after-architecture.png 106 KB
- examples/severance-week/out/13-one-paragraph-five-days.png 160 KB
- examples/severance-week/out/19-same-whisper-two-minds.png 160 KB
- examples/severance-week/out/20-how-one-line-got-made.png 217 KB
- examples/severance-week/out/22-two-fridays.png 118 KB
- examples/severance-week/out/24-by-the-numbers.png 88 KB
- examples/severance-week/out/25-what-didnt-work.png 185 KB
- examples/severance-week/plan.json 3.6 KB
- plan.example.json 1.1 KB
- README.md 4.5 KB
- shoot.mjs 10.0 KB runs code
- template.html 10 KB
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.
- 1mo ago First seen · 140 lines · 122 tokens per session scan A 326b9224645b
explainer-diagrams is a skill published in the GitHub repository ussumant/useful-agent-skills (4 stars, last pushed 17d ago), licensed MIT. It adds 122 tokens to every session and 2,235 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-14.
explainer-diagrams compared with skills from other repositories
| Mod | Type | Stars | Last push | Licence | Scan | Tokens | Works with |
|---|---|---|---|---|---|---|---|
| explainer-diagramsussumant/useful-agent-skills | Skill | 4 | 17d ago | MIT | A | 122 | Claude Code, Codex |
| customer-journey-mapmohitagw15856/pm-claude-skills | Skill | 1.5k | today | MIT | A | 86 | Claude Code, Codex |
| user-research-synthesismohitagw15856/pm-claude-skills | Skill | 1.5k | today | MIT | A | 114 | Claude Code, Codex |
| explorer-interface-briefmohitagw15856/pm-claude-skills | Skill | 1.5k | today | MIT | A | 97 | Claude Code |
| design-handoff-briefmohitagw15856/pm-claude-skills | Skill | 1.5k | today | MIT | A | 83 | Claude Code |
| architectural-programme-briefmohitagw15856/pm-claude-skills | Skill | 1.5k | today | MIT | A | 109 | Claude Code |
| architecture-client-presentationmohitagw15856/pm-claude-skills | Skill | 1.5k | today | MIT | A | 117 | Claude Code |