O que claude-skill-code-walkthrough faz?
Habilidade do Claude Code: gerar um tour educacional pelo código usando reveal.js com trechos de código, links para arquivos e diagramas de arquitetura Mermaid.
Como usar
Esta habilidade instrui o modelo Claude (via Claude Code) a criar uma apresentação reveal.js interativa que percorre a base de código de um projeto, destacando:
- Trechos de código com realce de sintaxe (parsing automático do idioma)
- Links para arquivos que abrem diretamente no repositório (ex:
[src/main.py](./src/main.py)) - Diagramas Mermaid para representar arquitetura, fluxos de dados ou hierarquia de componentes
Exemplo de uso em prompt
Crie um tour de código para este projeto usando reveal.js. Inclua:
- Uma visão geral da arquitetura com diagrama Mermaid
- Os 3 principais módulos com trechos de código
- Links para os arquivos correspondentes
- Animações de transição entre slides
Estrutura gerada
A apresentação segue a estrutura padrão do reveal.js:
- Slide 1: Título e descrição do projeto
- Slide 2: Visão geral da arquitetura (diagrama Mermaid)
- Slides seguintes: Módulo por módulo, com trechos de código, explicações e links
- Slide final: Resumo e próximos passos
Suporte a plataformas
- Claude Code (terminal)
- Claude Desktop (via skills)
- Qualquer ambiente que execute o Claude com suporte a skills
Dependências
reveal.js(para renderizar a apresentação) – recomendado usar via CDN- Opcional:
mermaidpara renderizar diagramas Mermaid diretamente nos slides
Personalização
Você pode modificar temas, animações e layout editando as opções do Reveal.initialize() no HTML gerado.
Nota: Esta skill não cria arquivos físicos no projeto, apenas gera o conteúdo HTML da apresentação para ser salvo ou visualizado.