Interactive Slides MCP — Casos de uso, Instalar & Demo ao vivo

Por que usar

Principais recursos

Três modos: Slide Deck, Scroll Story, Interactive Deck
HTML independente — um arquivo, qualquer navegador
Animações GSAP, Google Fonts, Chart.js (CDN)
Navegação: teclado/clique/toque/deslize/roda de rolagem
Exportação opcional de .pptx via pptxgenjs

Demo ao vivo

Como fica na prática

interactive-slides-skill.replay ▶ pronto

0/0

Instalar

Escolha seu cliente

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "interactive-slides-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/sylvial928/interactive-slides",
        "~/.claude/skills/interactive-slides"
      ],
      "_inferred": true
    }
  }
}

Abra Claude Desktop → Settings → Developer → Edit Config. Reinicie após salvar.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "interactive-slides-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/sylvial928/interactive-slides",
        "~/.claude/skills/interactive-slides"
      ],
      "_inferred": true
    }
  }
}

Cursor usa o mesmo esquema mcpServers que o Claude Desktop. Config de projeto vence a global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "interactive-slides-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/sylvial928/interactive-slides",
        "~/.claude/skills/interactive-slides"
      ],
      "_inferred": true
    }
  }
}

Clique no ícone MCP Servers na barra lateral do Cline, depois "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "interactive-slides-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/sylvial928/interactive-slides",
        "~/.claude/skills/interactive-slides"
      ],
      "_inferred": true
    }
  }
}

Mesmo formato do Claude Desktop. Reinicie o Windsurf para aplicar.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "interactive-slides-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/sylvial928/interactive-slides",
        "~/.claude/skills/interactive-slides"
      ]
    }
  ]
}

O Continue usa um array de objetos de servidor em vez de um map.

~/.config/zed/settings.json

{
  "context_servers": {
    "interactive-slides-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/sylvial928/interactive-slides",
          "~/.claude/skills/interactive-slides"
        ]
      }
    }
  }
}

Adicione em context_servers. Zed recarrega automaticamente ao salvar.

claude mcp add interactive-slides-skill -- git clone https://github.com/sylvial928/interactive-slides ~/.claude/skills/interactive-slides

Uma linha só. Verifique com claude mcp list. Remova com claude mcp remove.

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.

Pré-requisitos

Node + pptxgenjs (opcional, apenas para exportação .pptx) — npm i -g pptxgenjs
Habilidade instalada — git clone em ~/.claude/skills/interactive-slides

Fluxo

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
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
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

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
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

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
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

Ferramenta	Entradas	Quando chamar	Custo
/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.

As dependências de CDN significam que os destinatários precisam de rede para visualizar animações. Para demonstrações sem ar, solicite uma compilação embutida.
Os decks interativos armazenam o estado em localStorage; observe se o baralho será compartilhado publicamente.

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

Alternativa	Quando usar	Troca
mck-ppt-design-skill	Você deseja slides .pptx em estilo de consultoria, não HTML	Menos interativo; mais polimento deslizante
mermaid-skill	Você precisa de diagramas, não de um deck	Artefato diferente
markmap-mcp-server	Um mapa mental cabe melhor do que um baralho	Formato narrativo diferente

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills