| 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:
- 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.
- Write the description first — it's the discovery surface. Pack real trigger phrases
(capability + timing) into
description.
- Scaffold the directory:
SKILL.md (tight frontmatter + step-by-step body),
optional references/ for depth, scripts/ for helpers, examples/.
- Keep
SKILL.md tight and push detail into references/ (progressive disclosure).
- 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.
