explainerlisted

# Explainer A one-shot recipe for turning a topic into a polished standalone HTML explainer. The user invokes this when they want something **explained as a designed artifact** — not as chat prose, not as markdown, not as a tutorial repo. One HTML file, opens in a browser, looks intentional, works in light and dark mode. ## The contract Every explainer must: 1. Be a **single self-contained HTML file**. No external JS frameworks. Google Fonts is fine. No build step. 2. Use the **Claude plugin workflow** for aesthetic direction. Claude should own the visual-artifact judgment; Codex remains the steward for scope, saving, opening, and final verification. Do not default to a generic "docs page" look. 3. **Support both light and dark mode** via `@media (prefers-color-scheme: dark)`. No JS toggle, no asking the user which mode they want, no separate files. 4. Be written for **a reader who wants to learn**, not a reader scanning for a reference. Prose can be opinionated. Examples should be worked, not abstract. 5. Save to `/tmp/<slug>-explainer.html` (kebab-case the topic) and `open` it. ## Workflow 1. **Read the topic.** If the user gave one sentence, you have enough — don't over-clarify. If genuinely ambiguous (could be one of two different things), ask once. 2. **Get Claude's design direction.** Use the Claude plugin's design workflow or `scripts/run_design_pass.py` in read-only handoff mode when available. Pass the topic and ask for a committed visual direction for a stan