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

Por qué usarlo

Características clave

Tres modos: presentación de diapositivas, historia de desplazamiento, presentación interactiva
HTML autónomo: un archivo, cualquier navegador
Animaciones GSAP, Google Fonts, Chart.js (CDN)
Navegación: teclado / clic / toque / deslizar / rueda de desplazamiento
Exportación .pptx opcional a través de pptxgenjs

Demo en vivo

Cómo se ve en la práctica

interactive-slides-skill.replay ▶ listo

0/0

Instalar

Elige tu 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
    }
  }
}

Abre Claude Desktop → Settings → Developer → Edit Config. Reinicia después de guardar.

~/.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 el mismo esquema mcpServers que Claude Desktop. La configuración del proyecto prevalece sobre la 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
    }
  }
}

Haz clic en el icono MCP Servers de la barra lateral de Cline y luego en "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
    }
  }
}

Mismo formato que Claude Desktop. Reinicia 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"
      ]
    }
  ]
}

Continue usa un array de objetos de servidor en lugar de un mapa.

~/.config/zed/settings.json

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

Añádelo a context_servers. Zed recarga en caliente al guardar.

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

Un solo comando. Verifica con claude mcp list. Quita con claude mcp remove.

Casos de uso

Usos del mundo real: Interactive Slides

Convierta una página en una plataforma para inversores

👤 Fundadoras y PMs construyendo parcelas. ⏱ ~30 min beginner

Cuándo usarlo: Tienes el contenido; Quieres la forma de una plataforma real en minutos.

Requisitos previos

Nodo + pptxgenjs (opcional, solo para exportación .pptx) — npm i -g pptxgenjs
Habilidad instalada — git clone en ~/.claude/skills/interactive-slides

Flujo

Invocar la habilidad

/diapositivas interactivas - modo: Cubierta de diapositivas. Contenido: <una página>. Tema: mínimo oscuro.✓ Copiado

→ Genera deck.html; se abre en el navegador
Iterar secciones

Agregue una sección de 'Tracción' con un gráfico de líneas para MRR.✓ Copiado

→ Gráfico de líneas Chart.js representado dentro de una diapositiva
Exportar .pptx

Exportar como tono.pptx.✓ Copiado

→ .pptx editable guardado; texto totalmente editable en PowerPoint

Resultado: Una plataforma que puedes hacer una demostración hoy y enviarla por correo electrónico como .pptx mañana.

Errores comunes

El .pptx exportado carece de animaciones — Las animaciones HTML no son de ida y vuelta; mantenga el HTML para charlas en vivo, .pptx para transferencias

Combinar con: mcp-echarts

Construye un explicador de historias en pergamino

👤 Redactores técnicos y especialistas en marketing. ⏱ ~60 min intermediate

Cuándo usarlo: Quieres una pieza de formato largo de estilo medio con imágenes activadas por desplazamiento.

Flujo

Elige el modo

Modo: Historia de desplazamiento. Contenido: este artículo. Agregue gráficos y elementos visuales activados por desplazamiento.✓ Copiado

→ La salida es una página de desplazamiento con secciones fijadas por GSAP
Sintonizar el ritmo

Reduzca la velocidad del desplazamiento del pin en la sección "Problema".✓ Copiado

→ Línea de tiempo de limpieza ajustada

Resultado: Un pergamino atractivo que tus lectores realmente terminan.

Errores comunes

Sobrecarga de efectos — Una animación por sección; el descanso debe ser tranquilo

Plataforma de demostración interactiva para un taller

👤 Educadoras y talleres de desarrollo de DevRel. ⏱ ~90 min intermediate

Cuándo usarlo: Quieres diapositivas con pequeños ejercicios interactivos en línea.

Flujo

Modo: Interactivo

Modalidad: Baraja Interactiva. Incruste un campo de entrada + Chart.js que se actualice en vivo.✓ Copiado

→ Elemento interactivo cableado; actualizaciones de gráficos en la entrada
Agregar encuesta

Agregue una diapositiva de "elija uno" que registre los clics localmente y contabilice.✓ Copiado

→ Actualizaciones de contadores solo locales al hacer clic

Resultado: Una plataforma con sensación de vida sin backend.

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

interactive-slides-skill + mcp-echarts

Producir gráficos a través de ECharts e incrustarlos en la plataforma

Represente el gráfico de ingresos con mcp-echarts como SVG; incrustar en la corredera 'Tracción'.✓ Copiado

interactive-slides-skill + claude-code-design-skills

Aplicar fichas de marca al tema del mazo

Utilice las fichas de marca superior para la paleta y el tipo de mazo.✓ Copiado

interactive-slides-skill + magic-ui-mcp

Seleccione componentes de interfaz de usuario para el modo Interactive Deck

Modo interactivo: utilice un marco de Magic UI para la diapositiva de logotipos de confianza.✓ Copiado

Herramientas

Lo que expone este MCP

Herramienta	Entradas	Cuándo llamar	Coste
/interactive-slides (SKILL)	mode + content + theme	Cada vez que necesites un mazo o una historia de contenido que ya tienes	0

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API: Ninguna
Tokens por llamada: Moderado: el contenido de la presentación es HTML
Monetario: Gratis
Consejo: Mantenga la prosa por diapositiva en menos de 80 palabras; De lo contrario, las cubiertas se hinchan rápidamente.

Seguridad

Permisos, secretos, alcance

Almacenamiento de credenciales: Ninguna

Salida de datos: GSAP, Google Fonts, Chart.js se cargan desde CDN. Si necesita estar completamente fuera de línea, solicite la habilidad para incorporar las bibliotecas.

Las dependencias de CDN significan que los destinatarios necesitan una red para ver las animaciones. Para demostraciones con espacio de aire, solicite una compilación en línea.
Las plataformas interactivas almacenan el estado en localStorage; tenga en cuenta si la plataforma se compartirá públicamente.

Resolución de problemas

Errores comunes y soluciones

Las diapositivas no avanzan con las teclas de flecha

Asegúrese de que el oyente del teclado esté vinculado; Algunos navegadores bloquean cuando el archivo HTML se entrega desde file://. Pruebe con un servidor local: python3 -m http.server.

Verificar: Open dev console; inspect keyup handler

.pptx exporta animaciones faltantes

Las animaciones son sólo HTML; .pptx exporta texto + diseño. Utilice HTML para vivir; .pptx para transferencia de correo electrónico.

Verificar: Open the .pptx in PowerPoint; check layout only

Las fuentes se ven mal sin conexión

Solicite a la habilidad que incorpore @font-face con URI de datos base64 para uso sin conexión.

Verificar: Open airplane-mode; load the HTML

Alternativas

Interactive Slides vs otros

Alternativa	Cuándo usarla	Contrapartida
mck-ppt-design-skill	Quiere diapositivas .pptx de estilo de consultoría, no HTML	Menos interactivo; más pulido deslizante
mermaid-skill	Necesitas diagramas, no una plataforma.	Artefacto diferente
markmap-mcp-server	Un mapa mental encaja mejor que una baraja	Forma narrativa diferente

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills