slidevvon Slidev

Slidev Skill.

Ein Claude Code- und Codex-Skill für PPT und Präsentationsfolien: Präsentationsdecks für Entwickler mit Markdown, Vue-Komponenten, Code-Hervorhebung und Animation.

Presentations
HTML-Folien

OpenDesign herunterladen Anleitung ansehen

slidevjs/slidev · skills/slidev/SKILL.mdSKILL.md

--- name: slidev description: Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, code walkthroughs, teaching materials, or developer decks. --- ## When to Use ## Quick Start ## Basic Syntax ## Common Layouts

Vorspann und Abschnittsüberschriften gelesen aus der Upstream-Datei am 14.09.2026 · 8.896 Zeichen insgesamt

01 Was es tut

Was der slidev Skill in Claude Code und Codex leistet

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Slidev ist ein webbasierter Folienersteller für Entwickler, aufgebaut auf Vite, Vue und Markdown. Es erstellt technische Präsentationen mit syntaxhervorgehobenen Code-Snippets, Live-Code-Beispielen mit dem Monaco-Editor, interaktiven Demos, LaTeX-Gleichungen sowie Mermaid- oder PlantUML-Diagrammen. Folien werden in Markdown mit --- Trennzeichen geschrieben, das erste Frontmatter dient als Headmatter für die Deck-Konfiguration, und HTML-Kommentare enthalten Präsentationsnotizen.

Es unterstützt klickbasierte Animationen (v-click, magic-move), Zeilenhervorhebung, Code-Tabs, Aufnahme mit Kamera, Fernsteuerung und Timer. Der Export nach PDF oder PPTX erfordert playwright-chromium. Zu den Build-Befehlen gehören pnpm run dev für die lokale Vorschau unter localhost:3030, pnpm run export für PDF und pnpm run build für das statische SPA-Deployment.

Was er erzeugt

PDF-Export der Präsentation

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Projekt initialisieren
Führen Sie pnpm create slidev aus, um ein neues Slidev-Präsentationsprojekt zu erstellen.
02
Folien in Markdown schreiben
Trennen Sie Folien mit ---, konfigurieren Sie die Deck-Einstellungen im ersten Frontmatter-Block und fügen Sie Präsentationsnotizen in HTML-Kommentaren hinzu.
03
Entwicklungsserver starten
Führen Sie pnpm run dev aus, um den lokalen Server zu starten, und öffnen Sie die Präsentation unter http://localhost:3030.
04
Exportieren oder Bauen
Verwenden Sie pnpm run export für die PDF-Ausgabe oder pnpm run build, um ein statisches SPA für das Hosting zu erstellen.

02 Finden Sie Ihren Favoriten

Wann Sie den slidev Skill verwenden

Verwenden Sie den slidev Skill in Claude Code oder Codex, wenn die Aufgabe PPT- und Folienpräsentationen dieser Art betrifft. Eignung und Grenzen stammen aus der eigenen Datei des Skills.

Gut geeignet

Technische Präsentationen oder Folien mit Live-Code-Beispielen
Syntax-hervorgehobene Code-Snippets mit Animationen
Interaktive Demos mit dem Monaco-Editor oder ausführbarem Code
Mathematische Gleichungen mit LaTeX oder Diagramme mit Mermaid und PlantUML
Code-Durchgänge für Entwicklervorträge oder Workshops

Grenzen kennen

Benötigt SlidevDie SKILL.md nennt diese Abhängigkeit; der Skill funktioniert ohne sie in Ihrem Projekt nicht.

Was Sie bereitstellen sollten

Code-SnippetsExterne Code-Dateien, importiert mit der Syntax <<< @/snippets/file.js, zur Anzeige in den Folien.

03 Innerhalb des Skills

Regeln, die die slidev-Skill Claude Code und Codex vorgibt

5 konkrete Anweisungen, Standardwerte und Grenzen, die SKILL.md für den Agenten festlegt — der Teil der Datei, der das Ergebnis verändert.

