A Claude Code plugin that transforms codebases into interactive HTML courses and Knowledge Graphs. Here's how it works on the inside.
+ 6 deep-dive pages available
The entire system is orchestrated by a single file: skill.mdThe central configuration file with YAML frontmatter containing all rules, phase definitions, and templates for the skill.. It contains the YAML metadata, mode detection logic, all phase definitions, and quality gates. Claude reads this file and executes the pipelines defined within it.
Eight specialized agentsMarkdown files in the agents/ directory, dispatched as sub-agents by Claude. Each agent has a clear mandate and a defined output format. handle the analysis work in the comprehension pipeline: from project scanning through file analysis to graph validation. Three modes control what gets produced: Course, Knowledge Graph, or both.
The comprehension pipeline starts with the project-scannerScans the codebase, detects languages and frameworks, produces a file inventory JSON with paths, LOC, and import maps., which creates a complete file inventory. Then up to five file-analyzer instances run in parallel, extracting nodes and edges for the Knowledge Graph.
The architecture-analyzerIdentifies 3-10 logical architecture layers (e.g., Core, Infrastructure, API) and assigns every file to exactly one layer. detects the layer structure, the tour-builder creates guided learning paths from it, and the graph-reviewer validates the entire graph with systematic checks.
The comprehension pipeline runs through eight phases that produce a complete Knowledge GraphA JSON data structure containing nodes (files, functions, classes, concepts ...), edges (imports, calls, contains ...), layers, and a guided tour path.. Each phase has clear input/output contracts and is controlled by the orchestrator in skill.md.
The graph supports 16 node types (13 structural + 3 domain) and 29 edge types (26 structural + 3 domain). These types are defined as a schema in graph-reviewer.md and are strictly validated during the review phase.
The course pipeline produces interactive HTML pages in seven phases. Central to it is the Helpfulness ScoringEach topic is rated on a 1-10 scale. Only topics above the audience-specific threshold (Dev: >=6) get their own sub-page. in Phase 2: it autonomously decides which topics deserve their own deep-dive page and which remain as a paragraph on the parent page.
Each audience runs an independent pipeline with its own depth profile. Developers get up to L3 (deep detail), users up to L2, executives only L1. Within a pipeline, topics and languages (DE/EN) are built in parallel.
All generated courses use the energy-corporate design with three primary colors: Deep Blue#000099 — used for navigation, hero sections, and module numbers (at 12% opacity). (#000099), Impulse Orange#FE8F11 — used for accents, buttons, links, progress bars, and deep-dive links. (#FE8F11), and Warm Gray#E4DAD4 — used for borders, alternating backgrounds (odd modules), and subtle dividers. (#E4DAD4).
The typography hierarchy uses Bricolage Grotesque for headlines, DM Sans as body font, and JetBrains Mono for code. CSS is driven by custom properties and fully embedded in each HTML file — no external build process required.
In Course Mode, Claude analyzes the codebase directly and produces HTML courses. In Comprehension Mode, only the Knowledge Graph with dashboard is created. Combined Mode is the best of both worlds: the KG is generated first, then its data feeds into course creation.
The key advantage of Combined Mode: KG data like fan-in/fan-outFan-in = number of incoming edges (how many other files import this one). Fan-out = outgoing edges. High fan-in indicates a core component., layer assignments, and complexity ratings make the Helpfulness Scoring more objective. A node with high fan-in automatically receives a relevance bonus.
| Property | Course Mode | Comprehension Mode | Combined Mode |
|---|---|---|---|
| Output | HTML courses (L0-L3) | knowledge-graph.json + dashboard | Both |
| Phases | Phase 0-6 | Phase 0-7 | Phase A0-A7, then B0-B6 |
| Agents | None (Claude directly) | 8 specialized agents | 8 agents + Claude directly |
| HS Scoring | Heuristic-based | Not applicable | KG-enhanced (more objective) |
| KG Bonus | Not available | Not applicable | +1 Complexity, +1 Fan-in, +1 Core-Layer, +1 Edge density |
| Keywords | "course", "tutorial", "HTML" | "understand", "graph", "dashboard" | "both", "combined", "everything" |
The Learning Skill is modular by design. New programming languages are added as Markdown files in languages/ (currently 23 languages from C++ to YAML). Framework-specific rules live in frameworks/ (10 frameworks from Django to Vue). Each file extends agent knowledge without touching skill.md.
Beyond the three predefined audiences (User, Developer, Executive), custom audiences with their own depth profiles can be defined. Agent definitions in agents/ are equally extensible — each agent is a standalone Markdown file with YAML frontmatter and a clear prompt template.
# Learning Skill v2.0 — Directory Tree
skill.md # Orchestrator + rules
agents/
project-scanner.md # File inventory
file-analyzer.md # Extract nodes + edges
architecture-analyzer.md # Layer detection
tour-builder.md # Learning paths
graph-reviewer.md # Graph validation
assemble-reviewer.md # Batch merge
domain-analyzer.md # Domain logic
knowledge-graph-guide.md # Dashboard
languages/ # 23 language addenda
typescript.md python.md rust.md go.md ...
frameworks/ # 10 framework addenda
react.md nextjs.md django.md spring.md ...