frontend-slides

Überblick über die Skill frontend-slides

frontend-slides ist ein Claude-Code-Skill zum Erstellen von animierten HTML-Folien-Decks oder zum Konvertieren von PPT/PPTX-Dateien in browserfähige Präsentationen. Er eignet sich besonders für alle, die schnell ein poliertes Deck brauchen, aber weder CSS von Hand schreiben noch ein Framework aufsetzen oder sich bei Layout und Motion durchprobieren wollen. Die zentrale Aufgabe ist klar: aus grobem Content eine Präsentation machen, die bewusst gestaltet wirkt, ins Viewport-Raster passt und sich visuell iterieren lässt statt nur abstrakt beschrieben zu werden.

Für wen frontend-slides geeignet ist

Nutze den frontend-slides-Skill, wenn du Folien-Decks für Vorträge, Pitches, interne Demos, persönliche Portfolios oder eine PowerPoint-zu-Web-Konvertierung brauchst. Besonders nützlich ist er, wenn du Inhalte liefern kannst, aber noch keine finale visuelle Richtung hast, denn der Workflow ist auf visuelle Exploration und Stilfindung ausgelegt.

Was frontend-slides anders macht

frontend-slides setzt auf HTML ohne Abhängigkeiten, eigenständiges Styling und zwingende Viewport-Anpassung. Diese Kombination ist wichtig, wenn du portablen Output willst, der ohne Build-Schritt im Browser läuft, und wenn dir Präsentationsqualität wichtig ist, die nicht in generischen „AI-Slop“-Layouts endet. Der Skill ist stärker vorgegeben als ein normaler Prompt, weil er dich zu prägnanter Typografie, stimmigen Farbsystemen und disziplinierter Folie-für-Folie-Struktur führt.

Wann frontend-slides die falsche Wahl ist

Lass frontend-slides links liegen, wenn du nur eine schnelle Textzusammenfassung, einen tabellenartigen Bericht oder ein Deck brauchst, das ein komplexes PowerPoint-Interaktionsmodell unverändert beibehalten muss. Auch dann ist er nicht ideal, wenn du deine Botschaft nicht in folientaugliche Einheiten schneiden kannst, denn der Skill behandelt Überlauf als Inhaltsproblem und nicht als Scroll-Problem.

So verwendest du den Skill frontend-slides

frontend-slides installieren

Eine praktikable Installation von frontend-slides beginnt meist mit dem Marketplace-Setup in Claude Code:

/plugin marketplace add zarazhangrui/frontend-slides
/plugin install frontend-slides@frontend-slides

Wenn deine Umgebung mit manueller Skill-Ablage arbeitet, kopiere den Skill in dein Claude-Code-Skills-Verzeichnis und behalte die mitgelieferten Skripte daneben. Das Repository enthält außerdem ein .claude-plugin/-Manifest, das nützlich ist, wenn dein Installationsweg auf Marketplace-Metadaten basiert.

Gib ihm Eingaben, mit denen der Skill wirklich arbeiten kann

Starke Nutzung von frontend-slides beginnt mit Inhalt, nicht mit Adjektiven. Liefere:

• das Ziel der Präsentation
• die Zielgruppe
• die Länge des Decks
• eine Folienstruktur oder den Quelltext
• alle Branding-Vorgaben, die zwingend übernommen werden müssen
• ob du PPT/PPTX konvertierst oder neu von Grund auf erzeugst

Ein schwacher Prompt lautet: „Mach diese Präsentation modern.“
Ein stärkerer Prompt lautet: „Erstelle ein 7-Folien-Investor-Intro-Deck für ein B2B-Developer-Tool. Der Ton soll souverän und minimal sein, verwende dunkles Editorial-Styling, und behalte die drei Produktaussagen exakt so bei, wie sie formuliert sind.“

Lies zuerst die richtigen Dateien

Für die Arbeit an frontend-slides solltest du mit SKILL.md beginnen und dann diese Dateien prüfen:

• html-template.md für die grundlegende Folienstruktur
• STYLE_PRESETS.md für die richtungsgebenden Presets
• animation-patterns.md für Motion-Entscheidungen, die zum Ton passen
• viewport-base.css für die nicht verhandelbaren Fit-Regeln
• scripts/extract-pptx.py und scripts/export-pdf.sh, wenn du konvertierst oder exportierst

Diese Dateien sind wichtiger als ein kurzer Blick in die README, weil sie zeigen, worauf der Skill optimiert ist und worauf er auf keinen Fall verzichtet.

Ein Workflow, der bessere Decks erzeugt

Ein verlässlicher frontend-slides-Workflow für Slide Decks ist:

1. Zweck und Zielgruppe des Decks festlegen,
2. Inhalte in folientaugliche Einheiten zerlegen,
3. eine visuelle Richtung aus den Presets wählen,
4. einen ersten Entwurf generieren,
5. prüfen, ob Folien geteilt werden müssen,
6. erst danach verfeinern, wenn die Botschaft ins Viewport-Format passt.

Wenn du PowerPoint konvertierst, hat Struktur Vorrang vor Stil. Wenn du neu erzeugst, lege zuerst den Spannungsbogen fest, bevor du visuelle Politur anforderst.

Häufige Fragen zum Skill frontend-slides

Ist frontend-slides nur für PowerPoint-Konvertierung gedacht?

Nein. PowerPoint-Konvertierung ist ein Anwendungsfall, aber frontend-slides eignet sich auch gut für originäre HTML-Präsentationen. Wenn du deine Folieninhalte bereits als Gliederung hast, kann der Skill daraus ein browserbasiertes Deck machen, ohne dass du von einer PPTX ausgehen musst.

Muss ich CSS oder JavaScript kennen?

Zum Start nicht. Der Sinn von frontend-slides ist ja, dass der Skill die Implementierungsdetails übernimmt. Bessere Ergebnisse bekommst du trotzdem, wenn du Tonalität, Branding und Inhaltsgrenzen präzise beschreiben kannst, aber du musst das Deck nicht selbst per Hand programmieren.

Worin unterscheidet sich das von einem normalen Prompt?

Ein normaler Prompt kann um Folien bitten; frontend-slides bringt dagegen einen konkreten Präsentationsworkflow, ein Output-Modell ohne Abhängigkeiten, visuelle Stilfindung und Regeln zur Viewport-Anpassung mit. Das reduziert den Rateanteil, wenn dir Installierbarkeit, Wiederholbarkeit und Output wichtig sind, der sich im Browser wirklich wie ein Folien-Deck verhält.

Wann sollte ich frontend-slides nicht verwenden?

Verwende es nicht, wenn der Inhalt langes Scrollen, dichtes Referenzmaterial oder App-Verhalten mit echter Interaktivität jenseits einer Präsentation braucht. Ebenfalls ungeeignet ist es, wenn du generische Unternehmensfolien mit wenig visueller Führung willst, weil der Skill bewusst zu markanteren Designentscheidungen drängt.

So verbesserst du den Skill frontend-slides

Gib stärkeres Ausgangsmaterial

Der größte Qualitätsgewinn kommt von besseren Inputs. Statt „mach es schön“ liefere:

• eine These in einem Satz
• die exakte Folienanzahl
• Sprechernotizen oder Talking Points
• Markenfarben oder No-Go-Farben
• jeden Text, der wortgleich erhalten bleiben muss

So vermeidest du, dass frontend-slides eine Struktur erfindet, die nicht zu deiner Botschaft passt.

Achte auf die typischen Fehlerbilder

Die wichtigsten Fehlerbilder sind Inhaltsüberladung, diffuse Ästhetik und schwache Annahmen bei der Konvertierung. Wenn eine Folie gequetscht wirkt, teile sie. Wenn die visuelle Richtung beliebig aussieht, zwinge ein Preset oder eine benannte Referenzrichtung. Wenn bei einer PPTX-Konvertierung die Bedeutung verloren geht, gib eine Prioritätenreihenfolge vor: Text bewahren, Bilder bewahren, Layout vereinfachen, dann stilisieren.

Iteriere mit gezielten Korrekturen

Nach dem ersten Output verbesserst du frontend-slides am besten, indem du nur das korrigierst, was wirklich zählt:

• „Teile Folie 3 in zwei Folien auf.“
• „Mach die Palette dunkler und editorieller.“
• „Verwende knapperen Text und stärkeren Headline-Kontrast.“
• „Bewahre die Beschriftungen des Diagramms exakt.“
• „Reduziere die Bewegung auf der Abschlussfolie.“

Solche Korrekturen sind deutlich wirksamer als eine breit angelegte Neugestaltung.

Nutze das Repository als Entscheidungshilfe

Wenn du den Skill frontend-slides vor der Einführung bewertest, prüfe Template, Presets und Exportskripte, bevor du dich auf den Workflow festlegst. Sie zeigen, ob der Skill zu deiner Umgebung passt, ob dein Team den Output pflegen kann und ob der frontend-slides-Leitfaden besser zu euren Gewohnheiten beim Erstellen von Decks passt als ein generischer Prompt.