● Comunidade
zarazhangrui
⚡ Instantâneo
frontend-slides
por zarazhangrui · zarazhangrui/frontend-slides
Gere apresentações nativas para web com o Claude — slides em HTML/CSS, transições reais, sem PowerPoint, compartilháveis via URL.
frontend-slides é um skill do Claude Code que produz decks de slides como sites HTML/CSS de página única. Cada slide é uma section; as transições são CSS; os trechos de código são renderizados corretamente; você hospeda em qualquer servidor estático. Ideal para tech talks, demos e pitches onde um deck para navegador é melhor que um arquivo para baixar.
Por que usar
Principais recursos
- Slides em HTML — versionáveis, com diff rastreável
- Transições e animações CSS (sem arquivos frágeis do Keynote)
- Trechos de código com syntax highlighting adequado
- Responsivo — funciona em laptop → projetor → celular
- Exportar para PDF como backup
Demo ao vivo
Como fica na prática
pronto
Casos de uso
Usos do mundo real: frontend-slides
Quando usar: Você tem um esboço e 48 horas. Não quer brigar com templates do Keynote.
Fluxo
-
Estruturar
Use frontend-slides. A partir de /talks/outline.md, gere um deck em /talks/deck/. Padrão de um HTML por slide, CSS compartilhado.✓ Copiado
→ Pasta com index.html + assets dos slides; abre no navegador
-
Polir slides de código
Para slides de código, use o estilo real do meu repositório (veja src/example.ts). Adicione syntax highlighting.✓ Copiado
→ Código renderizado com highlighting adequado e sua formatação
-
PDF de backup
Exporte para PDF para o cenário "o projetor não conecta".✓ Copiado
→ PDF salvo junto com o HTML
Resultado: Um deck que você pode iterar com git, hospedar no GitHub Pages e apresentar a partir de um navegador.
Armadilhas
- O WiFi do local é ruim e seu deck tem assets remotos — Embutir tudo inline; teste offline antes da apresentação
Quando usar: Você quer slides em que pode realmente interagir com o produto no meio da apresentação.
Fluxo
-
Layout
Gere um pitch deck de 10 slides. No slide 4, incorpore um iframe da demo do produto. No slide 7, incorpore um CodePen ao vivo.✓ Copiado
→ Deck com iframes nos slides certos
-
Testar responsividade
Renderize novamente para um projetor 1024x768. Algo quebra?✓ Copiado
→ Correções de breakpoint aplicadas
Resultado: Um deck que não parece um deck — parece o produto.
Armadilhas
- CSP do iframe bloqueia o embed — Hospede a demo em um domínio que permite framing, ou use uma gravação
Combinações
Combine com outros MCPs para 10× de alavancagem
Versionar o deck junto com o repositório
Estruture em /talks/2026-05-conf/ e faça commit.✓ Copiado
frontend-slides-skill +
githubPublicar via GitHub Pages
Faça push do deck para um branch gh-pages e me mostre a URL.✓ Copiado
Custo e limites
O que custa rodar
- Cota de API
- N/A
- Tokens por chamada
- Proporcional ao tamanho do deck
- Monetário
- Gratuito
- Dica
- Gere o esqueleto primeiro, depois polir slide por slide, em vez de uma única passagem grande
Segurança
Permissões, segredos, alcance
Escopos mínimos: filesystem-write
Armazenamento de credenciais: Nenhum
Saída de dados: Nenhum; seu deck pode referenciar assets remotos
Solução de problemas
Erros comuns e correções
Transições não funcionam no Safari
Verifique a tabela de compatibilidade do navegador na documentação do skill; a configuração padrão usa propriedades com prefixo
Syntax highlighting de código ausente
O Prism/Shiki embutido requer carregamento de assets — certifique-se que os caminhos relativos resolvem quando hospedado
Exportação para PDF distorce layouts
Use Chrome headless para impressão — o padrão do skill é Puppeteer com preset paisagem
Alternativas
frontend-slides vs. outros
| Alternativa | Quando usar | Troca |
|---|
| reveal.js / Slidev | Você quer um framework completo e está confortável para configurá-lo | Mais recursos; mais aprendizado |
| Keynote / PowerPoint | Ambientes corporativos exigem decks baseados em arquivo | Não é nativo para web; mais difícil de compartilhar |