Ein Claude Code Plugin, das Codebases in interaktive HTML-Kurse und Knowledge Graphs verwandelt. Hier siehst du, wie es unter der Haube funktioniert.
+ 6 Vertiefungsseiten verfügbar
Das gesamte System wird durch eine einzige Datei orchestriert: skill.mdDie zentrale Konfigurationsdatei mit YAML-Frontmatter und allen Regeln, Phasen und Templates des Skills.. Sie enthält die YAML-Metadaten, die Modus-Erkennung, alle Phasen-Definitionen und die Qualitätsgates. Claude liest diese Datei und führt die darin definierten Pipelines aus.
Acht spezialisierte AgentenMarkdown-Dateien im agents/-Ordner, die als Sub-Agents von Claude dispatcht werden. Jeder Agent hat einen klaren Auftrag und ein definiertes Output-Format. übernehmen die Analyse-Arbeit in der Verstehen-Pipeline: vom Projekt-Scan über Datei-Analyse bis zur Graph-Validierung. Drei Modi steuern, was produziert wird: Kurs, Knowledge Graph oder beides.
Die Verstehen-Pipeline startet mit dem project-scannerScannt die Codebase, erkennt Sprachen und Frameworks, erstellt eine Datei-Inventar-JSON mit Pfaden, LOC und Import-Maps., der ein vollständiges Datei-Inventar erstellt. Dann analysieren bis zu fünf file-analyzer-Instanzen parallel die Dateien und extrahieren Nodes und Edges für den Knowledge Graph.
Der architecture-analyzerIdentifiziert 3-10 logische Architektur-Layer (z.B. Core, Infrastructure, API) und ordnet jede Datei genau einem Layer zu. erkennt die Layer-Struktur, der tour-builder erstellt daraus geführte Lernpfade, und der graph-reviewer validiert den gesamten Graph mit systematischen Checks.
Die Verstehen-Pipeline durchläuft acht Phasen, die einen vollständigen Knowledge GraphEine JSON-Datenstruktur mit Nodes (Dateien, Funktionen, Klassen, Konzepte ...), Edges (imports, calls, contains ...), Layers und einem geführten Tour-Pfad. erzeugen. Jede Phase hat klare Input/Output-Verträge und wird vom Orchestrator in skill.md gesteuert.
Der Graph kennt 16 Node-Typen (13 strukturelle + 3 Domain-Typen) und 29 Edge-Typen (26 strukturelle + 3 Domain-Typen). Die Typen sind in graph-reviewer.md als Schema definiert und werden bei der Validierung streng geprüft.
Die Kurs-Pipeline erzeugt interaktive HTML-Seiten in sieben Phasen. Zentral ist das Helpfulness-ScoringJedes Thema wird auf einer Skala 1-10 bewertet. Nur Themen über der zielgruppenspezifischen Schwelle (Dev: >=6) erhalten eine eigene Unterseite. in Phase 2: Es entscheidet autonom, welche Themen eine eigene Vertiefungsseite verdienen und welche als Absatz auf der Eltern-Seite bleiben.
Pro Zielgruppe läuft eine unabhängige Pipeline mit eigenem Tiefenprofil. Entwickler bekommen bis zu L3 (Tiefendetail), Anwender bis L2, Entscheider nur L1. Innerhalb einer Pipeline werden Themen und Sprachen (DE/EN) parallel gebaut.
Alle generierten Kurse verwenden das Energiekonzern-Design mit drei Primärfarben: Tiefenblau#000099 — für Navigation, Hero-Sektionen und Modulnummern (bei 12% Opacity). (#000099), Impuls-Orange#FE8F11 — für Akzente, Buttons, Links, Fortschrittsbalken und Deep-Dive-Links. (#FE8F11) und Warmgrau#E4DAD4 — für Borders, alternierenden Hintergrund (ungerade Module) und dezente Trennlinien. (#E4DAD4).
Die Typografie-Hierarchie nutzt Bricolage Grotesque für Headlines, DM Sans als Body-Schrift und JetBrains Mono für Code. Das CSS wird über Custom Properties gesteuert und ist vollständig in jeder HTML-Datei eingebettet — kein externer Build-Prozess nötig.
Im Kurs-Modus analysiert Claude die Codebase direkt und erzeugt HTML-Kurse. Im Verstehen-Modus entsteht nur der Knowledge Graph mit Dashboard. Der Kombiniert-Modus ist das Beste aus beiden: Erst wird der KG erzeugt, dann fließen dessen Daten in die Kurs-Erstellung ein.
Der entscheidende Vorteil des Kombiniert-Modus: KG-Daten wie Fan-in/Fan-outFan-in = Anzahl eingehender Edges (wie viele andere Dateien importieren diese). Fan-out = ausgehende Edges. Hoher Fan-in deutet auf eine Kern-Komponente hin., Layer-Zuordnung und Complexity-Ratings machen das Helpfulness-Scoring objektiver. Ein Node mit hohem Fan-in bekommt automatisch einen Relevanz-Bonus.
| Eigenschaft | Kurs-Modus | Verstehen-Modus | Kombiniert-Modus |
|---|---|---|---|
| Output | HTML-Kurse (L0-L3) | knowledge-graph.json + Dashboard | Beides |
| Phasen | Phase 0-6 | Phase 0-7 | Phase A0-A7, dann B0-B6 |
| Agenten | Keine (Claude direkt) | 8 spezialisierte Agenten | 8 Agenten + Claude direkt |
| HS-Scoring | Heuristik-basiert | Nicht relevant | KG-gestützt (objektiver) |
| KG-Bonus | Nicht verfügbar | Nicht relevant | +1 Complexity, +1 Fan-in, +1 Core-Layer, +1 Edge-Dichte |
| Schlüsselwörter | "Kurs", "Tutorial", "HTML" | "verstehen", "graph", "dashboard" | "beides", "kombiniert", "alles" |
Der Learning Skill ist modular aufgebaut. Neue Programmiersprachen werden als Markdown-Dateien in languages/ hinzugefügt (aktuell 23 Sprachen von C++ bis YAML). Framework-spezifische Regeln liegen in frameworks/ (10 Frameworks von Django bis Vue). Jede Datei erweitert das Wissen der Agenten, ohne dass skill.md geändert werden muss.
Neben den drei vordefinierten Zielgruppen (Anwender, Entwickler, Entscheider) können Custom-Zielgruppen mit eigenem Tiefenprofil definiert werden. Die Agent-Definitionen in agents/ sind ebenfalls erweiterbar — jeder Agent ist eine eigenständige Markdown-Datei mit YAML-Frontmatter und klarem Prompt-Template.
# Learning Skill v2.0 — Verzeichnisbaum
skill.md # Orchestrator + Regeln
agents/
project-scanner.md # Datei-Inventar
file-analyzer.md # Nodes + Edges extrahieren
architecture-analyzer.md # Layer-Erkennung
tour-builder.md # Lernpfade
graph-reviewer.md # Graph-Validierung
assemble-reviewer.md # Batch-Merge
domain-analyzer.md # Fachdomäne
knowledge-graph-guide.md # Dashboard
languages/ # 23 Sprach-Addenda
typescript.md python.md rust.md go.md ...
frameworks/ # 10 Framework-Addenda
react.md nextjs.md django.md spring.md ...