diff --git a/CLAUDE.md b/CLAUDE.md index 9395686..aa461ec 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -31,6 +31,7 @@ skills/ visual-explainer-core/ shared design system (not a user-facing generator) SKILL.md assets/ core.css, core.js ← canonical locked theme + scripts/ assemble.sh ← stamps the core into a draft (zero install) ``` **SKILL.md is an orchestrator, kept lean.** It carries when-to-use, the process spine, and a @@ -38,18 +39,19 @@ reference map; everything else (content shapes, diagram/code detail, primitives, `references/*.md` and is pulled in only when needed. When adding guidance, put detail in a reference file and link it from SKILL.md — don't grow the always-loaded SKILL.md. -## Shared core + CDN rendering (no build) +## Shared core + one zero-install assembly step -The locked theme lives once in `skills/visual-explainer-core/assets/` (`core.css`, `core.js`). Each -domain `templates/template.html` is **fully self-contained**: it embeds an inline copy of that core -and loads Mermaid + Prism from a CDN. There is **no build step** — fill in the template, replace -`{{LANGUAGE}}` in the Prism ` - + +
@@ -900,165 +321,6 @@

Out of scope

- + diff --git a/skills/visual-explainer-core/SKILL.md b/skills/visual-explainer-core/SKILL.md index baeed0f..7e4b7b8 100644 --- a/skills/visual-explainer-core/SKILL.md +++ b/skills/visual-explainer-core/SKILL.md @@ -15,33 +15,37 @@ 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. +`SKILL.md` at the root; the theme in `assets/`; the splicer in `scripts/`. | 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`. | +| `scripts/assemble.sh` | Stamps `core.css`/`core.js` into a marker-based draft to produce the final HTML. Zero install (awk/bash); the only "build" there is. | ## 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: +Each domain `templates/template.html` is a **marker skeleton**: structure and component markup, the +Mermaid + Prism CDN tags, and two markers — `` / `` — where the +shared theme is stamped in. To produce an explainer: -1. Start from `templates/template.html` (already self-contained — nothing to wire up). +1. Copy `templates/template.html` to a working draft. 2. Fill in content: Mermaid as `.mermaid` blocks, code as `
`. Replace
-   `{{LANGUAGE}}` in the Prism `
+#
+# Zero install: uses only awk + coreutils, present on macOS & Linux.
+# Usage: bash assemble.sh  
+set -euo pipefail
+
+src=${1:?usage: bash assemble.sh  }
+out=${2:?usage: bash assemble.sh  }
+dir=$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)
+css="$dir/../assets/core.css"
+js="$dir/../assets/core.js"
+
+for f in "$src" "$css" "$js"; do
+  [ -r "$f" ] || { echo "assemble: cannot read $f" >&2; exit 1; }
+done
+
+awk -v cssfile="$css" -v jsfile="$js" '
+  index($0, "") {
+    print "  "; css_done = 1; next
+  }
+  index($0, "") {
+    print "  "; js_done = 1; next
+  }
+  { print }
+  END {
+    if (!css_done || !js_done) {
+      print "assemble: a  marker is missing from the template" > "/dev/stderr"
+      exit 2
+    }
+  }
+' "$src" > "$out.tmp"
+mv "$out.tmp" "$out"
+
+grep -q "{{" "$out" && echo "assemble: warning — unfilled {{...}} placeholders remain in $out" >&2
+echo "assembled → $out"