| name | interactive-learning |
| description | Use when the user types /interactive-learning or says "make it interactive" or "visualize this lesson" — to turn a learn/<slug>.md lesson into a single self-contained HTML page with a control (slider/toggle/input) that makes the lesson's mechanism obvious by playing with it. Reads from the lesson file, so it works in any chat or repo. Pairs with the learn skill. |
Interactive Learning
Turn a written lesson into something you can poke. Goal: manipulating a control makes the
lesson's mechanism click in a way reading prose can't. Works in any repo.
When to use
- User typed
/interactive-learning or asked to "make it interactive".
- A
learn/<slug>.md exists (from the learn skill) worth visualizing.
Procedure
- Pick the lesson: the one the user names, else the most recent
learn/*.md (newest mtime).
The source is the file, not the conversation — works regardless of chat.
- Read it. Identify the mechanism — the cause→effect the lesson hinges on. That is what the
control must let the user vary.
- Generate
learn/<slug>.html — same slug as the source .md, same directory.
- Open it:
open learn/<slug>.html (macOS); xdg-open on Linux.
- Tell the user what to drag/toggle and what it shows.
HTML requirements
- Self-contained. One file. No build step. Inline CSS + JS.
- No dependencies except, if a chart is needed, ONE CDN script tag (Chart.js or Plotly).
If a plain SVG/canvas does the job, use no CDN at all.
- At least one live control — slider, toggle, or input — that updates a chart or visual
in real time. The control must vary the lesson's actual mechanism, not decoration.
- Restate the lesson on the page: title + takeaway in text, so the file stands alone.
The bar
The visual passes if moving the control demonstrates the takeaway. If the lesson is "effect X
is caused by parameter Y", the control should be Y and the visual should show X strengthen or
vanish as Y moves. The user SEES the mechanism, doesn't just read about it.
Common mistakes
- A static chart with no control. The control is the point — without it this is a PNG.
- A control that changes something cosmetic (color, zoom) instead of the mechanism.
- Reaching for a framework. Vanilla HTML/JS + one optional CDN chart lib. Nothing to install.
