Jedes externe Repository in einen interaktiven Kurs verwandeln

Kürzlich habe ich mich dabei ertappt, zu denken: Code mit neuronalen Netzen zu schreiben ist so einfach geworden, dass man leicht in eine Falle tappen kann. Man drückt ein paar Knöpfe, der Agent generiert ein funktionierendes Prototype von ein paar tausend Zeilen, alles scheint zu funktionieren, aber da ist eine Leere im Kopf. Wenn die App mit einem seltsamen Fehler abstürzt oder in einer endlosen Schleife von Fixes stecken bleibt, verblasst die Magie. Man muss sich in den Code vertiefen und herausfinden, wie dieser Stack tatsächlich funktioniert.

Normalerweise öffnet man Dateien eine nach der anderen, versucht einen Call-Graph im Kopf aufzubauen und verschwendet viel Zeit. Das Projekt codebase-to-course vom Entwickler Zara bietet einen anderen Ansatz. Es ist eine Erweiterung (ein Skill) für Claude Code, die jedes lokale Projekt nimmt und es in einem einzigen HTML-Dateiformat in einen schönen interaktiven Ein-Seiten-Kurs zusammenstellt.

Für wen ist es gedacht und warum

Der Projektautor richtet sich an sogenannte Vibe-Coder. Das sind Menschen, die Software durch Text-Prompts erstellen, ohne formelle Informatikausbildung. Wenn die Anwendung funktioniert, brauchen sie keine langweilige Theorie aus Universitätslehrbüchern. Sie müssen praktische Dinge verstehen:

• Wie man KI besser anleitet und fundierte architektonische Entscheidungen trifft.
• Wie man Halluzinationen und schlechte Muster im generierten Code frühzeitig erkennt.
• Welche Dateien man zuerst prüft, wenn der Assistant an eine Wand läuft.
• Wie man dieselbe Sprache wie Ingenieure spricht, ohne sich wie ein Außenseiter zu fühlen.

Das Tool ist jedoch nicht nur für Anfänger gedacht. Wenn Sie sich schnell in ein unbekanntes Open-Source-Projekt einarbeiten müssen oder einen Praktikanten in den Codebase Ihres Unternehmens einführen möchten, spart ein solcher interaktiver Leitfaden Stunden manueller Analyse.

Was Sie erhalten

Der Skill erzeugt ein eigenständiges HTML-Dokument. Es hat keine schweren externen Abhängigkeiten, erfordert keinen Build-Schritt oder lokalen Server. Öffnen Sie die Datei in einem Browser und beginnen Sie sofort mit dem Lernen des Projekts, sogar ohne Internetzugang.

Die Seite enthält mehrere interessante Mechaniken.

Synchrone Code-zu-Mensch-Übersetzung

Der Bildschirm ist in zwei Teile geteilt. Links steht der ursprüngliche Code-Schnipsel aus dem Repository ohne Vereinfachungen oder Kürzungen. Rechts erklärt eine zeilenweise Erklärung in einfacher Sprache, was passiert und warum diese Zeile existiert.

Dieser Ansatz hilft, abstrakte Syntax mit der Anwendungslogik zu verbinden. Sie sehen sofort, welches Fragment die Ereignisverarbeitung übernimmt und welches einfach die Antwort formatiert.

Animierte Diagramme und Datenfluss-Visualisierung

Statt langer Absätze, die die Architektur beschreiben, erzeugt der Kurs visuelle Blöcke. Zum Beispiel eine Datentransferkette zwischen Komponenten oder eine Simulation eines Service-zu-Service-Dialogs.

Der Autor hat eine klare Regel ins Design eingebettet: Jeder Bildschirm sollte mindestens zur Hälfte visuellen Inhalt haben, und Textblöcke sollten zwei bis drei Sätze nicht überschreiten. Wenn eine Verbindung mit einem Pfeil oder einer Zeitleiste gezeigt werden kann, wird der Text einfach nicht geschrieben.

Wissenstests zur Anwendung, nicht zum Auswendiglernen

Typische Quizze in Tutorials testen das Auswendiglernen von Begriffen. Das Konzept hier ist anders. Fragen simulieren echte Engineering-Aufgaben.

