visual-explainer

A tool that creates one self-contained HTML page to explain a system, plan, comparison, timeline, architecture, or data set visually.

In plain words
What is it for?
Making standalone HTML explainers with inline styling, such as architecture overviews, before-and-after comparisons, timelines, and metric dashboards.
Why use it?
It turns complex relationships into an offline page with diagrams, tables, or other clear layouts instead of relying on a large block of text.

Skill for Claude CodeCodex

Install

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.

agentmods
npx agentmods add skills/chacosoldier/compabob/visual-explainer
Any agent
npx skills add chacosoldier/compabob --skill visual-explainer
Clone the repo
git clone --depth 1 https://github.com/chacosoldier/compabob

Made for: Claude Code, Codex.

Per session 64 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 338 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
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 $0.00064 $0.00338
Opus 5 $0.00032 $0.00169
Sonnet 5 $0.00013 $0.00068
Haiku 4.5 $0.00006 $0.00034

Measured 2d ago against content hash 8d4b2eb864c0, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

visual-explainer 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 2d 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.

.claude/skills/visual-explainer/SKILL.md · 26 lines

What it actually says

Visual Explainer

Produce one standalone HTML file that explains something clearly. Good for architecture overviews, plan reviews, before/after comparisons, timelines, and dashboards.

Steps

  1. Clarify the subject and the audience. What is being explained, and who reads it? That sets the depth.
  2. Choose the form: a flow diagram, a comparison table, a timeline, a layered architecture, a metric dashboard.
  3. Build one self-contained .html file:
    • All CSS inline in a <style> block. No external stylesheets, no CDN links, no network dependencies. The file must open correctly offline by double-clicking it.
    • Readable typography, generous spacing, a restrained palette.
    • Content-first: the explanation carries the page, decoration supports it.
  4. Save to reports/ (create the directory if needed) as YYYY-MM-DD-<slug>.html.
  5. Tell the user the path so they can open it.

Principles

  • Self-contained or it does not count. One file, opens offline.
  • The page answers a question. Lead with that answer, same as any other output.
  • Prefer this over a large ASCII table (four or more rows, or three or more columns).
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. 2d ago First seen · 26 lines · 64 tokens per session scan A 8d4b2eb864c0

Subscribe to this mod's changes

visual-explainer is a skill published in the GitHub repository chacosoldier/compabob (32 stars, last pushed 2mo ago), licensed MIT. It adds 64 tokens to every session and 338 once invoked, about $0.0003 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-30.