---
name: html-explainer
description: >-
Explicar, documentar ou demonstrar algo entregando UM arquivo .html com o conteúdo
separado em ABAS (tabs), tema escuro, Bootstrap 5 por CDN, destaque de sintaxe
automático e botão de copiar em cada bloco de código — em vez de responder com
Markdown, README ou .md solto. Use ao pedir "explica isso", "monta um documento",
"faz um relatório/guia/tutorial/comparativo/apresentação", "documenta essa API",
"me manda um HTML", "prefiro em abas", "sem markdown" — e sempre que a resposta
tiver mais de um eixo (visão geral × código × armadilhas, antes × depois, por
linguagem, por ambiente) e couber melhor em abas do que em rolagem infinita.
Cobre o template pronto, o markup ARIA correto de nav-tabs, deep-link da aba pela
URL, highlight.js/Prism por CDN, copiar-para-área-de-transferência com fallback
para file://, SRI, e um linter que valida o HTML gerado. NÃO use para páginas de
produto, app React, site com build/npm, ou quando o destino é um repositório que
espera Markdown (README, docs/, wiki).
license: MIT
metadata:
version: "1.0.0"
requires: "Nada. Zero dependência local — o HTML puxa tudo de CDN. Os scripts opcionais usam Node ≥ 18."
last-reviewed: "2026-07-29"
---
# Um arquivo, abas, tema escuro
> O entregável desta skill é **um único `.html`** que a pessoa salva, manda por anexo, abre com
> duplo clique e lê offline — sem servidor, sem `npm install`, sem pasta de assets. Todo o visual
> vem do Bootstrap 5 por CDN; o conteúdo vive em abas; o código sai destacado e com botão de copiar.
>
> A razão de existir: Markdown empilha tudo numa coluna infinita. Quando a explicação tem mais de
> um eixo — a visão geral, o código, o passo a passo, as armadilhas, cada linguagem, cada ambiente —
> o leitor tem que rolar procurando. **Aba é o índice que não some da tela.**
## Quando usar
Sempre que o pedido for **explicar / documentar / demonstrar / comparar** algo para um humano ler, e
a resposta for maior que alguns parágrafos. Gatilhos diretos: "faz um documento", "monta um guia",
"me explica isso direito", "gera um HTML", "quero em abas", "não quero markdown", "manda um
relatório", "documenta essa API/esse fluxo/essa decisão".
**Não serve para:** página de produto ou landing, aplicação com estado (isso é React/Vue), site com
build, e o caso em que o arquivo vai virar `README.md` ou entrar em `docs/` de um repositório — lá o
formato esperado é Markdown mesmo. Na dúvida entre `.md` e `.html`: se é para **ler**, HTML; se é
para **versionar e revisar em PR**, Markdown.
## O procedimento — nesta ordem
**0. Ache a pasta desta skill.** Os scripts ficam em `scripts/`, ao lado deste `SKILL.md`. Nos
comandos abaixo ela aparece como `$SKILL` — **troque pelo caminho absoluto real**, porque ele muda
conforme o agente e o perfil (`~/.claude/skills/html-explainer`, `~/.claude-trabalho/skills/…`,
`~/.codex/skills/…`, `~/.copilot/skills/…`) e porque a variável não sobrevive de uma chamada de
shell para a outra. Se não souber o caminho:
```bash
for d in ~/.claude*/skills ~/.agents/skills ~/.codex/skills ~/.copilot/skills; do
[ -f "$d/html-explainer/SKILL.md" ] && printf '%s\n' "$d/html-explainer" && break
done
```
Nenhum comando abaixo depende da pasta em que você está — os scripts resolvem o próprio caminho.
**1. Copie o template. Não escreva do zero.**
```bash
node "$SKILL/scripts/new-doc.mjs" "Título do documento" ./saida.html
```
Ou simplesmente leia `assets/template.html` e reproduza. O template já traz: ``, as tags de CDN com SRI conferido, o CSS mínimo, a estrutura de abas com ARIA
correta e o bloco `