Skills

explain-diff-html: Skill do Claude Code que transforma PRs e diffs de código em uma página HTML de explicação

Ideal quando você quer transformar um PR ou diff de código em uma página HTML de explicação autocontida no Claude Code; requer ambiente POSIX shell (Linux/macOS ou WSL/Git Bash), git e, para PRs, o gh autenticado — as páginas geradas ficam salvas em code-explanations no diretório home.

Official source · explain-diff-html

Install

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

Para quem é

  • Para quem quer entender rapidamente uma alteração de código no Claude Code: por exemplo, ao assumir um repositório desconhecido, revisar o PR de outra pessoa, ou querer deixar para colegas uma explicação compartilhável de "o que exatamente mudou e por quê".
  • Transforma as alterações de código em uma página HTML de ensino autocontida, com saída fora do repositório, sem tocar no seu código.
  • Quando não é adequado: se você não trabalha no Claude Code, se precisa de PowerShell ou cmd.exe (oficialmente não suportados; apenas POSIX shell funciona), ou se quer modificar ou reverter código diretamente (ele apenas gera páginas de explicação). Cada execução requer git; explicar pull requests exige o gh autenticado (verifique com gh auth status); páginas com diagramas Mermaid carregam a biblioteca de um CDN, o que exige rede. Fora isso, não fazemos suposições sobre dependências ou limitações não declaradas oficialmente.

Primeira tentativa em 3 minutos

Pré-requisitos: Claude Code instalado, em Linux, macOS, ou WSL / Git Bash no Windows; git disponível na máquina.

Instalação: clone o repositório para o diretório global de skills do Claude Code (caminho principal oficial):

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

Se quiser usar apenas em um projeto específico, a documentação oficial indica clonar para <your-repo>/.claude/skills/explain-diff-html.

Para a primeira tarefa, recomenda-se uma tentativa de baixo risco e somente leitura: inicie no Claude Code com uma frase em linguagem natural, como "explain PR 1234" (apontando para o PR de um repositório público que você não possa mesclar, apenas observando). Essa ação não exige nada além do gh, mas confirme primeiro que gh auth status passou.

Sinal de sucesso: o skill escreverá a página de explicação na pasta code-explanations do seu diretório home, com nome de arquivo no formato YYYY-MM-DD-<KEY>-explanation.html, e informará o caminho. Ver esse caminho e o arquivo HTML gerado significa que está concluído. Observação: páginas puramente de explicação de código podem ser abertas offline; se a página contiver diagramas de estado ou de sequência em Mermaid, é preciso estar conectado para renderizar os gráficos.

A documentação oficial apenas informa que o comando é POSIX shell; não informa se lê ou grava outros arquivos, quais comandos internos executa ou quais endpoints de rede acessa — esses comportamentos são desconhecidos.

Casos de uso

Caso 1: entender um PR. Cenário: você quer compreender uma alteração em um repositório open source com o qual não está familiarizado. No Claude Code, diga "explain PR 1234". O skill segue seu fluxo de explicação de PR e gera uma página HTML explicando a lógica da alteração. O resultado esperado é uma página nomeada com a data em $HOME/code-explanations; o pré-requisito é que o gh esteja autenticado. Se a página contém diagramas Mermaid depende da alteração em si; se contiver, é preciso estar online para abrir.

Caso 2: entender um diff local. Cenário: você acabou de fazer ou puxar um commit no repositório e quer explicar à equipe o que mudou. No Claude Code, use linguagem natural para pedir a explicação da alteração. O que se pode confirmar é que ele produz o mesmo tipo de página HTML de ensino autocontida, gravada no mesmo diretório code-explanations com o caminho relatado; a documentação oficial não lista o comando exato para diffs locais, então o que está confirmado vai até "descrever a alteração em uma frase em linguagem natural" — a frase exata de acionamento deve seguir o README do repositório.

Limites de uso

  • Arquivos e rede: grava o HTML gerado em $HOME/code-explanations (deliberadamente fora do repositório) e não grava nada no seu repositório; quando a página contém diagramas Mermaid, carrega a biblioteca de um CDN e exige rede. Fora isso, se lê ou grava outros arquivos e quais comandos executa não foi especificado oficialmente.
  • Pontos de confirmação: antes de explicar um PR, execute gh auth status para confirmar a autenticação; a geração cria novos arquivos HTML, e usuários que se importem com isso devem estar cientes antes de iniciar.
  • Ambiente de execução: funciona diretamente em Linux e macOS; no Windows é necessário WSL ou Git Bash; PowerShell e cmd.exe não são suportados. Cada execução requer git; o cenário de PR exige o gh autenticado; renderizar diagramas Mermaid requer node via npx.
  • Limitações oficiais: a saída é sempre gravada na pasta code-explanations do diretório home; a página é autocontida e funciona offline, exceto pelo CDN do Mermaid.
  • Informações não confirmadas: a documentação oficial não informa quais idiomas de texto ele suporta, nem se funciona em outros agentes além do Claude Code; consulte a documentação mais recente do repositório em vez de deduzir pela lista de clientes.