/ Verzeichnis / Playground / frontend-slides
← Alle Server ↗ GitHub
● Community zarazhangrui ⚡ Sofort

frontend-slides

von zarazhangrui · zarazhangrui/frontend-slides

Web-native Präsentationsfolien mit Claude erstellen — HTML/CSS-Folien, echte Übergänge, kein PowerPoint, per URL teilbar.

frontend-slides ist ein Claude Code Skill, der Präsentationen als Single-Page-HTML/CSS-Sites erstellt. Jede Folie ist ein Abschnitt; Übergänge sind CSS; Code-Snippets werden korrekt dargestellt; du hostest auf jedem statischen Server. Gut für Tech-Talks, Demos und Pitches, bei denen ein Browser-zentriertes Deck besser ist als eine Datei zum Herunterladen.

▶ Demo ansehen 📦 Installieren 💡 Anwendungsfälle

Warum nutzen

Hauptfunktionen

Live-Demo

In der Praxis

bereit

Installation

Repository des Autors · Offizielle Dokumentation zu Claude Skills

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.

Ablauf
  1. 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
  2. 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
  3. 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
  1. 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
  2. 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

WerkzeugEingabenWann aufrufenKosten
scaffold_deck outline.md Start jedes Decks 0
add_slide title, content Folie hinzufügen 0
pdf_export deck/ Backup-Deliverable 0

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

AlternativeWann stattdessenKompromiss
reveal.js / SlidevDu willst ein vollständiges Framework und bist bereit, es zu konfigurierenMehr Funktionen; mehr Einarbeitungszeit
Keynote / PowerPointUnternehmensumgebungen erfordern dateibasierte DecksNicht web-nativ; schwieriger zu teilen

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen