creating-explainers
Installation
SKILL.md
Creating Explainers
Overview
This skill produces a single self-contained interactive explainer 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.mdbefore 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.