Sie werden nicht gefragt „Was ist ein State Manager." Stattdessen werden sie fragen: „Ein Benutzer hat gemeldet, dass der Filter beim Navigieren zwischen Seiten zurückgesetzt wird. Welche Datei würden Sie zuerst öffnen, um Änderungen vorzunehmen?" Das zwingt Sie dazu, über die Projektstruktur nachzudenken, anstatt mechanisch durch Optionen zu klicken.

Einblendbare Tooltips für Fachbegriffe

Wenn der Text spezifische Begriffe wie Hydration, Debounce oder Webhook enthält, können Sie mit der Maus darüber fahren, um eine kurze Erklärung zu sehen, ohne prätentiöse akademische Definitionen.

Das Seitendesign ist bewusst in warmen Tönen gehalten. Es gibt keine vertrauten lila Verläufe und Neon-Glühen, die fast alle modernen KI-Startups verunreinigen.

Wie der Skill intern funktioniert

Das Repository selbst ist überraschend kompakt. Es gibt kein schweres Python-Backend oder komplexe Pipelines. Die ganze Magie basiert auf klaren Prompts und Design-System-Spezifikationen für Claude Code:

codebase-to-course/
├── SKILL.md                          # Главные инструкции для агента
└── references/
    ├── design-system.md              # Токены стилей, сетка, типографика и цвета
    └── interactive-elements.md       # Паттерны квизов, анимаций и графики

Die SKILL.md-Datei weist das Modell an, welche Lehrmethodik es verwenden soll. Das Kernprinzip ist eine Umkehrung des traditionellen Lernens: Praxis und ein funktionierendes Projekt zuerst, dann die Mechanik-Aufschlüsselung. Die Anweisungen verbieten dem Modell auch strikt, Code aus dem Repository zu modifizieren oder zu vereinfachen. Kurs-Schnipsel müssen exakt mit den Projektdateien übereinstimmen, damit Entwickler das Projekt in einem Editor öffnen und das relevante Fragment sofort finden können.

Dateien im references-Ordner bieten ein fertiges Komponenten-Framework in reinem HTML, CSS und Vanilla JavaScript. Dies ermöglicht es Claude, eine saubere Oberfläche mit sanftem Scrollen und responsivem Layout zu generieren, ohne jedes Mal das Rad neu erfinden zu müssen.

So führen Sie ihn auf Ihrem Projekt aus

Um das Tool zu nutzen, benötigen Sie die Befehlszeilenschnittstelle Claude Code von Anthropic.

1. Klonen Sie das Repository oder kopieren Sie den Projektordner in das Skills-Verzeichnis:

cp -r codebase-to-course ~/.claude/skills/

2. Navigieren Sie im Terminal zu einem beliebigen Verzeichnis Ihres Projekts und starten Sie eine Claude-Code-Sitzung.

3. Schreiben Sie einen Befehl in natürlicher Sprache:

Turn this codebase into an interactive course

Formulierungen wie „Erkläre diesen Codebase interaktiv" oder „Bring mir bei, wie dieser Code funktioniert" funktionieren ebenfalls. Der Agent scannt die Repository-Dateien, identifiziert wichtige Knotenpunkte und generiert eine fertige HTML-Datei direkt im Stammverzeichnis.

Worauf Sie achten sollten

Die Idee, eine Architektur-Aufschlüsselung in eine eigenständige interaktive Datei zu verpacken, wirkt sehr frisch. In nur wenigen Tagen sammelte das Projekt über fünftausend Sterne auf GitHub, was auf eine hohe Nachfrage nach Tools hindeutet, die ein bedeutungsvolles Code-Verständnis ermöglichen.

Die Hauptlimitierung des Tools liegt im Kontextfenster und der Repository-Größe. Bei Projekten mit mehreren hunderttausend Zeilen kann das Modell physisch nicht alle Verbindungen berücksichtigen und konzentriert sich zwangsläufig nur auf die oberste Strukturebene oder den Einstiegspunkt. Für mittelgroße Bibliotheken, Microservices, Hobbyprojekte und typische Fullstack-Anwendungen ist dies jedoch ein ausgezeichneter Weg, um schnell externen Quellcode zu verstehen. Versuchen Sie, den Skill auf ein altes Projekt zu richten, das Sie lange nicht geöffnet haben—das Ergebnis wird Sie wahrscheinlich überraschen.