creating-explainerslisted

Use when creating an interactive educational article, explainer, or distill-style essay - a single self-contained HTML page with hand-built canvas figures the reader can interact with. Covers articles built from user-provided files (paper, blog post, transcript, research report), topic-driven articles needing web research, and the mix of both. Trigger phrases include "make an explainer", "turn this paper into an interactive article", "build a distill-style essay", "explain X visually", or any request to produce an interactive HTML walkthrough with hand-rendered canvas figures. For explaining a codebase or source files, use explaining-codebases instead. Use even when the user describes the goal without naming the format - if they want an interactive, narrative article with figures the reader can play with, this skill applies.
analyticalmonk/explain-this · ★ 0 · AI & Automation · score 72

Install: claude install-skill analyticalmonk/explain-this

# Creating Explainers ## Overview This skill produces a **single self-contained HTML article** in the style of distill.pub - serif typography, a sticky two-column layout, and hand-built Canvas figures the reader can interact with. The output is one `index.html` file that opens directly in a browser; no parent project, no build step, no shared infrastructure required. **Core constraints (non-negotiable):** - **Zero dependencies.** No npm, no bundler, no React, no D3, no Three.js, no Tailwind. Vanilla HTML + inline CSS + vanilla JS only. - **One file per article.** All CSS in a single `<style>` block in `<head>`; all JS at the bottom of `<body>`. The only external network requests are Google Fonts. - **Hand-coded Canvas figures**, not SVG libraries or images. 3D uses custom projection + z-sorting + lighting (see `references/figure-archetypes.md`). - **The voice matters as much as the visuals.** Conversational, second-person, analogy-rich. Read `references/voice-and-style.md` before drafting prose. If you find yourself reaching for a framework or asking "should I just use React for this", stop. The constraint is the point. ## When to Use Use whenever the user asks to: - Turn a paper, blog post, transcript, or research report into a walkthrough - Build a distill-style or interactive explainer on any topic - "Explain X" with figures the reader can interact with Don't use for: - Static blog posts with no interactivity (just write HTML) - Slide decks or presentations - Docum