interactive-learning

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

1. 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.
2. Read it. Identify the mechanism — the cause→effect the lesson hinges on. That is what the control must let the user vary.
3. Generate learn/<slug>.html — same slug as the source .md, same directory.
4. Open it: open learn/<slug>.html (macOS); xdg-open on Linux.
5. 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.