visual-explainer-corelisted

# Visual Explainer Core ## Overview One locked design system, shared by every explainer skill. Domain skills supply content and a few domain-specific components; everything visual — tokens, type, callouts, tables, diagram cards, interactive primitives, accessibility, print — lives here so the whole family stays identical. Consistency is the product: a reader recognizes any explainer on sight, with zero per-generation theme variation. ## What lives here `SKILL.md` at the root; the theme itself in `assets/`. There is **no build step** — diagrams and code render in the browser from a CDN. | Path | Responsibility | |---|---| | `assets/core.css` | All shared CSS: `:root` tokens, typography, primitives, the Prism code-token palette, a11y, print. | | `assets/core.js` | Copy buttons, tabs (+keyboard), sliders, TOC scroll-spy, back-to-top, diagram zoom — plus the locked `mermaid.initialize` and `Prism.highlightAll`. | ## How a domain skill uses the core Each domain `templates/template.html` is **fully self-contained**: it embeds an inline copy of `core.css` and `core.js`, and loads Mermaid + Prism from a CDN. To produce an explainer: 1. Start from `templates/template.html` (already self-contained — nothing to wire up). 2. Fill in content: Mermaid as `.mermaid` blocks, code as `<pre><code class="language-X">`. Replace `{{LANGUAGE}}` in the Prism `<script>` tag with the language(s) the document uses. 3. **Open the file in a browser.** Mermaid renders the diagrams and Prism hi