wlsdnen/explainer-page

Criação de Página de Explicação

Quando usar

• Para criar uma nova página de explicação (HTML único ou pasta).
• Para reformular significativamente a estrutura, figuras ou texto de uma página de explicação existente.

Se a pasta do projeto ou página contiver um arquivo CLAUDE.md, suas regras têm precedência sobre este skill.

Idioma de saída

O idioma padrão de saída é coreano (formal, lang="ko"). Se o usuário solicitar outro idioma ou o CLAUDE.md do projeto definir um, escreva nesse idioma e ajuste o atributo lang, a pilha de fontes e as regras de estilo (references/writing.md) de acordo. As demais regras aplicam-se independentemente do idioma.

Resultado

• Um único index.html autocontido, sem etapa de build (CSS/JS inline). Clipes de vídeo ou imagens, se houver, vão na mesma pasta.
• Bibliotecas externas são carregadas via CDN com versão exata fixada. Se for necessário usar off-line, os arquivos são colocados na pasta (vendoring) e carregados por caminho relativo. Pergunte ao usuário qual opção usar ou registre a escolha no CLAUDE.md da pasta da página.

Etapas de trabalho

1. Coleta de dados e verificação de fatos

• Abra e leia diretamente o artigo, vídeo, repositório de código ou blog/página técnica. Verifique alegações e números que serão usados na página nas fontes originais (tabelas, figuras, timestamps de aula, localizações no código, seções do blog). Se o blog citar um artigo, verifique preferencialmente no artigo original.
• Crie uma lista de conceitos prévios necessários para entender o texto. Isso servirá de insumo para a próxima etapa de entrevista.

2. Entrevista sobre o nível do leitor (obrigatório antes da estruturação)

• Use AskUserQuestion (multiseleção) para perguntar, para cada conceito prévio, se o usuário 'sabe', 'está em dúvida' ou 'não sabe'. Se AskUserQuestion não estiver disponível, faça a mesma pergunta em texto.
• Aprofunde as perguntas com base nas respostas. Continue até que o nível necessário para compreensão do texto seja determinado.
• Registre os resultados no CLAUDE.md da pasta da página, em uma seção ## Nível do leitor, por conceito. Em revisões futuras, leia esse registro e mantenha o mesmo nível. Ao publicar a página, não suba o CLAUDE.md.
• Reflexo no texto:
  • Não sabe: explique no corpo do texto.
  • Em dúvida: coloque em uma caixa de revisão curta (<details>).
  • Sabe: omita a explicação.

3. Estruturação

• Defina primeiro o fluxo da página e os títulos das seções (frases que expressam a tese). Para cada seção, decida quais figuras (animação, imagem estática, slider) e clipes de vídeo demonstrarão a tese.
• Se o tema envolver dados, modelo e avaliação, inclua na estrutura da seção o fluxo desde os dados até as métricas de avaliação.
• Detalhes: references/writing.md, references/visuals.md.

4. Redação

• Em um único index.html, com CSS/JS inline. Separe a lógica de cálculo em scripts sem DOM.
• Se houver fonte de vídeo, recorte clipes para cada trecho explicativo.
• Detalhes: references/writing.md, references/visuals.md, references/style.md.

5. Verificação

• Execute scripts/check_page.py para verificar vazamento horizontal em 375, 768 e 1280px, erros no console e tamanho de toque do primeiro [data-widget].
• Verifique todos os controles, animações e a lógica de cálculo (check.mjs).
• Comando: references/verify.md.

Regras essenciais

• Fatos: escreva apenas alegações e números do artigo verificados na fonte original. Todo número deve ter uma etiqueta (artigo/blog/aula/cálculo/exemplo).
• Estrutura: título + resumo de uma linha → seções → armadilhas/equivocos → fontes. h2 é a frase da tese.
• Dentro da seção: 1–2 frases sobre o que será visto → figura → breve explicação do porquê. Deduções e exceções vão em <details>.
• Fórmulas: não a derivação completa, mas o papel de cada termo e o conceito central.
• Figuras: apenas aquelas que permitem ao leitor verificar a tese diretamente. Padrão: animação em reprodução automática (com play/pause e voltar ao início).
• Estilo: formal (no idioma padrão), no máximo 3 frases por parágrafo, no máximo uma metáfora por seção.
• Design: defina novo design para cada página, de acordo com o tema (proibido copiar páginas existentes). Requisitos fixos: apenas modo claro (color-scheme: light), cores gerenciadas em variáveis CSS.

Checklist de conclusão

• A pasta da página tem CLAUDE.md com seção ## Nível do leitor.
• Conceitos marcados como 'não sabe' estão explicados no corpo do texto.
• Conceitos marcados como 'em dúvida' têm caixa de revisão <details>.
• Todo h2 é uma frase de tese.
• Todo número tem etiqueta, e números de artigo/blog foram verificados na fonte original.
• Toda fórmula explica o papel de cada termo.
• Se houver dados, modelo e avaliação, há um fluxo com figuras que vai de limpeza de dados → formato de entrada/saída → processamento interno do modelo → saída → perda/treinamento → métricas de avaliação.
• Não há figuras decorativas; o fenômeno é visível imediatamente no valor padrão dos controles; há uma linha de instrução abaixo da figura.
• Se houver fonte de vídeo, há clipes por trecho e legendas no idioma de saída (ex.: .ko.vtt).
• Há uma lista de fontes no final (links para artigo, vídeo, repositório de código, blog/página).
• Atributo lang, viewport, <title>, color-scheme: light, cores gerenciadas em variáveis CSS.
• Layout e cores condizem com o tema; não copiou design de página existente.
• Passou em check_page.py; todos os controles e animações funcionam.
• Se houver lógica de cálculo, passou em node check.mjs.