# Agentic Learning Studio > 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. - Skill: `apareek89/agentic-learning-studio` (Agent Skill, multi-file: 8 files) - Install (CLI): `npx skillmds@latest add apareek89/agentic-learning-studio` - Raw SKILL.md: https://api.skillmd.com/api/skills/apareek89/agentic-learning-studio/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - License: MIT - Author: APareek89 (https://skillmd.com/u/apareek89) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/apareek89/agentic-learning-studio --- # 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:""}`. - 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: ```bash 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//`, 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](https://prathibhax.com/?utm_source=github&utm_medium=skill&utm_campaign=als_skill)**.