frontend-slides (Claude Skill) — Installieren & Live-Demo

Warum nutzen

Hauptfunktionen

Folien sind HTML — versionierbar, diffbar
CSS-Übergänge und Animationen (keine fragilen Keynote-Dateien)
Code-Snippets mit korrektem Syntax-Highlighting
Responsive — funktioniert von Laptop → Projektor → Telefon
PDF-Export als Backup

Live-Demo

In der Praxis

bereit

Installieren

Wählen Sie Ihren Client

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

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

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

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

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

Cursor nutzt das gleiche mcpServers-Schema wie Claude Desktop. Projektkonfiguration schlägt die globale.

VS Code → Cline → MCP Servers → Edit

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

Klicken Sie auf das MCP-Servers-Symbol in der Cline-Seitenleiste, dann "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

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

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

~/.continue/config.json

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

Continue nutzt ein Array von Serverobjekten statt einer Map.

~/.config/zed/settings.json

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

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

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

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

Anwendungsfälle

Praxisnahe Nutzung: frontend-slides

Aus einer Gliederung ein 20-Minuten-Tech-Talk-Deck bauen

👤 Entwickler, die bei Meetups / Konferenzen präsentieren ⏱ ~90 min intermediate

Wann einsetzen: Du hast eine Gliederung und 48 Stunden. Du willst nicht mit Keynote-Vorlagen kämpfen.

Voraussetzungen

Skill installiert — git clone https://github.com/zarazhangrui/frontend-slides ~/.claude/skills/frontend-slides
Gliederung in Markdown — Eine Datei mit Abschnittsüberschriften = Folien

Ablauf

Gerüst erstellen

Nutze frontend-slides. Aus /talks/outline.md ein Deck in /talks/deck/ generieren. Ein HTML-per-Folie-Muster, gemeinsames CSS.✓ Kopiert

→ Ordner mit index.html + Folie-Assets; öffnet sich im Browser
Code-Folien verfeinern

Für Code-Folien meinen eigentlichen Repo-Stil verwenden (schau auf src/example.ts). Syntax-Highlighting hinzufügen.✓ Kopiert

→ Code rendert mit korrektem Highlighting und deiner Formatierung
PDF-Backup

Als PDF exportieren für das „Projektor verbindet sich nicht“-Szenario.✓ Kopiert

→ PDF neben HTML gespeichert

Ergebnis: Ein Deck, das du mit git iterieren, auf GitHub Pages hosten und aus einem Browser präsentieren kannst.

Fallstricke

Venue-WLAN ist schlecht und das Deck hat Remote-Assets — Alles einbetten; vor dem Talk offline testen

Kombinieren mit: filesystem

Ein Demo-Deck, in dem Code + UI live in den Folien eingebettet sind

👤 Gründer, die einen Prototyp zeigen ⏱ ~120 min intermediate

Wann einsetzen: Du willst Folien, in denen du mitten im Deck tatsächlich mit dem Produkt interagieren kannst.

Ablauf

Layout

Ein 10-Folien-Pitch-Deck generieren. Auf Folie 4 einen iframe der Produktdemo einbetten. Auf Folie 7 einen live CodePen einbetten.✓ Kopiert

→ Deck enthält iframes an den richtigen Folien
Responsivität proben

Für einen 1024x768-Projektor neu rendern. Bricht etwas?✓ Kopiert

→ Breakpoint-Korrekturen angewendet

Ergebnis: Ein Deck, das sich nicht wie ein Deck anfühlt — es fühlt sich wie das Produkt an.

Fallstricke

Iframe CSP blockiert Einbettung — Demo unter einer Domain hosten, die Framing erlaubt, oder eine Aufzeichnung verwenden

Kombinationen

Mit anderen MCPs für 10-fache Wirkung

frontend-slides-skill + filesystem

Deck versionskontrolliert neben dem Repo verwalten

In /talks/2026-05-conf/ erstellen und committen.✓ Kopiert

frontend-slides-skill + github

Über GitHub Pages deployen

Deck auf einen gh-pages-Branch pushen und die URL zeigen.✓ Kopiert

Werkzeuge

Was dieses MCP bereitstellt

Werkzeug	Eingaben	Wann aufrufen
scaffold_deck	outline.md	Start jedes Decks
add_slide	title, content	Folie hinzufügen
pdf_export	deck/	Backup-Deliverable

Kosten & Limits

Was der Betrieb kostet

API-Kontingent: k. A.
Tokens pro Aufruf: Proportional zur Deck-Größe
Kosten in €: Kostenlos
Tipp: Erst das Gerüst generieren, dann Folie für Folie verfeinern statt in einem großen Durchlauf

Sicherheit

Rechte, Secrets, Reichweite

Minimale Scopes: filesystem-write

Credential-Speicherung: Keine

Datenabfluss: Keine; das Deck kann Remote-Assets referenzieren

Fehlerbehebung

Häufige Fehler und Lösungen

Übergänge funktionieren nicht in Safari

Browser-Kompatibilitätstabelle in den Skill-Docs prüfen; Standard-Konfiguration nutzt Vendor-Präfix-Properties

Code-Syntax-Highlighting fehlt

Gebündeltes Prism/Shiki erfordert Asset-Ladevorgang — sicherstellen, dass relative Pfade beim Hosting aufgelöst werden

PDF-Export ruiniert das Layout

Chrome Headless für den Druck verwenden — Standard des Skills ist Puppeteer mit Querformat-Voreinstellung

Alternativen

frontend-slides vs. andere

Alternative	Wann stattdessen	Kompromiss
reveal.js / Slidev	Du willst ein vollständiges Framework und bist bereit, es zu konfigurieren	Mehr Funktionen; mehr Einarbeitungszeit
Keynote / PowerPoint	Unternehmensumgebungen erfordern dateibasierte Decks	Nicht web-nativ; schwieriger zu teilen

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen