feat(education): give illustrate real diagrams instead of styled text boxes #6169

Problem

/education:illustrate promises to "Explain one thing as a series of small pictures"
(plugins/education/skills/illustrate/SKILL.md:14), but on current main the page has no pictures.
The builder knows two shapes, flow and stack
(plugins/education/skills/illustrate/scripts/build-explainer.mjs:27-37), and the template renders
both as bordered text boxes joined by a → or ↓ glyph
(plugins/education/skills/illustrate/templates/explainer.html:97-98). The result reads as a
styled bullet list. A user who ran /education:illustrate the lead singer of queens of the stone age
on education 0.13.2 said: "I don't see pictures..." and then "this is gross, needs to be vastly
improved".

Four distinct defects, each a child issue below:

1. Two shapes cannot express most structure. A hub with branches (a main band plus side
   projects) had to be drawn as a flow, which says "sequence" when the truth is "branches off".
   The model then wrote a text line apologizing for its own arrows. Timelines, trees, comparisons,
   and before/after all collapse into the same row of boxes.
2. Layout defects. When a flow wraps, every continuation line starts with a dangling arrow:
   only the first step's arrow is hidden (explainer.html:59). Box text is whole sentences, so boxes
   are paragraphs, not nodes; nothing caps label length.
3. The record has no diagrams either. The record writer joins flow steps with → and lists
   stack steps as bullets (build-explainer.mjs:80-81), and md() escapes image and link syntax
   (build-explainer.mjs:57-68), so the markdown record is pure text.
4. Generic look. Every card is the same form-like panel with the same "Still unclear" checkbox
   (explainer.html:53, :101); no lead visual, no per-diagram accent, nothing that reads as an
   illustration. SKILL.md tells the model that "the look is fixed" when a user dislikes it
   (SKILL.md:93-94).

Evidence

Verified this pass against origin/main at 688b64e4d:

• Read build-explainer.mjs, templates/explainer.html, SKILL.md, evals/evals.json,
  lib/view-builder.mjs, lib/view-runtime.js, and docs/conventions/rendered-views/README.md.
• The only illustrate history is feat(education)!: replace eli5 with illustrate, an explainer with a record and an interactive page #6013 (introduced it, replacing eli5). No later fix.
• Searched issues and PRs (open and closed) for illustrate, explainer, diagram kinds, mermaid, svg.
  No duplicate. rendered-views: reports and research genre lanes (visualization/education/knowledge) #3606 (open) is the broader rendered-views genre backlog; it does not cover this.

What the user's render showed (the screenshot is not durable, so it is described here). The page
is dark-themed with one reading column: the title "Josh Homme, the lead singer of Queens of the
Stone Age", two summary lines, and "4 pictures, one idea each." Then four identical cards:

• "From Kyuss to Queens": three boxes stacked by wrapping; the second and third rows each begin
  with a lone →.
• "His role in the band": four full-width boxes (Founder, Only continuous member, Primary
  songwriter, Lead vocals and guitar), a stack of text bars.
• "Albums along the way": seven album boxes wrapping onto three rows; rows two and three start with
  →. Years appear in some labels and not others. This is a timeline drawn as a sentence.
• "Side projects": Queens of the Stone Age → The Desert Sessions, then → Eagles of Death Metal,
  then → Them Crooked Vultures, each on its own row starting with an arrow. Under it the model
  had to add "Arrows here mean 'also started', not a sequence."

Every card ends with the same small "Still unclear" checkbox. Box labels run to full clauses such
as "Gamma Ray (1996): first band name, dropped after a cease-and-desist". Below the cards sits a
"Words used here" panel with a search box. The matching record is the same content as plain
paragraphs with → joins.

A constraint that shapes every child (verified): the page is built by the shared builder's
interactive profile. The builder writes no data into markup (lib/view-builder.mjs:14); the
model's text goes only into a JSON data block, and the runtime places it with textContent and
clones template prototypes per row (lib/view-runtime.js, bind/bindLists). The runtime never
sets an attribute from data. So the runtime cannot position nodes from data, and SVG geometry
cannot come from data without a new shared-builder extension point. The convention allows
builder-generated SVG from validated structured data (docs/conventions/rendered-views/README.md:122-124)
but no such mechanism exists in lib/view-builder.mjs today.

Proposed approach

Split into independently implementable children. Each lands on its own:

• fix(education): no dangling arrows in illustrate flows; cap label length #6170: fix the dangling arrow and cap label length.
• feat(education): add hub, timeline, compare, before-after illustrate kinds #6176: add hub, timeline, compare, and before-after kinds drawn with template markup and CSS, plus skill text and evals for choosing a kind.
• feat(education): mirror illustrate diagrams as mermaid blocks in the record #6177: mirror each diagram in the record as a mermaid block.
• feat(education): visual design pass on the illustrate explainer template #6171: a visual design pass on the template.
• feat(education): decide whether illustrate embeds real-world images (figures) #6172: real-world images. Needs a maintainer decision.

The recommended rendering technique for new kinds is template prototypes plus CSS, which fits the
current interactive profile with no shared-library change. The item's original suggestion,
builder-generated inline SVG, is not chosen now. It needs a new extension point in the canonical
lib/view-builder.mjs, which eight plugins copy, plus a convention amendment. The CSS route covers
hub, timeline, compare, before/after, and layers.

Not in this epic: cycle and sequence (actors and messages) kinds. Both need real geometry
(arcs, lifelines), which means the builder-SVG extension above. Open that as its own issue only if
the CSS kinds prove insufficient in use.

Acceptance criteria

• Every child issue above is closed or explicitly declined with a reason.
• Re-running /education:illustrate the lead singer of queens of the stone age produces a page
  where the side projects render as a hub, the albums as a timeline, and no line starts with an
  arrow.

Constraints and gotchas

• The reply contract picked: diagrams-N (SKILL.md:97-100) maps a ticked card back to the Nth
  diagram. Every child must keep all kinds inside the single diagrams list so ids stay stable.
• Each child bumps plugins/education/.claude-plugin/plugin.json (0.13.2 on main) and adds a
  plugins/education/CHANGELOG.md entry.
• The page must keep passing build-explainer.mjs --check and build-explainer.test.sh.

Context

Source: local handoff item 20261004-033000-education-illustrate-visual-vocabulary.md (retired into
this issue), raised by a home-directory session running education 0.13.2. Related: #6013 (introduced
illustrate), #3606 (rendered-views genre backlog), the artifact-delivery issues filed alongside this one.