Skills

explain-diff-html : le Skill Claude Code qui transforme les PR et les diffs de code en une page HTML d'explication

Idéal pour transformer une PR ou un diff de code en une page HTML d'explication autonome dans Claude Code ; nécessite au préalable un environnement shell POSIX (Linux/macOS ou WSL/Git Bash), git, et gh authentifié pour les PR ; les pages générées sont enregistrées dans code-explanations du répertoire personnel.

Official source · explain-diff-html

Install

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

Pour qui

  • Pour quiconque souhaite comprendre rapidement une modification de code dans Claude Code : par exemple en reprenant un dépôt inconnu, en examinant la PR de quelqu'un d'autre, ou en voulant laisser aux collègues une explication partageable de « ce qui a changé et pourquoi ».
  • L'outil transforme les modifications de code en une page HTML pédagogique autonome, écrite en dehors du dépôt, sans toucher à votre code.
  • Cas non adaptés : si vous ne travaillez pas dans Claude Code, si vous avez besoin de PowerShell ou de cmd.exe (officiellement non pris en charge, seul un shell POSIX fonctionne), ou si vous voulez modifier ou annuler directement du code (il génère uniquement des pages d'explication). Chaque exécution nécessite git ; expliquer une pull request nécessite gh authentifié (vérifiez avec gh auth status) ; les pages avec diagrammes Mermaid chargent la bibliothèque depuis un CDN, ce qui exige une connexion réseau. Au-delà de cela, aucune dépendance ni limite non documentée officiellement n'est conjecturée ici.

Premier essai en 3 minutes

Prérequis : Claude Code installé, environnement Linux, macOS, ou WSL / Git Bash sous Windows ; git disponible sur la machine.

Installation : clonez le dépôt dans le répertoire global des skills de Claude Code (chemin officiel principal) :

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

Si vous souhaitez l'utiliser uniquement dans un projet précis, la documentation officielle indique de le cloner plutôt dans <your-repo>/.claude/skills/explain-diff-html.

Pour la première tâche, privilégiez une tentative à faible risque en lecture seule : lancez dans Claude Code une phrase en langage naturel, par exemple « explain PR 1234 » (en pointant vers la PR d'un dépôt public que vous ne pouvez pas fusionner et que vous observez simplement en lecture). Cette action ne nécessite rien de plus que gh, mais vérifiez d'abord que gh auth status passe.

Signal de succès : le skill écrit la page d'explication dans le dossier code-explanations de votre répertoire personnel, avec un nom de fichier de la forme YYYY-MM-DD-<KEY>-explanation.html, et vous communique le chemin. Voir ce chemin et le fichier HTML généré signifie que c'est terminé. À noter : une page d'explication purement textuelle s'ouvre hors ligne ; si la page contient des diagrammes Mermaid (états, séquences, etc.), une connexion internet est nécessaire pour les afficher.

La documentation officielle précise uniquement que ses commandes sont en shell POSIX ; elle ne dit pas s'il lit ou écrit d'autres fichiers, quelles commandes internes il exécute ni quels points d'accès réseau il consulte — ces comportements sont inconnus.

Cas d'usage

Cas n°1 : comprendre une PR. Situation : vous voulez comprendre une modification dans un dépôt open source qui vous est peu familier. Dans Claude Code, dites « explain PR 1234 ». Le skill suit son flux d'explication de PR et génère une page HTML qui explique la logique de la modification. Résultat attendu : une page nommée par date sous $HOME/code-explanations, à condition que gh soit authentifié. Quant à savoir si la page contient des diagrammes Mermaid, cela dépend de la modification elle-même ; le cas échéant, une connexion est requise à l'ouverture.

Cas n°2 : comprendre un diff local. Situation : vous venez de committer ou de récupérer une validation dans votre dépôt et voulez expliquer clairement à votre équipe ce qu'elle change. Dans Claude Code, demandez en langage naturel d'expliquer cette modification. Ce qui est confirmé : il produit le même type de page HTML pédagogique autonome, écrite dans le même répertoire code-explanations, et communique le chemin ; la documentation officielle ne donne pas la formulation exacte de la commande pour un diff local, donc tout ce qui est confirmable s'arrête à « décrire la modification en une phrase en langage naturel » ; pour la formulation de déclenchement exacte, référez-vous au README du dépôt.

Limites d'usage

  • Fichiers et réseau : il écrit le HTML généré dans $HOME/code-explanations (délibérément en dehors du dépôt), sans rien écrire dans votre dépôt ; si la page contient des diagrammes Mermaid, la bibliothèque est chargée depuis un CDN, ce qui exige du réseau. Au-delà de cela, la documentation officielle ne précise ni s'il lit ou écrit d'autres fichiers, ni quelles commandes il exécute.
  • Points de vérification : avant d'expliquer une PR, lancez gh auth status pour confirmer l'authentification ; la génération crée elle-même un fichier HTML — les utilisateurs sensibles à la création de fichiers devraient en avoir conscience avant de lancer l'opération.
  • Environnement d'exécution : Linux et macOS fonctionnent directement, Windows nécessite WSL ou Git Bash ; PowerShell et cmd.exe sont explicitement non pris en charge. Chaque exécution nécessite git ; le cas PR nécessite gh authentifié ; la validation des diagrammes Mermaid passe par node via npx.
  • Limites officielles : la sortie est toujours écrite dans le dossier code-explanations du répertoire personnel ; hormis le CDN Mermaid, la page est autonome et consultable hors ligne.
  • Informations non confirmées : la documentation officielle ne précise pas quelles langues textuelles sont prises en charge, ni si l'outil fonctionne avec d'autres agents que Claude Code ; reportez-vous à la documentation la plus récente du dépôt, sans déduire quoi que ce soit d'une liste de clients.