Skills

explain-diff-html: el Skill de Claude Code que convierte PR y diffs de código en una página HTML explicativa

Lo más adecuado cuando quieres convertir un PR o un diff de código en una página HTML autocontenida dentro de Claude Code; necesitas un shell POSIX (Linux/macOS o WSL/Git Bash), git, y para PRs un gh autenticado; las páginas se guardan en code-explanations dentro del directorio personal.

Official source · explain-diff-html

Install

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

Para quién es

  • Ideal para quien quiera entender rápidamente un cambio de código en Claude Code: por ejemplo, al tomar el relevo de un repositorio desconocido, revisar el PR de otra persona, o dejar a un compañero una explicación compartible de «qué cambió exactamente y por qué».
  • Convierte los cambios de código en una página HTML autocontenida de una sola página con fines didácticos, escrita fuera del repositorio, sin tocar tu código.
  • No es adecuado si no trabajas en Claude Code, necesitas PowerShell o cmd.exe (oficialmente no soportados; se requiere un shell POSIX), o quieres modificar o revertir código directamente (solo genera páginas de explicación). Cada ejecución necesita git; explicar un pull request requiere gh autenticado (compruébalo con gh auth status); las páginas con diagramas Mermaid cargan la librería desde un CDN y necesitan conexión a internet. Más allá de esto, no se especulará sobre dependencias o limitaciones no declaradas oficialmente.

Primer intento en 3 minutos

Requisitos previos: Claude Code instalado, entorno Linux, macOS, o WSL / Git Bash en Windows, y git en la máquina.

Instalación: clona el repositorio en el directorio global de skills de Claude Code (ruta principal oficial):

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

Si solo quieres usarlo en un proyecto concreto, la documentación oficial indica clonarlo en <your-repo>/.claude/skills/explain-diff-html.

Para la primera tarea se recomienda una prueba de bajo riesgo y de solo lectura: en Claude Code, lánzala con una frase en lenguaje natural, por ejemplo "explain PR 1234" (apuntando a un PR de un repositorio público que no puedas fusionar y solo observes). Esta acción no requiere nada más aparte de gh, pero antes verifica que gh auth status pase correctamente.

Señal de éxito: el skill escribe la página de explicación en la carpeta code-explanations de tu directorio personal, con un nombre de archivo como YYYY-MM-DD-<KEY>-explanation.html, y te informa de la ruta. Ver esa ruta y el archivo HTML generado indica que ha terminado. Nota: las páginas de explicación pura de código se abren sin conexión; si la página incluye diagramas de estado, secuencia u otros de Mermaid, se necesita internet para renderizarlos.

La documentación oficial solo indica que su comando es un shell POSIX; no especifica si lee o escribe otros archivos, qué comandos internos ejecuta ni a qué endpoints de red accede: esos comportamientos son desconocidos.

Casos de uso

Caso 1: entender un PR. Escenario: quieres conocer los cambios de un repositorio open source que no te resulta familiar. En Claude Code dices "explain PR 1234". El skill sigue su flujo de explicación de PR y genera una página HTML que explica la lógica del cambio. El resultado esperable es una página con nombre basado en la fecha en $HOME/code-explanations; el requisito es que gh esté autenticado. Que la página incluya diagramas Mermaid depende del propio cambio; si los incluye, hace falta conexión al abrir la página.

Caso 2: entender un diff local. Escenario: acabas de hacer o descargar un commit en tu repositorio y quieres explicárselo claramente a tu equipo. En Claude Code pídeselo en lenguaje natural. Lo confirmable es que generará el mismo tipo de página HTML didáctica autocontenida, la escribirá en el mismo directorio code-explanations y te informará de la ruta; la documentación oficial no lista una redacción concreta de comando para diffs locales, por lo que solo hasta "describir el cambio con una frase en lenguaje natural" es confirmable: para el disparador exacto, consulta el README del repositorio.

Límites de uso

  • Archivos y red: escribe el HTML generado en $HOME/code-explanations (deliberadamente fuera del repositorio), no en tu repositorio; cuando la página incluye diagramas Mermaid, carga la librería desde un CDN y necesita red. Aparte de esto, la documentación oficial no indica si lee o escribe otros archivos ni qué comandos ejecuta.
  • Puntos de confirmación: antes de explicar un PR, ejecuta gh auth status para verificar la autenticación; la generación crea archivos HTML nuevos, por lo que si te importa la creación de archivos debes saberlo antes de lanzarla.
  • Entorno de ejecución: Linux y macOS funcionan directamente; en Windows se necesita WSL o Git Bash; PowerShell y cmd.exe no están soportados. Cada ejecución requiere git; el escenario de PR requiere gh autenticado; verificar los diagramas Mermaid requiere node vía npx.
  • Limitaciones oficiales: la salida se escribe siempre en la carpeta code-explanations del directorio personal; la página es autocontenida y funciona sin conexión, salvo el CDN de Mermaid.
  • Información sin confirmar: la documentación oficial no indica qué idiomas de texto soporta ni si funciona con otros agentes además de Claude Code; consulta la documentación más reciente del repositorio y no lo infieras de listas de clientes.