Headmatter Ist Das Erste Frontmatter
Der erste Frontmatter-Block in der Datei konfiguriert deckweite Einstellungen, nicht die Einstellungen einzelner Folien.
Präsentationsnotizen in HTML-Kommentaren
Schreiben Sie Präsentationsnotizen innerhalb von HTML-Kommentarblöcken in jeder Folie. Sie erscheinen nicht auf der Folie selbst.
playwright-chromium Für Export Erforderlich
Installieren Sie pnpm add -D playwright-chromium, bevor Sie Export-Befehle ausführen. Wenn der Export mit einem Browserfehler fehlschlägt, fehlt diese Abhängigkeit.
Der Haupteintrag Gewinnt Beim Zusammenführen
Beim Importieren von Folien mit src hat das Frontmatter der Haupteintragsdatei Vorrang vor dem Frontmatter der importierten Datei.
Comark ermöglicht erweiterte Syntax
Setzen Sie comark: true im Headmatter, um Code-Gruppen und Inline-Style-Attribute wie {style="color:red"} zu aktivieren.

04 In Betrieb nehmen

Installieren Sie slidev in Claude Code oder Codex

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

Fügen Sie slidev zu Claude Code, Codex oder Ihrem Agent hinzu

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal

npx skills add https://github.com/slidevjs/slidev --skill slidev

Generische skills-CLI-Form für skills/slidev/SKILL.md; das Repository kann einen eigenen Pfad dokumentieren.

Geben Sie dem Skill eine erste PPT- und Folienpräsentationsaufgabe

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

Starter prompt

Create a technical presentation for a React workshop with three sections: component lifecycle, hooks deep-dive, and performance optimization. Include live Monaco editor demos showing useState and useEffect patterns, syntax-highlighted TypeScript code with click-based line reveals for the reconciliation algorithm explanation, a Mermaid diagram of the component tree, and a two-column layout comparing class components and functional components. Add presenter notes with timing estimates for each section and configure a 45-minute countdown timer.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Bestätigen Sie nach dem Ausführen von pnpm run dev, dass die Folien unter http://localhost:3030 geladen werden
Prüfen Sie nach dem Ausführen von pnpm run export, ob die PDF-Ausgabedatei im Projekt-Stammverzeichnis vorhanden ist
Wenn der Export mit einem Browserfehler fehlschlägt, installieren Sie zunächst die Abhängigkeit playwright-chromium
Testen Sie klickbasierte Animationen, indem Sie durch die Folien blättern, um sicherzustellen, dass v-click-Elemente in der richtigen Reihenfolge erscheinen

In OpenDesign importieren Sie slidev über den SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es anschließend in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author: Slidev
Repository: github.com/slidevjs/slidev Branch main
Skill-Datei: skills/slidev/SKILL.md Content-Prüfsumme bei Verifikation erfasst; Commit a8d8ff7
License: MIT Aus LICENSE.
Repository-Sterne: 48.658 GitHub-Snapshot vom 14.09.2026 für das gesamte slidevjs/slidev-Repository. Keine Bewertung oder Nutzungszahl für slidev.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

Wann verwendenListet Anwendungsfälle auf: technische Präsentationen, Code-Ausschnitte, interaktive Demos, Gleichungen, Diagramme, Aufzeichnung, Exportformate
SchnellstartBefehle zum Erstellen eines Projekts, Starten des Dev-Servers, Erstellen einer SPA und Exportieren als PDF
Grundlegende SyntaxFolien-Trenner, Headmatter-Konfiguration, Präsentationsnotizen in HTML-Kommentaren
KernreferenzenTabelle der Kernthemen: Syntax, Animationen, Frontmatter, CLI, Komponenten, Layouts, Exportieren, Hosting, globaler Kontext
Feature-ReferenzUmfassende Tabellen zu Code-Hervorhebung, Monaco-Editor, Diagrammen, Mathematik, Layouts, Styling, Animationen, Syntaxerweiterungen, Präsentationstools, Exportoptionen
Gängige LayoutsIntegrierte Layouts: Cover, Center, Two-Cols, Bildvarianten, iframe-Varianten, Zitat, Abschnitt, Fakt, Intro, Ende
RessourcenLinks zu Dokumentation, Theme-Galerie und Showcases

Die eigene Beschreibung des Skills

„Erstellen und präsentieren Sie webbasierte Slidedecks für Entwickler mit Slidev, unter Verwendung von Markdown, Vue-Komponenten, Code-Highlighting, Animationen und interaktiven Features. Nutzen Sie es für technische Präsentationen, Konferenzvorträge, Code-Walkthroughs, Lehrmaterialien oder Entwickler-Decks."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 8.896 Zeichen. Die vollständige Datei auf GitHub lesen.

Slidev

Führen Sie slidev für eine echte PPT- und Slidedeck-Aufgabe aus.

Laden Sie OpenDesign herunter, importieren Sie slidev über seinen SKILL.md-Link, fügen Sie den Prompt oben ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen