Agentic Learn

Agentic Learning System

Generate structured, per-chapter interactive learning projects. The AI agent researches the topic, designs a curriculum, and produces interactive HTML slides with quizzes and feedback loops — adapting to your mastery level across sessions.

---

Core Philosophy

• Stanford STORM: Multi-perspective knowledge curation (teacher/practitioner/learner viewpoints)
• Tsinghua OpenMAIC: Rich scene types, progressive disclosure, assessment integration
• Mastery Learning: Track per-concept correctness. Wrong answers get reinforced; mastered concepts unlock deeper exploration.

---

Output Structure

All learning content lives under ~/Documents/agentic-learn/, organized by topic:

~/Documents/agentic-learn/
├── index.html                          # Global dashboard listing all topics
├── MCP/
│   ├── manifest.json                   # Topic metadata + chapter index + progress
│   ├── ch01-what-is-mcp/
│   │   ├── slides.html                 # Chapter slides (content + quiz + feedback)
│   │   └── feedback.json               # Saved quiz results + user feedback
│   ├── ch02-architecture/
│   │   ├── slides.html
│   │   └── feedback.json
│   └── ...
├── Kubernetes/
│   ├── manifest.json
│   ├── ch01-container-basics/
│   │   ├── slides.html
│   │   └── feedback.json
│   └── ...
└── ...

Key design decisions:

• One slides.html per chapter (not one giant file) — enables independent review/revision
• feedback.json co-located with its chapter — no hunting for scattered files
• manifest.json at topic root — single source of truth for progress
• index.html at root — aggregates all topics into a visual dashboard
• Skill re-generates index.html on every run to stay current

---

Workflow

This is a rigid skill. Follow all phases in order.

Phase 0: Check for Prior Progress

Check if ~/Documents/agentic-learn/{TopicSlug}/manifest.json exists.

If found:

1. Read manifest.json to understand topic structure and prior progress
2. Scan each chapter directory for feedback.json files using Glob + Read
3. For each chapter with feedback:

• Parse quiz score and feedback text
• Classify mastery: Mastered (>=90%), Proficient (70-89%), Developing (50-69%), Needs Review (= 0.9):

→ BRANCH: suggest 3 related topics, let user choose ```

1. Parse feedback text for signals:

• Confusion → add extra explanation slides
• Interest → include as bonus content
• "too easy" → provide advanced content

1. Brief the user on findings and adaptation plan, then proceed to Phase 2/3

If not found: Proceed to Phase 1.

Phase 1: Topic Discovery (Interactive — 2 rounds max)

Use AskUserQuestion:

Round 1 — Topic & Level:

• What topic to learn?
• Current familiarity: Beginner / Practitioner / Professional / Expert
• Goal: Conceptual / Practical / Both

Round 2 (if needed):

• Existing knowledge for analogies?
• Preferred code language?
• Depth: Quick (3-5 chapters) / Standard (5-8) / Deep (8-12)

Skip if user's message provides sufficient context.

Phase 2: Research & Knowledge Gathering

Use available tools in priority order:

1. Perplexity MCP (perplexity_ask): 2-4 queries for current state, best practices, misconceptions
2. WebSearch / WebFetch: Specific docs and authoritative sources
3. GitHub MCP: Repos, READMEs, real-world patterns
4. Local files (Grep/Glob): If user's project uses the technology

Collect internally. Do NOT dump raw results.

Phase 3: Multi-Perspective Outline

Internally simulate three perspectives:

1. Teacher — Foundational sequence, no forward references
2. Practitioner — Real-world needs, common gotchas
3. Learner (at user's level) — What analogies help, what would trip me up

Generate chapter outline:

• Each chapter: number, slug, title, learning objective, 3-5 key concepts
• Progressive difficulty: foundations → core → advanced → practice

Present outline. Ask user to approve or adjust.

Phase 4: Content + Quiz Generation

For each chapter, generate:

Content (2-4 slides):

• Clear explanations with analogies
• Inline SVG diagrams (not Mermaid — full sizing control)
• Code examples if applicable
• Key callouts and comparisons

Quiz (1 slide, 2-4 questions):

• Multiple choice (A/B/C/D), one correct, brief explanation
• Test understanding, not memorization
• Include one misconception-testing question

Feedback (1 slide):

• Textarea for reflection
• Auto-saved to localStorage, exportable to feedback.json

Phase 5: Assemble Per-Chapter HTML

Read the template at ./templates/chapter-slides.html before generating.

For each chapter, produce a standalone slides.html containing:

1. Chapter header — chapter number, title, learning objective
2. Top nav bar — "← Previous | Chapter N of M | Next →" + link back to topic index
3. Content slides — 2-4 teaching slides
4. Quiz slide — clickable options, instant feedback, score tracking
5. Feedback slide — textarea with auto-save to localStorage
6. Save & Navigate slide — "保存反馈" button (downloads feedback.json) + next chapter link

Each slides.html is fully self-contained (CSS + JS inline, no external deps except fonts).

Quiz interaction:

Click option →
  Correct: option green, show explanation
  Wrong: option red, correct option green, show explanation
  Lock question (no re-answer)
  Update score counter

Save button behavior:

Click "保存反馈" →
  Collect: quiz answers + scores + feedback textarea
  Generate feedback.json as Blob
  Trigger browser download (filename: feedback.json)
  Show "请将文件保存到本章目录: ch{NN}-{slug}/"

Phase 6: Save, Generate Index, Open

Step 1 — Create directory structure:

mkdir -p ~/Documents/agentic-learn/{TopicSlug}/ch{NN}-{slug}/

Step 2 — Write manifest.json:

{
  "topic": "Topic Name",
  "slug": "topic-slug",
  "created": "YYYY-MM-DD",
  "updated": "YYYY-MM-DD",
  "level": "practitioner",
  "goal": "both",
  "chapters": [
    {
      "id": 1,
      "slug": "ch01-something",
      "title": "Chapter Title",
      "objective": "Learning objective",
      "status": "not_started",
      "score": null,
      "feedback_saved": false
    }
  ],
  "overall_score": null,
  "next_recommendation": null
}

Step 3 — Write each chapter's slides.html

Step 4 — Generate/update index.html: Read the template at ./templates/topic-index.html. Scan all topic directories under ~/Documents/agentic-learn/, read each manifest.json, and generate a static dashboard HTML listing all topics with progress.

Step 5 — Open first chapter:

open ~/Documents/agentic-learn/{TopicSlug}/ch01-{slug}/slides.html

Step 6 — Tell the user:

• Directory path
• How to navigate (← → keys or scroll within each chapter)
• How to save feedback (click button, save feedback.json into chapter directory)
• How to continue next session: just run /agentic-learn {topic} again

---

Chapter Slide Structure

Each chapter's slides.html contains this slide sequence:

[Title/Divider] → [Content 1] → [Content 2] → ... → [Quiz] → [Feedback] → [Save & Navigate]

Slide Types

| Type | Purpose | Content | |------|---------|---------| | Title | Chapter opener | Number, title, objective, chapter progress bar | | Content | Teaching | Heading, bullets/prose, inline SVG diagram | | Quiz | Assessment | 2-4 MCQ questions, answer feedback, score bar | | Feedback | Reflection | Textarea, auto-save, prompting questions | | Navigate | Transition | Save button, prev/next chapter links |

Top Navigation Bar

Fixed at top of each slides.html:

  ← 上一章
  Chapter {N} / {TOTAL} — {TOPIC}
  下一章 →

First chapter: hide "上一章". Last chapter: change "下一章" to "完成 → 查看总结".

---

Mastery Levels

| Score | Level | Badge | Next Action | |-------|-------|-------|-------------| | 90-100% | 已掌握 | Green | Advance to deeper/related topics | | 70-89% | 熟练 | Blue | Continue to next chapter | | 50-69% | 发展中 | Orange | Review with different examples | | 0-49% | 需复习 | Red | Reinforce fundamentals |

---

Aesthetic

Terminal Mono preset:

• Dark: #0a0e14 bg, #50fa7b accent, monospace labels
• Content: Noto Sans SC + Geist Mono
• Diagrams: inline SVG with CSS variable colors
• Quiz options: clickable cards, green/red feedback
• Nav bar: semi-transparent, blurred, minimal

---

Quality Checklist

Before delivering:

• [ ] Directory structure created: ~/Documents/agentic-learn/{Topic}/
• [ ] manifest.json written with all chapters listed
• [ ] Each chapter has slides.html in its own ch{NN}-{slug}/ directory
• [ ] Each quiz has 2-4 questions with explanations
• [ ] Save button downloads valid feedback.json
• [ ] Feedback textareas auto-save to localStorage
• [ ] Chapter nav links (prev/next) work as relative paths
• [ ] index.html generated at root listing all topics
• [ ] SVG diagrams present (at least 1 per chapter)
• [ ] Content researched via Perplexity/WebSearch
• [ ] All slides fit in 100dvh
• [ ] First chapter opened in browser

Source & license

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

• Author: tsing96
• Source: tsing96/agentic-learn-skill
• License: MIT

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