● Communauté
zarazhangrui
⚡ Instantané
frontend-slides
par zarazhangrui · zarazhangrui/frontend-slides
Générez des présentations web-natives avec Claude — slides HTML/CSS, vraies transitions, pas de PowerPoint, partageables via URL.
frontend-slides est une skill Claude Code qui produit des présentations sous forme de sites HTML/CSS monofichier. Chaque slide est une section ; les transitions sont en CSS ; les extraits de code s'affichent correctement ; vous hébergez sur n'importe quel serveur statique. Idéal pour les conférences techniques, démos et pitches où un deck orienté navigateur vaut mieux qu'un fichier à télécharger.
Pourquoi l'utiliser
Fonctionnalités clés
- Les slides sont en HTML — versionnables avec git, différenciables
- Transitions et animations CSS (pas de fichiers Keynote fragiles)
- Extraits de code avec coloration syntaxique correcte
- Responsive — fonctionne laptop → projecteur → téléphone
- Export PDF en backup
Démo en direct
Aperçu en pratique
prêt
Cas d'usage
Usages concrets : frontend-slides
Quand l'utiliser : Vous avez un plan et 48 heures. Vous ne voulez pas vous battre avec les templates Keynote.
Déroulement
-
Générer la structure
Utilise frontend-slides. À partir de /talks/outline.md, génère un deck dans /talks/deck/. Un HTML par pattern de slide, CSS partagé.✓ Copié
→ Dossier avec index.html + assets de slides ; s'ouvre dans le navigateur
-
Soigner les slides de code
Pour les slides de code, utilise le style réel de mon dépôt (regarde src/example.ts). Ajoute la coloration syntaxique.✓ Copié
→ Le code s'affiche avec la coloration et votre formatage
-
Backup PDF
Exporte en PDF pour le scénario « le projecteur ne se connecte pas ».✓ Copié
→ PDF sauvegardé aux côtés du HTML
Résultat : Un deck que vous pouvez itérer avec git, héberger sur GitHub Pages et présenter depuis un navigateur.
Pièges
- Le WiFi de la salle est mauvais et votre deck charge des assets distants — Intégrez/incorporez tout ; testez hors ligne avant la conférence
Quand l'utiliser : Vous voulez des slides où vous pouvez réellement interagir avec le produit en cours de présentation.
Déroulement
-
Mise en page
Génère un pitch deck de 10 slides. Sur le slide 4, intègre un iframe de la démo produit. Sur le slide 7, intègre un CodePen en direct.✓ Copié
→ Le deck a des iframes aux bons slides
-
Tester la responsivité
Re-rendu pour un projecteur 1024x768. Est-ce que quelque chose casse ?✓ Copié
→ Correctifs de breakpoints appliqués
Résultat : Un deck qui ne ressemble pas à un deck — il ressemble au produit.
Pièges
- La CSP du iframe bloque l'intégration — Hébergez la démo sous un domaine qui autorise le framing, ou utilisez un enregistrement
Combinaisons
Associez-le à d'autres MCPs pour un effet X10
Versionner le deck aux côtés de votre dépôt
Génère dans /talks/2026-05-conf/ et commit.✓ Copié
frontend-slides-skill +
githubDéployer via GitHub Pages
Pousse le deck vers une branche gh-pages et montre-moi l'URL.✓ Copié
Coût et limites
Coût d'exécution
- Quota d'API
- N/A
- Tokens par appel
- Proportionnel à la taille du deck
- Monétaire
- Gratuit
- Astuce
- Générez d'abord le squelette, puis peaufinez slide par slide plutôt qu'en une seule passe massive
Sécurité
Permissions, secrets, portée
Portées minimales : filesystem-write
Stockage des identifiants : Aucun
Sortie de données : Aucune ; votre deck peut référencer des assets distants
Dépannage
Erreurs courantes et correctifs
Les transitions ne fonctionnent pas dans Safari
Consultez le tableau de compatibilité navigateurs dans la doc de la skill ; la config par défaut utilise des propriétés préfixées
Coloration syntaxique du code manquante
Prism/Shiki intégré nécessite le chargement des assets — assurez-vous que les chemins relatifs se résolvent lors de l'hébergement
L'export PDF déforme les mises en page
Utilisez Chrome headless pour l'impression — la config par défaut de la skill est Puppeteer en mode paysage
Alternatives
frontend-slides vs autres
| Alternative | Quand l'utiliser | Compromis |
|---|
| reveal.js / Slidev | Vous voulez un framework complet et êtes à l'aise pour le configurer | Plus de fonctionnalités ; plus d'apprentissage |
| Keynote / PowerPoint | Les environnements corporate exigent des decks en fichiers | Pas web-natif ; plus difficile à partager |