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:

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.

1. Write the description first — it's the discovery surface. Pack real trigger phrases

(capability + timing) into description.

1. Scaffold the directory: SKILL.md (tight frontmatter + step-by-step body),

optional references/ for depth, scripts/ for helpers, examples/.

1. Keep SKILL.md tight and push detail into references/ (progressive disclosure).
2. 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.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: APareek89
• Source: APareek89/agentic-learning-skill
• License: MIT

Install and usage instructions live in the source repository linked above.