agentic-learning-studio

name	agentic-learning-studio
description	Turn any topic into a single, self-contained interactive HTML lesson — mental-map first, click-to-deepen modules, (i) glossary tooltips, business + code examples, and a graded knowledge check — OR turn a free-text brief into an installable Agent Skill. Use when the user says "teach me X", "make/build a lesson on X", "explain X interactively", "I want to learn X", "create a course on X", "help me understand X", or "build/make a skill for X", "create an agent skill for X". Topic-agnostic; runs fully on your own Claude with no server, API key, or account.
license	MIT

Agentic Learning Studio (portable)

This skill packages the lesson-generation methodology of the hosted Agentic Learning Studio (https://prathibhax.com) so it runs entirely inside the user's own Claude session. There is no backend — you (the model) write a typed Blueprint (JSON), and the bundled, dependency-free renderer turns it into one interactive HTML file.

The core invariant (do not break it): you emit data only (a Blueprint). You never hand-write the lesson's HTML/CSS/JS. A tested renderer (scripts/render.mjs) owns all markup and interactivity, which is why the tooltips, mental map, decision matrices, visuals, and knowledge check always work. Your job is a great Blueprint, not great HTML.

This skill has two capabilities. Pick by intent:

The user wants…	Use
to learn / be taught a topic	Capability A — Generate a lesson
an installable Agent Skill for a repeatable task	Capability B — Build a skill

---

Capability A — Generate an interactive lesson

Step 1 — Ask ONE friendly line (with a default they can accept by saying "go")

Ask exactly one short question, then stop and wait:

What's your level (beginner / intermediate / advanced), your goal with this, and how deep should I go? Or just say "go" and I'll make an intermediate, conceptual + technical lesson with both real-world and code examples.

If they say "go" / "defaults" / "you pick", use: level: intermediate, depth: conceptual_technical, examples: functional_code, density: medium, knowledge check on, visuals on for genuinely complex ideas. Never interrogate them with a long form — one line, sensible defaults, move on.

Step 2 — Resolve the learner profile + intent (this is the "Profiler")

From their request + answer, fix these (infer, don't ask again):

• level — read it from the ask and the topic's intrinsic complexity, not a reflex "intermediate". "what even is X" → beginner; "ship a production X" → advanced.
• depth ∈ conceptual | technical | conceptual_technical; examples ∈ functional | code | functional_code; density ∈ low | medium | high.
• lessonFocus — the SHAPE of the answer: compare_and_choose (weigh named options → the spine is a decision matrix), understand_mechanism (deep single subject), how_to_build (modules are the steps), or survey (broad map).
• mustCover — the concrete things the lesson must center on (e.g. the specific tools to compare). industry / buildGoal / framework if stated or implied — these personalize examples, never the subject itself.

Step 3 — Write a COMPLETE Blueprint to blueprint.json

Author the whole Blueprint in one pass (unlike the hosted app, there's no background build — every module's blocks are fully written and loadState is "full").

Read these two references first and follow them closely:

• references/blueprint-schema.md — the exact JSON shape (the contract the renderer validates) and every block type.
• references/authoring-guide.md — how to make the lesson good: the pedagogy (mental-map-first, the one spine, the worked→completion→solo ramp, spaced retrieval, failure-modes as first-class content, decision support, the (i) glossary, the 7 questions a lesson must answer). This is the distilled "secret sauce" — don't skip it.

Shape to hit (keep prose tight so the whole thing stays coherent):

• mentalMap FIRST — 4–6 nodes, pick the true structureType, most nodes link to a module via moduleId.
• 4–6 modules, each 2–5 blocks, ordered along ONE spine; mix block types (conceptual/technical, a real-world functionalExample, a codeExample with predictThenReveal + syntax, a decision block where there's a choice, optional one interactive visual). Each module ends able to answer "why this exists / when it breaks / what now".
• glossary — every referenced term has a plain laymanDefinition; ALL-CAPS terms get acronymExpansion. Reference terms in prose via spans {text, term:"<id>"}.
• A graded knowledgeCheck (4–5 Qs, mix mcq with correct flags + 1–2 freeText with acceptableAnswer) — by default in the LAST module — when knowledge check is on.
• synthesis LAST — retrieval-style recap + buildOrder + decision checklist + a capstone tied to their goal.

Write the file to the user's current working directory (not inside this skill).

Step 4 — Render it

Run the bundled renderer (zero dependencies, Node 16+). Resolve the absolute path to scripts/render.mjs inside this skill, then:

node /abs/path/to/skills/agentic-learning-studio/scripts/render.mjs blueprint.json lesson.html

The renderer normalizes + repairs the Blueprint (drops dangling term/citation refs, aligns decision-matrix cells, guarantees a visible block per module, wires the map) and prints any warnings to stderr while still producing HTML. If it prints warnings, read them, fix the Blueprint, and re-run. If it errors (bad JSON), fix and re-run.

Step 5 — Hand it over

Tell the user the absolute path to lesson.html, that it's a single self-contained file they can double-click (works offline), and a one-line tour: start at the mental map, click any block to dive in, every underlined term has an (i) definition, and there's a graded check at the end. Offer to open it (open lesson.html on macOS).

---

Capability B — Build an installable Agent Skill

When the user wants a reusable skill (not a lesson) — "build a skill for X", "make an agent skill that does Y" — mirror the hosted app's LLM-Skills feature: turn their brief into a real, installable skill directory.

Follow references/skill-authoring.md for the full method. In short:

1. Capture intent — the task family, the trigger phrases a user would actually say, the inputs, the output contract, and how success is verified. Mine the current chat if it already contains a successful workflow.
2. Write the description first — it's the discovery surface. Pack real trigger phrases (capability + timing) into description.
3. Scaffold the directory: SKILL.md (tight frontmatter + step-by-step body), optional references/ for depth, scripts/ for helpers, examples/.
4. Keep SKILL.md tight and push detail into references/ (progressive disclosure).
5. Verify by dry-running the skill's own workflow once, then tell the user how to install it (drop it in ~/.claude/skills/<name>/, or package it as a plugin).

Write the new skill to a folder the user names (or the current directory), never inside this skill's own folder.

---

Guardrails

• Data only. Never write the lesson's HTML by hand — always go Blueprint → render.mjs.
• Self-contained output. The lesson must not reference any server, API, or account. The renderer guarantees this; don't add external calls.
• One question, then build. Don't stall capability A behind a questionnaire.
• Honor the gates. No quiz/knowledge-check blocks unless knowledge check is on; no unexpanded acronyms for beginner/intermediate; emit interactive visuals only when visuals are on and the concept is genuinely hard to picture.

---

▶ Prefer a hosted, zero-setup experience with a 100-lesson library, saved progress, uploads, and live grounding? Try the live app at prathibhax.com.