/ Diretório / Playground / Interactive Slides
← Todos os servidores ↗ GitHub
● Comunidade sylvial928 ⚡ Instantâneo

Interactive Slides

por sylvial928 · sylvial928/interactive-slides

Transforme o conteúdo em uma bela apresentação HTML animada e independente - Slide Deck, Scroll Story ou Interactive Deck - e, opcionalmente, exporte .pptx.

slides interativos é uma habilidade do Claude Code que produz um único arquivo HTML que você pode abrir em qualquer navegador. Três modos de apresentação (Slide Deck clássico, Scroll Story de formato longo, Deck interativo exploratório). GSAP + Google Fonts + Chart.js são carregados com CDN; A navegação por teclado/clique/toque/deslizar/rolar funciona imediatamente. A exportação opcional pptxgenjs produz um .pptx editável para que você possa entregá-lo a uma parte interessada que mora no PowerPoint.

▶ Ver demo 📦 Instalar 💡 Casos de uso

Por que usar

Principais recursos

Demo ao vivo

Como fica na prática

interactive-slides-skill.replay ▶ pronto
0/0

Instalação

Repositório do autor · Documentação oficial de Skills do Claude

Casos de uso

Usos do mundo real: Interactive Slides

Transforme uma página única em uma apresentação para investidores

👤 Fundadores e PMs elaborando argumentos de venda ⏱ ~30 min beginner

Quando usar: Você tem o conteúdo; você deseja o formato de um deck real em minutos.

Fluxo
  1. Invoque a habilidade
    /slides interativos — modo: Apresentação de slides. Conteúdo: <uma página>. Tema: escuro mínimo.✓ Copiado
    → Gera deck.html; abre no navegador
  2. Iterar seções
    Adicione uma seção 'Tração' com um gráfico de linhas para MRR.✓ Copiado
    → Gráfico de linhas Chart.js renderizado dentro de um slide
  3. Exportar .pptx
    Exporte como pitch.pptx.✓ Copiado
    → .pptx editável salvo; texto totalmente editável em PowerPoint

Resultado: Uma apresentação que você pode demonstrar hoje e enviar por e-mail como .pptx amanhã.

Armadilhas
  • O .pptx exportado não possui animações — As animações HTML não são de ida e volta; mantenha o HTML para palestras ao vivo, .pptx para transferências
Combine com: mcp-echarts

Crie um explicador de história em pergaminho

👤 Redatores técnicos e profissionais de marketing ⏱ ~60 min intermediate

Quando usar: Você quer uma peça longa de estilo médio com recursos visuais acionados por rolagem.

Fluxo
  1. Escolha o modo
    Modo: Rolar história. Conteúdo: este artigo. Adicione gráficos e recursos visuais acionados por rolagem.✓ Copiado
    → A saída é uma página de rolagem com seções fixadas pelo GSAP
  2. Ajustar o ritmo
    Diminua a velocidade da rolagem na seção 'Problema'.✓ Copiado
    → Cronograma de limpeza ajustado

Resultado: Um pergaminho envolvente que seus leitores realmente terminam.

Armadilhas
  • Sobrecarregando com efeitos — Uma animação por seção; o descanso deve ser tranquilo

Apresentação de demonstração interativa para um workshop

👤 Educadores e DevRel realizando workshops ⏱ ~90 min intermediate

Quando usar: Você quer slides com pequenos exercícios interativos embutidos.

Fluxo
  1. Modo: Interativo
    Modo: Deck Interativo. Incorpore um campo de entrada + Chart.js que seja atualizado ao vivo.✓ Copiado
    → Elemento interativo com fio; atualizações do gráfico na entrada
  2. Adicionar enquete
    Adicione um slide 'escolha um' que registre os cliques localmente e faça a contagem.✓ Copiado
    → Atualizações de contador apenas locais com clique

Resultado: Um deck ao vivo sem back-end.

Combinações

Combine com outros MCPs para 10× de alavancagem

interactive-slides-skill + mcp-echarts

Produza gráficos via ECharts e incorpore-os no deck

Renderize o gráfico de receita com mcp-echarts como SVG; incorporar no slide 'Tração'.✓ Copiado
interactive-slides-skill + claude-code-design-skills

Aplique tokens de marca ao tema do deck

Use os tokens da marca acme para a paleta e o tipo do deck.✓ Copiado
interactive-slides-skill + magic-ui-mcp

Escolha componentes de UI para o modo Interactive Deck

Modo interativo: use um letreiro Magic UI para o slide dos logotipos de confiança.✓ Copiado

Ferramentas

O que este MCP expõe

FerramentaEntradasQuando chamarCusto
/interactive-slides (SKILL) mode + content + theme Sempre que você precisar de um baralho ou história de pergaminho de conteúdo que você já possui 0

Custo e limites

O que custa rodar

Cota de API
Nenhum
Tokens por chamada
Moderado – o conteúdo do deck é HTML
Monetário
Livre
Dica
Mantenha a prosa por slide com menos de 80 palavras; caso contrário, os decks incham rapidamente.

Segurança

Permissões, segredos, alcance

Armazenamento de credenciais: Nenhum
Saída de dados: GSAP, Google Fonts, Chart.js são carregados do CDN. Se você precisar estar totalmente offline, peça à habilidade para incorporar as bibliotecas.

Solução de problemas

Erros comuns e correções

Os slides não avançam nas teclas de seta

Certifique-se de que o ouvinte do teclado esteja vinculado; alguns navegadores bloqueiam quando o arquivo HTML é veiculado em file://. Experimente um servidor local: python3 -m http.server.

Verificar: Open dev console; inspect keyup handler
.pptx exporta animações ausentes

As animações são apenas HTML; .pptx exporta texto + layout. Use HTML para live; .pptx para transferência de e-mail.

Verificar: Open the .pptx in PowerPoint; check layout only
As fontes parecem erradas off-line

Peça a habilidade para incorporar @font-face com URIs de dados base64 para uso offline.

Verificar: Open airplane-mode; load the HTML

Alternativas

Interactive Slides vs. outros

AlternativaQuando usarTroca
mck-ppt-design-skillVocê deseja slides .pptx em estilo de consultoria, não HTMLMenos interativo; mais polimento deslizante
mermaid-skillVocê precisa de diagramas, não de um deckArtefato diferente
markmap-mcp-serverUm mapa mental cabe melhor do que um baralhoFormato narrativo diferente

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills