explainerlisted

Generate dense, visual-first HTML explainers in a signature dark aesthetic — diagrams carry the design, prose is captions only. Every section has a custom inline-SVG visualization: pipeline DAGs, archetype grids, hub-and-spoke diagrams, decision trees, risk matrices, gantt timelines, layer cakes, palette swatches, side-by-side comparisons. Dark theme with mint/violet/amber/cyan/coral accents, monospace section kickers, kicker → h1 → lede → meta header pattern. Inline SVG only — no external assets, no images, no JS. Self-contained single-file HTML output. USE WHEN: explainer, make an explainer, visual doc, architecture HTML, design doc, dark theme HTML, html map, system overview, dashboard reference, prose-heavy is failing, want more visuals, build an HTML diagram, render system as visual reference. NOT FOR: full web pages or apps (use a web design skill), short prose summaries, markdown documents, or anything with photographs/raster images.
Angelopvtac/explainer-pack · ★ 1 · Data & Documents · score 75

Install: claude install-skill Angelopvtac/explainer-pack

# Explainer A signature visual-first HTML format. Dense, dark-themed, diagram-driven reference documents that compress complex systems into scannable visual sections. Each section is a custom inline-SVG diagram with a one-line caption — never a paragraph. ## The rule If a section is mostly prose, the skill is being misused. Every section must have a visualization that carries the meaning. Prose is captions. Captions are one sentence. If the meaning needs three sentences, the diagram is wrong. ## Canonical example See `examples/sample-explainer.html` in the pack — a complete, self-contained explainer demonstrating sections, SVG diagrams, and the aesthetic. That is the bar. ## Workflow Routing | Workflow | Trigger | File | |----------|---------|------| | **Generate** | "make an explainer", "build a visual doc", "explainer for X" | `Workflows/Generate.md` | | **Revise** | "revise section N of the explainer", "update the X section in {path}", "fix section N in explainer" | `Workflows/Revise.md` | ## Tools - `Tools/verify.ts` — pre-open gate. Checks HTML5 shape, `viewBox` on every renderable `<svg>`, no duplicate `id`s, and prose-creep per section. Run before opening. - `Tools/render.ts` — substitutes `{{KEY}}` placeholders in `Boilerplate.html` from a JSON object (HTML-escaped by default; `raw_` prefix for raw HTML). Accepts `--theme=<name>` to pick a theme from `Themes/`. Default: `anthropic`. ## References - `References/Philosophy.md` — visual-first rules, anti-patte