Explainer Pack

A Claude Code skill for generating dense, visual-first HTML explainers — dark-themed, diagram-driven reference documents where every section is a custom inline-SVG visualization and prose is captions only.

Drop it in, ask Claude to "make an explainer for X," get back a self-contained HTML file that opens in any browser, forever, with no dependencies.

What you get

• Explainer skill — fully canonical Claude Code skill with two workflows (Generate, Revise) and four reference files
• 15 reusable diagram patterns — pipeline DAGs, hub-and-spoke, decision trees, risk matrices, gantt timelines, layer cakes, archetype grids, palette swatches, side-by-side comparisons, tiered fan-outs, and more
• 5 themes — pick at generation time, baked into the output HTML
• A working boilerplate — Boilerplate.html with structure-only CSS, ready to clone, that pulls in the selected theme via a {{THEME_CSS}} placeholder
• A sample explainer + per-theme catalogue — examples/sample-explainer.html plus examples/samples/<theme>.html for each of the 5 themes

Why this exists

Most "design docs" rot into prose. The Explainer format inverts the contract: diagrams carry the meaning, prose is captions. The result is dense, scannable, and durable — a reference doc that holds up six months later when you've forgotten the context.

Install

Option A: Drop into Claude Code skills

cp -r skills/Explainer ~/.claude/skills/

Then in any Claude Code session: "make an explainer for [topic]" — the skill auto-routes.

Option B: Claude Code plugin

If you use the Claude Code plugin system, this pack ships with a .claude-plugin/plugin.json manifest. Install via your plugin marketplace or:

# From inside Claude Code
/plugin install <this-repo-or-path>

Output location

By default, generated explainers land in ./explainers/{slug}.html (relative to your current directory). To use a fixed location instead:

export EXPLAINER_OUT_DIR=~/Documents/explainers

How to use it

After install, just talk to Claude:

• "Make an explainer for our microservices architecture"
• "Build a visual doc comparing Postgres, SQLite, and DuckDB"
• "Render the deployment pipeline as an explainer"
• "Explainer for the new onboarding flow"

The skill will:

1. Confirm scope in one sentence (the lede)
2. Outline 6–13 sections, each with a diagram pattern
3. Author the HTML using the boilerplate
4. Write to ./explainers/{slug}.html (or your EXPLAINER_OUT_DIR)
5. Open it with your OS-native opener (xdg-open / open / start)

What it's NOT for

• Marketing pages or full web apps — use a web design skill
• Prose-heavy essays or memos — use markdown
• Presentation decks — use Gamma or similar
• Anything with photographs or raster images — the format is inline-SVG only

If your topic is 90% narrative and 10% structure, the skill itself will tell you so and decline.

Philosophy in one line

If a section is mostly prose, the skill is being misused. Every section must have a visualization that carries the meaning.

Full philosophy: skills/Explainer/References/Philosophy.md.

Aesthetic in one line

Single chrome accent, semantic data palette inside diagrams only, chrome retreats, diagrams over prose. No emoji, no external assets, no JavaScript. The discipline is universal across themes; each theme just changes the surface, ink, accent, and font stack.

Full token reference: skills/Explainer/References/Aesthetic.md.

Themes

Pick at generation time with --theme=<name> on render.ts, or by naming the theme when you ask Claude ("make an explainer for X in fragapane theme"). Default: anthropic.

Theme	Identity	Sample
anthropic	Dark warm-tinted near-black, clay accent. The default.	anthropic.html
fragapane	Dark soft organic, dusty rose accent, sentence-case kickers, generous whitespace.	fragapane.html
ft	Light FT salmon paper, brand-red accent, density-heavy. Prints inverted.	ft.html
bloomberg	Pure black terminal, brand yellow, mono-everywhere. Numbers-first pieces.	bloomberg.html
riso-zine	Light off-cream paper, fluorescent red, geometric display sans. Small-press feel.	riso-zine.html

To add your own theme: drop a CSS file in skills/Explainer/Themes/. It must define a :root { ... } block with the standard tokens (--bg, --bg-2, --bg-3, --fg, --muted, --dim, --rule, --rule-2, --accent, --data-{sage,clay,amber,dusty,coral}, --code-bg, --font-{display,body,mono}). Component overrides go below the :root block.

Repository structure

explainer-pack/
├── README.md                     ← you are here
├── LICENSE                       ← MIT
├── CLAUDE.md                     ← repo invariants
├── .claude-plugin/
│   └── plugin.json               ← Claude Code plugin manifest
├── skills/
│   └── Explainer/                ← drop this into ~/.claude/skills/
│       ├── SKILL.md
│       ├── Workflows/
│       │   ├── Generate.md
│       │   └── Revise.md
│       ├── References/
│       │   ├── Philosophy.md
│       │   ├── Aesthetic.md
│       │   ├── Components.md     ← 15 diagram patterns with code
│       │   └── Boilerplate.html  ← ready-to-clone template (structure-only CSS)
│       ├── Themes/               ← 5 baked-in themes
│       │   ├── anthropic.css
│       │   ├── fragapane.css
│       │   ├── ft.css
│       │   ├── bloomberg.css
│       │   └── riso-zine.css
│       └── Tools/
│           ├── render.ts         ← placeholder + theme substitution
│           └── verify.ts         ← pre-open gate
└── examples/
    ├── sample-explainer.html     ← canonical hand-authored sample
    └── samples/                  ← one rendered sample per theme
        ├── anthropic.html
        ├── fragapane.html
        ├── ft.html
        ├── bloomberg.html
        └── riso-zine.html

License

MIT. Use it, modify it, ship it, sell derived work. See LICENSE.

Contributing

The diagram catalog in Components.md is the highest-leverage place to extend. New patterns must:

1. Be structurally informative — geometry/color/spatial carries meaning, not just text in boxes
2. Use the fixed accent palette — mint, violet, cyan, amber, coral, dim
3. Be self-contained inline SVG — no external assets, no JS
4. Have a clear "when to use" opening line

PRs that add light-mode variants, emoji, or external dependencies will be closed.