slidevpar Slidev

Slidev Skill.

Un skill Claude Code et Codex pour les présentations PPT : diaporamas pour développeurs avec Markdown, composants Vue, coloration syntaxique et animations.

Presentations
Slides HTML

Télécharger OpenDesign Voir le guide d'utilisation

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

En-tête et titres de section lus depuis le fichier amont le 14/09/2026 · 8 896 caractères au total

01 Ce qu'il fait

Ce que fait le Skill slidev dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Slidev est un créateur de diapositives web pour les développeurs, construit sur Vite, Vue et Markdown. Il crée des présentations techniques avec des extraits de code à coloration syntaxique, des exemples de code interactifs via l'éditeur Monaco, des démos interactives, des équations LaTeX et des diagrammes Mermaid ou PlantUML. Les diapositives sont écrites en Markdown avec des séparateurs ---, le premier frontmatter servant de headmatter pour la configuration du deck, et des commentaires HTML pour les notes du présentateur.

Il prend en charge les animations basées sur les clics (v-click, magic-move), la mise en surbrillance de lignes, les onglets de code, l'enregistrement avec caméra, la télécommande et le minuteur. L'export en PDF ou PPTX nécessite playwright-chromium. Les commandes de build incluent pnpm run dev pour l'aperçu local sur localhost:3030, pnpm run export pour le PDF, et pnpm run build pour le déploiement d'une SPA statique.

Ce qu'il produit

Export PDF de la présentation

Voir l'exemple de prompt ↗

Fonctionnement

01
Initialiser le projet
Exécutez pnpm create slidev pour générer un nouveau projet de présentation Slidev.
02
Écrire les diapositives en Markdown
Séparez les diapositives avec ---, configurez les paramètres du deck dans le premier bloc de frontmatter, et ajoutez les notes du présentateur dans des commentaires HTML.
03
Démarrer le serveur de développement
Exécutez pnpm run dev pour lancer le serveur local et ouvrir la présentation à l'adresse http://localhost:3030.
04
Exporter ou compiler
Utilisez pnpm run export pour un export PDF ou pnpm run build pour créer une SPA statique destinée à l'hébergement.

02 Trouvez celui qui vous convient

Quand utiliser le skill slidev

Utilisez le skill slidev dans Claude Code ou Codex lorsque la tâche concerne des présentations et diaporamas de ce type. La portée et les limites ci-dessous sont tirées du propre fichier du skill.

Bon choix

Présentations techniques ou diaporamas avec des exemples de code en direct
Extraits de code avec coloration syntaxique et animations
Démos interactives utilisant l'éditeur Monaco ou du code exécutable
Équations mathématiques avec LaTeX ou diagrammes avec Mermaid et PlantUML
Présentations pas à pas de code pour des conférences ou ateliers de développeurs

Connaître les limites

Nécessite SlidevLe SKILL.md nomme cette dépendance ; le skill ne fonctionne pas sans elle dans votre projet.

Quoi fournir

Extraits de codeFichiers de code externes importés avec la syntaxe <<< @/snippets/file.js pour affichage dans les diapositives.

03 Dans le skill

Règles que le skill slidev donne à Claude Code et Codex

5 instructions concrètes, valeurs par défaut et limites que SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

Le headmatter est le premier frontmatter
Le premier bloc de frontmatter du fichier configure les paramètres globaux du deck, pas les paramètres de diapositives individuelles.
Notes du présentateur dans des commentaires HTML
Écrivez les notes du présentateur à l'intérieur de blocs de commentaires HTML dans chaque diapositive. Elles n'apparaîtront pas sur la diapositive elle-même.
playwright-chromium requis pour l'export
Installez pnpm add -D playwright-chromium avant d'exécuter les commandes d'export. Si l'export échoue avec une erreur de navigateur, cette dépendance est manquante.
Le fichier d'entrée principal prévaut lors de la fusion
Lors de l'import de diapositives avec src, le frontmatter du fichier d'entrée principal a priorité sur le frontmatter des fichiers importés.
Comark active la syntaxe avancée
Définissez comark: true dans le headmatter pour activer les groupes de code et les attributs de style inline comme {style="color:red"}.

04 Mettez-le en pratique

Installer slidev dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter slidev à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal

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

Formulaire CLI skills générique pour skills/slidev/SKILL.md ; le dépôt peut documenter son propre chemin.

Donner à la skill une première tâche PPT et diaporamas

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

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.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

Après avoir exécuté pnpm run dev, vérifiez que les diapositives se chargent sur http://localhost:3030
Après avoir exécuté pnpm run export, vérifiez que le PDF de sortie existe à la racine du projet
Si l'export échoue avec une erreur de navigateur, installez d'abord la dépendance playwright-chromium
Testez les animations basées sur les clics en avançant dans les diapositives pour vérifier que les éléments v-click apparaissent dans l'ordre

Dans OpenDesign, importez slidev depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

Télécharger OpenDesign Lire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author: Slidev
Repository: github.com/slidevjs/slidev Branche main
Fichier du skill: skills/slidev/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit a8d8ff7
License: MIT D'après LICENSE.
Étoiles du dépôt: 48 658 Instantané GitHub pris le 14 septembre 2026 pour l'ensemble du dépôt slidevjs/slidev. Ce n'est pas une note ni un compteur d'utilisation pour slidev.
Vérifié par OpenDesign: 2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

Quand l'utiliserListe les cas d'usage : présentations techniques, extraits de code, démos interactives, équations, diagrammes, enregistrement, formats d'export
Démarrage rapideCommandes pour créer le projet, lancer le serveur de développement, générer une SPA et exporter en PDF
Syntaxe de baseSéparateur de diapositives, configuration du headmatter, notes du présentateur dans des commentaires HTML
Références principalesTableau des sujets clés : syntaxe, animations, frontmatter, CLI, composants, layouts, export, hébergement, contexte global
Référence des fonctionnalitésTableaux complets couvrant la coloration de code, l'éditeur Monaco, les diagrammes, les maths, les layouts, le style, les animations, les extensions de syntaxe, les outils de présentation, les options d'export
Layouts courantsLayouts intégrés : couverture, centré, deux colonnes, variantes image, variantes iframe, citation, section, fait, intro, fin
RessourcesLiens vers la documentation, la galerie de thèmes et des démonstrations

Description du skill lui-même

« Créez et présentez des présentations web pour développeurs en utilisant Slidev avec Markdown, composants Vue, coloration syntaxique, animations et fonctionnalités interactives. À utiliser pour créer des présentations techniques, conférences, démonstrations de code, supports pédagogiques ou decks développeur. »

Description du front-matter tirée de SKILL.md. Le fichier complet fait environ 8 896 caractères. Lisez le fichier complet sur GitHub.

Slidev

Exécutez slidev sur une vraie tâche de présentation PPT ou de diapositives.

Téléchargez OpenDesign, importez slidev depuis son lien SKILL.md, collez le prompt ci-dessus, et lisez le plan avant le résultat.

Télécharger OpenDesign Parcourir tous les skills