Turn a difficult system into a truthful visual story. Produce a portable JSON
spec first, then a deterministic, self-contained HTML explainer.
-
Identify the audience, question, language, and one thing that should travel
through the story: a request, packet, decision, event, or user action.
-
Choose exactly one story grammar:
concept: intuition → mechanism → boundary.
module: entry point → transformations → outputs/dependencies.
tradeoff: shared goal → competing options → consequences/decision rule.
incident: normal path → break and propagation → detection/recovery.
-
Gather evidence. For repository work, inspect actual files and use local
paths. For external claims, use authoritative sources when available. Record
uncertainty explicitly.
-
Create a version 1 JSON spec following
references/spec-contract.md. Use 3–7 scenes,
2–6 nodes per scene, a complete truth ladder, trace, glossary, teach-back,
evidence map, and the required mode-specific modeData. Add failure
information to consequential nodes.
-
Validate before rendering:
node scripts/validate.mjs path/to/spec.json
-
Render to a new local file:
node scripts/render.mjs path/to/spec.json path/to/explainer.html
The renderer refuses an existing path. Only when the user explicitly wants
to replace a known regular file, append --force. Forced rendering uses an
atomic replacement and still refuses symbolic links and non-file paths.
-
Validate the spec and artifact together:
node scripts/validate.mjs path/to/spec.json path/to/explainer.html
-
When browser access is available, inspect the local artifact at desktop
width and 390px. Confirm one h1, readable labels, no horizontal overflow,
keyboard focus, independent tablists, global and scene-local playback,
viewport following, active real-edge and evidence-card synchronization,
enter/hold/exit animation phases, failure lens, answer reveals, and zero
remote resource requests. Every scene evidence card must expose its status,
concise core basis, support scope, and a URL or explicit no-locator boundary.
-
Exercise the reader workspace: open and dismiss the modal drawer by mouse
and keyboard; confirm focus return; enable the library intentionally; reload
and verify favorites and a plain-text annotation; and confirm history
contains only same-origin explainers that were actually opened. Use a
markup-shaped annotation to verify it stays inert text.
-
Exercise export: confirm the print stylesheet, PNG signature and dimensions,
PPTX and DOCX ZIP signatures and required OOXML parts, and the fallback
download link when automatic downloads are suppressed. Visually confirm
that scene artwork includes a bounded evidence footer with status, core
basis, and source locator or boundary. When native Pages is in scope, run
through scripts/serve.mjs, verify the .pages package contains
Index/Document.iwa, then reopen it in Pages. Fix the spec or template and
rerun both validators after any change.
Read references/reporting.md for the full language
selection and delivery-report contract.
Read references/story-grammars.md for mode
patterns, references/evidence-rules.md for
claim boundaries, and references/visual-system.md
before changing the renderer's visual language. Read
references/library-and-export.md before
changing persistence, navigation, playback, or export behavior.
If evidence is incomplete, generate only when the evidence map and caveat make
the gap unmistakable. Otherwise stop and report the missing evidence.