● Communauté
sylvial928
⚡ Instantané
Interactive Slides
par sylvial928 · sylvial928/interactive-slides
Transformez le contenu en une superbe présentation HTML animée et autonome (Slide Deck, Scroll Story ou Interactive Deck) et exportez éventuellement au format .pptx.
interactive-slides est une compétence Claude Code qui produit un seul fichier HTML que vous pouvez ouvrir dans n'importe quel navigateur. Trois modes de présentation (Slide Deck classique, Scroll Story longue durée, Interactive Deck exploratoire). GSAP + Google Fonts + Chart.js sont chargés en CDN ; La navigation clavier/clic/toucher/glisser/défilement fonctionne immédiatement. L'exportation facultative pptxgenjs produit un fichier .pptx modifiable afin que vous puissiez le transmettre à une partie prenante qui vit dans PowerPoint.
Pourquoi l'utiliser
Fonctionnalités clés
- Trois modes : Slide Deck, Scroll Story, Interactive Deck
- HTML autonome : un fichier, n'importe quel navigateur
- Animations GSAP, polices Google, Chart.js (CDN)
- Navigation : clavier/clic/toucher/glisser/molette de défilement
- Exportation .pptx facultative via pptxgenjs
Démo en direct
Aperçu en pratique
interactive-slides-skill.replay
▶ prêt
Cas d'usage
Usages concrets : Interactive Slides
Quand l'utiliser : Vous avez le contenu ; vous voulez la forme d'un vrai deck en quelques minutes.
Déroulement
-
Invoquer la compétence
/interactive-slides — mode : Slide Deck. Contenu : <une page>. Thème : minimal dark.✓ Copié
→ Génère deck.html ; s'ouvre dans le navigateur
-
Itérer les sections
Ajoutez une section « Traction » avec un graphique linéaire pour MRR.✓ Copié
→ Graphique linéaire Chart.js rendu dans une diapositive
-
Exporter .pptx
Exporter sous pitch.pptx.✓ Copié
→ .pptx modifiable enregistré ; texte entièrement modifiable dans PowerPoint
Résultat : Un deck dont vous pouvez faire une démonstration aujourd'hui et l'envoyer par courrier électronique au format .pptx demain.
Pièges
- Le .pptx exporté manque d'animations — Les animations HTML ne font pas d'aller-retour ; conserver le HTML pour les discussions en direct, .pptx pour les transferts
Quand l'utiliser : Vous voulez une pièce longue de style moyen avec des visuels déclenchés par défilement.
Déroulement
-
Choisissez le mode
Mode : Défiler l'histoire. Contenu : cet article. Ajoutez des graphiques et des visuels déclenchés par défilement.✓ Copié
→ Le résultat est une page défilante avec des sections épinglées par GSAP
-
Ajuster le rythme
Ralentissez le défilement des épingles dans la section « Problème ».✓ Copié
→ Chronologie du gommage ajustée
Résultat : Un morceau de parchemin engageant que vos lecteurs terminent réellement.
Pièges
- Surcharge d'effets — Une animation par section ; le repos devrait être calme
Quand l'utiliser : Vous voulez des diapositives avec de petits exercices interactifs en ligne.
Déroulement
-
Mode : Interactif
Mode : Deck interactif. Intégrez un champ de saisie + Chart.js qui se met à jour en direct.✓ Copié
→ Elément interactif filaire ; mises à jour du graphique lors de la saisie
-
Ajouter un sondage
Ajoutez une diapositive « Choisissez-en un » qui enregistre les clics localement et correspond.✓ Copié
→ Mises à jour des compteurs locaux uniquement en un clic
Résultat : Un deck au ressenti live sans backend.
Combinaisons
Associez-le à d'autres MCPs pour un effet X10
Produire des graphiques via ECharts et les intégrer dans le deck
Rendre le graphique des revenus avec mcp-echarts au format SVG ; intégrer dans la diapositive « Traction ».✓ Copié
Appliquer des jetons de marque au thème du deck
Utilisez les jetons brand-acme pour la palette et le type de deck.✓ Copié
Composants d'interface utilisateur sélectionnés pour le mode Interactive Deck
Mode interactif : utilisez un chapiteau Magic UI pour la diapositive des logos de confiance.✓ Copié
Coût et limites
Coût d'exécution
- Quota d'API
- Aucune
- Tokens par appel
- Modéré : le contenu du deck est long en HTML
- Monétaire
- Gratuite
- Astuce
- Gardez la prose par diapositive sous 80 mots ; sinon, les decks gonflent vite.
Sécurité
Permissions, secrets, portée
Stockage des identifiants : Aucune
Sortie de données : GSAP, Google Fonts, Chart.js se chargent à partir du CDN. Si vous avez besoin d'être entièrement hors ligne, demandez à la compétence d'intégrer les bibliothèques.
- Les dépendances CDN signifient que les destinataires ont besoin d'un réseau pour visualiser les animations. Pour les démos à air isolé, demandez une version en ligne.
- Les decks interactifs stockent l’état dans localStorage ; notez si le deck sera partagé publiquement.
Dépannage
Erreurs courantes et correctifs
Les diapositives n'avancent pas sur les touches fléchées
Assurez-vous que l'auditeur du clavier est lié ; certains navigateurs bloquent lorsque le fichier HTML est servi à partir de file://. Essayez un serveur local : python3 -m http.server.
Vérifier : Open dev console; inspect keyup handler
.pptx exporte les animations manquantes
Les animations sont uniquement en HTML ; .pptx exporte le texte + la mise en page. Utilisez HTML pour le direct ; .pptx pour le transfert des e-mails.
Vérifier : Open the .pptx in PowerPoint; check layout only
Les polices ne semblent pas correctes hors ligne
Demandez à la compétence d'intégrer @font-face avec des URI de données base64 pour une utilisation hors ligne.
Vérifier : Open airplane-mode; load the HTML
Alternatives
Interactive Slides vs autres
| Alternative | Quand l'utiliser | Compromis |
|---|
| mck-ppt-design-skill | Vous voulez des diapositives .pptx de style consultation, pas du HTML | Moins interactif ; plus de polissage par glissement |
| mermaid-skill | Vous avez besoin de diagrammes, pas d'un deck | Artefact différent |
| markmap-mcp-server | Une carte mentale s'adapte mieux qu'un deck | Forme narrative différente |