Skills

explain-diff-html: Ein Claude-Code-Skill, der PRs und Code-Diffs in eine HTML-Erklärseite verwandelt

Ideal, wenn du in Claude Code einen PR oder Code-Diff in eine einzelne, in sich geschlossene HTML-Erklärseite verwandeln möchtest; benötigt wird vorab eine POSIX-Shell-Umgebung (Linux/macOS oder WSL/Git Bash) und git, für PRs zusätzlich ein authentifiziertes gh – die erzeugten Seiten landen unter code-explanations im Home-Verzeichnis.

Official source · explain-diff-html

Install

git clone https://github.com/malav2110/explain-diff-html.git ~/.claude/skills/explain-diff-html

Für wen geeignet

  • Geeignet für alle, die eine Code-Änderung in Claude Code schnell verstehen möchten: etwa beim Übernehmen eines unbekannten Repositories, beim Ansehen des PRs einer anderen Person, oder wenn man Kolleginnen und Kollegen eine teilbare Erläuterung hinterlassen will, was genau eine Änderung bewirkt und warum.
  • Das Skill verwandelt Code-Änderungen in eine einzelne, in sich geschlossene HTML-Lehrseite, die außerhalb des Repositories ausgegeben wird – dein Code bleibt unangetastet.
  • Nicht geeignet, wenn du nicht in Claude Code arbeitest, PowerShell oder cmd.exe brauchst (offiziell ausdrücklich nicht unterstützt, nur POSIX-Shell läuft) oder Code direkt ändern oder zurückrollen willst (es erzeugt nur Erklärseiten). Jeder Lauf benötigt git; für die Erklärung von Pull Requests ist ein authentifiziertes gh nötig (mit gh auth status prüfen). Seiten mit Mermaid-Diagrammen laden die Diagrammbibliothek über ein CDN, daher ist Internetzugang erforderlich. Über diese offiziell nicht genannten Abhängigkeiten oder Einschränkungen hinaus wird hier nichts spekuliert.

Erster Versuch in 3 Minuten

Voraussetzungen: Claude Code ist installiert, die Umgebung ist Linux, macOS oder WSL / Git Bash unter Windows; git ist auf dem Rechner vorhanden.

Installation: Das Repository in das globale skills-Verzeichnis von Claude Code klonen (offizieller Hauptpfad):

git clone https://github.com/malav2110/explain-diff-html.git \
  ~/.claude/skills/explain-diff-html

Wenn du es nur in einem bestimmten Projekt nutzen willst, lautet die offizielle Anweisung, es stattdessen nach <your-repo>/.claude/skills/explain-diff-html zu klonen.

Für die erste Aufgabe empfiehlt sich ein risikoarmer, nur lesender Versuch: In Claude Code mit einem natürlichsprachlichen Satz starten, z. B. „explain PR 1234“ (bezogen auf den PR eines öffentlichen Repositories, in dem du keine Merge-Rechte hast und nur lesend zuschaust). Für diesen Schritt ist außer gh keine weitere Einrichtung nötig, aber stelle vorher sicher, dass gh auth status erfolgreich ist.

Erfolgssignal: Das Skill schreibt die Erklärseite in den Ordner code-explanations in deinem Home-Verzeichnis, mit einem Dateinamen der Form YYYY-MM-DD-<KEY>-explanation.html, und meldet dir den Pfad. Wenn du diesen Pfad und die erzeugte HTML-Datei siehst, ist der Vorgang abgeschlossen. Hinweis: Eine reine Code-Erklärseite lässt sich offline öffnen; enthält die Seite Mermaid-Zustands- oder Sequenzdiagramme, wird zum Rendern der Grafiken eine Internetverbindung benötigt.

Offiziell ist nur angegeben, dass das Kommando POSIX-Shell ist; ob andere Dateien gelesen oder geschrieben werden, welche internen Kommandos ausgeführt oder welche Netzwerk-Endpunkte kontaktiert werden, ist nicht beschrieben – dieses Verhalten ist unbekannt.

Anwendungsfälle

Fall 1: Einen PR verstehen. Szenario: Du möchtest eine Änderung in einem dir unbekannten Open-Source-Repository nachvollziehen. Sage in Claude Code „explain PR 1234“. Das Skill durchläuft seinen PR-Erklärungsablauf und erzeugt eine HTML-Seite, die den logischen Ablauf dieser Änderung erklärt. Zu erwarten ist eine datumsbasiert benannte Seite unter $HOME/code-explanations; Voraussetzung ist ein authentifiziertes gh. Ob die Seite Mermaid-Diagramme enthält, hängt von der konkreten Änderung ab; sind Diagramme enthalten, wird zum Öffnen der Seite Internetzugang benötigt.

Fall 2: Einen lokalen Diff verstehen. Szenario: Du hast gerade in deinem Repository einen Commit erstellt oder gezogen und möchtest dem Team erklären, was er verändert hat. Bitte Claude Code in natürlicher Sprache, die Änderung zu erklären. Bestätigt ist, dass es eine gleichermaßen in sich geschlossene HTML-Lehrseite erzeugt, in denselben Ordner code-explanations schreibt und den Pfad meldet; die offiziellen Quellen nennen keinen konkreten Formulierungsvorschlag für lokale Diffs, daher ist nur bis „die Änderung in einem natürlichsprachlichen Satz beschreiben“ bestätigt – die genaue Auslöseformulierung richtet sich nach dem README des Repositories.

Grenzen der Nutzung

  • Dateien und Netzwerk: Die erzeugten HTML-Seiten werden nach $HOME/code-explanations geschrieben (bewusst außerhalb des Repositories), nicht in dein Repository; enthalten Seiten Mermaid-Diagramme, wird die Diagrammbibliothek über ein CDN geladen und ein Netzzugang benötigt. Abgesehen davon ist offiziell nicht angegeben, ob weitere Dateien gelesen oder geschrieben werden oder welche Kommandos ausgeführt werden.
  • Bestätigungspunkte: Führe vor der Erklärung eines PR gh auth status aus, um die Authentifizierung zu prüfen; der Erzeugungsschritt selbst legt neue HTML-Dateien an – wer Dateianlage vermeiden möchte, sollte das vor dem Start wissen.
  • Laufzeitumgebung: Linux und macOS funktionieren direkt, unter Windows ist WSL oder Git Bash erforderlich; PowerShell und cmd.exe werden ausdrücklich nicht unterstützt. Jeder Lauf benötigt git; im PR-Szenario ist ein authentifiziertes gh nötig; zum Prüfen von Mermaid-Diagrammen wird node über npx verwendet.
  • Offizielle Einschränkungen: Die Ausgabe wird fest in den Ordner code-explanations im Home-Verzeichnis geschrieben; die Seiten sind bis auf das Mermaid-CDN in sich geschlossen und offline nutzbar.
  • Unbestätigte Informationen: Offiziell ist nicht angegeben, welche Textsprachen unterstützt werden oder ob das Skill außerhalb von Claude Code auch in anderen Agents wirkt – hierfür gelten die aktuellen Dokumente im Repository, keine Rückschlüsse aus Client-Listen.