Create interactive visual explainers — HTML files with embedded SVG diagrams, charts, sliders, and steppers that teach concepts through spatial and interactive means. Use this skill whenever the user asks to "explain", "visualize", "diagram", "illustrate", or "show how something works", and the output should be a standalone file they can open in a browser. Also trigger when the user asks for an interactive demo, a visual walkthrough, an animated explanation, a calculator or simulator for a concept, or any educational/explanatory artifact that benefits from interactivity rather than static text. This includes statistical concepts, system architectures, algorithms, scientific processes, business models, decision frameworks, data pipelines, and any "how does X work" question where seeing is understanding. Do NOT use for slide decks (use pptx), formal reports (use docx), or data dashboards with real data connections. This skill is for teaching and explaining through interactive visuals.
Create standalone HTML files that explain concepts through interactive SVG
diagrams, charts, calculators, and steppers. The output is a single .html
file the user can open in any browser — no server, no dependencies, no build step.
The explainer is the right tool when seeing and interacting teaches better than reading. Ask yourself: does this concept have spatial relationships, sequential stages, tunable parameters, or a mechanism that becomes obvious when drawn? If yes, build an explainer.
Good fits: How CUPED reduces variance (slider for correlation), how a load balancer distributes requests (animated flow), how compound interest compounds (chart that redraws as you drag), git branching (visual tree), TCP handshake (stepper), A/B test power (overlapping distributions).
Poor fits: A 40-page technical report, a slide deck for a meeting, a spreadsheet of quarterly numbers, a letter to a client.
Every explainer uses the same three-layer structure:
<svg> tags.setAttribute, textContent,
style changes) to update the visual in real time.The HTML controls fire events → JS computes new state → JS reaches into the SVG DOM to update shapes and labels. No frameworks, no build tools.
┌─────────────────────────────────┐
│ HTML (controls, metric cards) │
│ ┌───────────────────────────┐ │
│ │ SVG (the visual) │ │
│ │ <rect>, <path>, <text> │ │
│ │ <line>, <circle>, etc. │ │
│ └───────────────────────────┘ │
│ <script> (JS glue) │
└─────────────────────────────────┘
Read references/explainer-types.md to classify the request. The five types