explainer-design-systemlisted

## Provenance & Credits This skill is vendored from [**zarazhangrui/codebase-to-course**](https://github.com/zarazhangrui/codebase-to-course) by [Zara Zhang](https://github.com/zarazhangrui). The teaching primitives, content philosophy, design system tokens, and interactive-element HTML patterns documented here originate upstream — full credit for the pedagogical model goes to the original author. We renamed the local copy to `explainer-design-system` to better reflect its role as a design-system reference inside this plugin's single-module pipeline; the upstream URL is recorded in the YAML frontmatter for traceability. All upstream SKILL.md content below the adapter note is preserved verbatim. ## Adapter note for agent-flow `/explain` This skill is vendored from the upstream repo but wired into this plugin's single-module `/explain` pipeline, not its original multi-module directory output. Speedwagon (the authoring agent) treats this file as guidance, not as a generator. Concretely: - **Output shape** — Speedwagon writes **one** `<section class="module">` HTML fragment to `.claude/explain-briefs/<slug>.fragment.html`. The assembler (`scripts/compile-explain.sh`) concatenates it into `explain-out/index.html`. Do **not** create a course directory, `styles.css`, `main.js`, `build.sh`, `_base.html`, or `_footer.html` — those assets live under `templates/explain/` and are owned by the pipeline, not by this skill. - **Code blocks inside `<pre>`** get a `class="langua