Interactive Slides MCP — Anwendungsfälle, Installieren & Live-Demo

Warum nutzen

Hauptfunktionen

Drei Modi: Slide Deck, Scroll Story, Interactive Deck
Eigenständiges HTML – eine Datei, jeder Browser
GSAP-Animationen, Google Fonts, Chart.js (CDN)
Navigation: Tastatur / Klicken / Berühren / Wischen / Scrollrad
Optionaler .pptx-Export über pptxgenjs

Live-Demo

In der Praxis

interactive-slides-skill.replay ▶ bereit

0/0

Installieren

Wählen Sie Ihren Client

~/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
    }
  }
}

Öffne Claude Desktop → Settings → Developer → Edit Config. Nach dem Speichern neu starten.

~/.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 nutzt das gleiche mcpServers-Schema wie Claude Desktop. Projektkonfiguration schlägt die globale.

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

Klicken Sie auf das MCP-Servers-Symbol in der Cline-Seitenleiste, dann "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
    }
  }
}

Gleiche Struktur wie Claude Desktop. Windsurf neu starten zum Übernehmen.

~/.continue/config.json

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

Continue nutzt ein Array von Serverobjekten statt einer 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"
        ]
      }
    }
  }
}

In context_servers hinzufügen. Zed lädt beim Speichern neu.

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

Einzeiler. Prüfen mit claude mcp list. Entfernen mit claude mcp remove.

Anwendungsfälle

Praxisnahe Nutzung: Interactive Slides

Verwandeln Sie einen One-Pager in ein Investorendeck

👤 Gründer und PMs erstellen Pitches ⏱ ~30 min beginner

Wann einsetzen: Sie haben den Inhalt; Sie möchten in wenigen Minuten die Form eines echten Decks haben.

Voraussetzungen

Node + pptxgenjs (optional, nur für .pptx-Export) — npm i -g pptxgenjs
Fertigkeit installiert — Git-Klon in ~/.claude/skills/interactive-slides

Ablauf

Rufen Sie die Fertigkeit auf

/interactive-slides – Modus: Slide Deck. Inhalt: <One-Pager>. Thema: minimal dunkel.✓ Kopiert

→ Erzeugt deck.html; wird im Browser geöffnet
Abschnitte iterieren

Fügen Sie einen Abschnitt „Traktion“ mit einem Liniendiagramm für MRR hinzu.✓ Kopiert

→ Das in einer Folie gerenderte Liniendiagramm von Chart.js
.pptx exportieren

Als pitch.pptx exportieren.✓ Kopiert

→ Bearbeitbare .pptx gespeichert; Text vollständig in PowerPoint bearbeitbar

Ergebnis: Ein Deck, das Sie heute vorführen und morgen als .pptx per E-Mail versenden können.

Fallstricke

Im exportierten .pptx fehlen Animationen — Bei HTML-Animationen gibt es kein Roundtrip; Behalten Sie den HTML-Code für Live-Vorträge und .pptx für Übergaben bei

Kombinieren mit: mcp-echarts

Erstellen Sie einen Scroll-Story-Erklärer

👤 Technische Redakteure und Vermarkter ⏱ ~60 min intermediate

Wann einsetzen: Sie möchten ein langes Stück im mittleren Stil mit durch Scrollen ausgelösten Bildern.

Ablauf

Wählen Sie den Modus

Modus: Scroll-Story. Inhalt: dieser Artikel. Fügen Sie durch Scrollen ausgelöste Diagramme und Grafiken hinzu.✓ Kopiert

→ Die Ausgabe ist eine scrollende Seite mit GSAP-angehefteten Abschnitten
Passen Sie das Tempo an

Verlangsamen Sie den Pin-Scroll im Abschnitt „Problem“.✓ Kopiert

→ Scrub-Zeitleiste angepasst

Ergebnis: Ein fesselndes Scroll-Stück, das Ihre Leser tatsächlich fertigstellen.

Fallstricke

Überladung mit Effekten — Eine Animation pro Abschnitt; Ruhe sollte ruhig sein

Interaktives Demo-Deck für einen Workshop

👤 Pädagogen und DevRel leiten Workshops ⏱ ~90 min intermediate

Wann einsetzen: Sie benötigen Folien mit kleinen interaktiven Inline-Übungen.

Ablauf

Modus: Interaktiv

Modus: Interaktives Deck. Betten Sie ein Eingabefeld + Chart.js ein, das live aktualisiert wird.✓ Kopiert

→ Interaktives Element verkabelt; Diagrammaktualisierungen bei Eingabe
Umfrage hinzufügen

Fügen Sie eine „Wählen Sie eine“-Folie hinzu, die Klicks lokal aufzeichnet und zusammenzählt.✓ Kopiert

→ Nur lokale Zähleraktualisierungen per Klick

Ergebnis: Ein Live-Feeling-Deck ohne Backend.

Kombinationen

Mit anderen MCPs für 10-fache Wirkung

interactive-slides-skill + mcp-echarts

Erstellen Sie Diagramme über ECharts und betten Sie sie in das Deck ein

Rendern Sie das Umsatzdiagramm mit mcp-echarts als SVG; in die Folie „Traction“ einbetten.✓ Kopiert

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

Wenden Sie Marken-Tokens auf das Deck-Thema an

Verwenden Sie die Token der Marke Acme für die Deckpalette und den Decktyp.✓ Kopiert

interactive-slides-skill + magic-ui-mcp

Wählen Sie ausgewählte UI-Komponenten für den Interactive Deck-Modus aus

Interaktiver Modus: Verwenden Sie eine Magic UI-Laufschrift für die Folie mit den Vertrauenslogos.✓ Kopiert

Werkzeuge

Was dieses MCP bereitstellt

Werkzeug	Eingaben	Wann aufrufen	Kosten
/interactive-slides (SKILL)	mode + content + theme	Immer wenn Sie ein Deck oder eine Scroll-Story aus Inhalten benötigen, die Sie bereits haben	0

Kosten & Limits

Was der Betrieb kostet

API-Kontingent: Keiner
Tokens pro Aufruf: Mäßig – der Inhalt des Decks ist HTML-lang
Kosten in €: Frei
Tipp: Beschränken Sie die Prosa pro Folie auf weniger als 80 Wörter. Ansonsten blähen sich Decks schnell auf.

Sicherheit

Rechte, Secrets, Reichweite

Credential-Speicherung: Keiner

Datenabfluss: GSAP, Google Fonts, Chart.js werden vom CDN geladen. Wenn Sie vollständig offline benötigen, bitten Sie den Skill, die Bibliotheken zu integrieren.

CDN-Abhängigkeiten bedeuten, dass Empfänger ein Netzwerk benötigen, um Animationen anzuzeigen. Fordern Sie für Air-Gap-Demos einen Inline-Build an.
Der Status des interaktiven Decks wird in localStorage gespeichert. Beachten Sie, ob das Deck öffentlich geteilt wird.

Fehlerbehebung

Häufige Fehler und Lösungen

Folien werden mit den Pfeiltasten nicht vorwärts bewegt

Stellen Sie sicher, dass der Tastatur-Listener gebunden ist. Einige Browser blockieren, wenn die HTML-Datei von file:// bereitgestellt wird. Versuchen Sie es mit einem lokalen Server: python3 -m http.server.

Prüfen: Open dev console; inspect keyup handler

.pptx exportiert fehlende Animationen

Animationen sind nur HTML; .pptx exportiert Text + Layout. Verwenden Sie HTML live; .pptx für die E-Mail-Übergabe.

Prüfen: Open the .pptx in PowerPoint; check layout only

Schriftarten sehen offline falsch aus

Bitten Sie den Skill, @font-face mit Base64-Daten-URIs für die Offline-Verwendung einzubetten.

Prüfen: Open airplane-mode; load the HTML

Alternativen

Interactive Slides vs. andere

Alternative	Wann stattdessen	Kompromiss
mck-ppt-design-skill	Sie benötigen .pptx-Folien im Beratungsstil, kein HTML	Weniger interaktiv; mehr Gleitlack
mermaid-skill	Sie benötigen Diagramme, kein Deck	Anderes Artefakt
markmap-mcp-server	Eine Mindmap passt besser als ein Deck	Andere Erzählform

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen