slide-wright

Que fait slide-wright ?

Transformez un sujet ou des notes brutes en une présentation digne d'une salle de conseil : des diapositives qui ressemblent à un deck d'une équipe produit ou stratégique solide, livrées sous la forme d'un unique fichier HTML autonome qui s'ouvre dans n'importe quel navigateur.

La règle qui définit cette compétence

Proposez l'apparence avant de construire le diaporama. Lors du premier passage, vous ne produisez jamais une présentation terminée. Vous générez un thème, construisez un aperçu de deux diapositives dans ce thème, et vous arrêtez jusqu'à ce que l'utilisateur approuve la direction. Ce n'est qu'ensuite que vous construisez le reste.

Une seule proposition à la fois, pas un menu. Si l'utilisateur dit non, jetez la direction et essayez-en une nettement différente. Chaque thème est inventé pour le diaporama que vous avez sous les yeux ; il n'y a pas de bibliothèque de préréglages.

Nouveau diaporama : lisez d'abord references/new-deck.md. Il contient les étapes 1 à 4 (élaborer le deck, proposer un look, obtenir un oui, construire) et la porte d'approbation exacte.

Le moteur (gardez-le interne)

Les diaporamas sont rendus avec reveal.js chargé depuis un CDN, mais c'est un détail d'implémentation que l'utilisateur ne voit jamais. Parlez de diapositives, de thèmes et de design ; le nom de la bibliothèque n'apparaît que dans les balises <link> et <script> générées. Le fichier references/deck-template.md contient la configuration exacte.

Modifier un diaporama existant

Si l'utilisateur pointe vers un diaporama HTML existant, vérifiez s'il est basé sur reveal.js (recherchez les balises <link>/<script> de reveal.js provenant d'un CDN). Si c'est le cas — que cette compétence l'ait construit ou non — ne repartez pas de zéro : lisez-le, conservez son thème, et appliquez la modification sur place. L'apparence est déjà approuvée, sautez donc la proposition et la porte d'approbation. Après l'édition, exécutez node <skill-dir>/scripts/check-deck.mjs <deck.html> et corrigez chaque ligne qu'il imprime (references/new-deck.md contient les détails).

Aucun fichier de référence n'est nécessaire pour une édition, sauf si vous ajoutez un nouveau type d'illustration (lisez references/exhibits.md) ou du code ou une animation (lisez references/code-slides.md ou references/motion-recipes.md).

Si le diaporama est au format HTML mais n'utilise pas reveal.js (moteur différent, diapositives simples, etc.), cela dépasse le champ d'application de cette compétence en matière d'édition — dites-le plutôt que de forcer une réécriture sur un moteur différent. Tout le reste ici concerne la création d'un nouveau diaporama.

Étape 5 — Remise

1. Ouvrez le diaporama terminé.
2. Dites où il se trouve, le nom du thème et le nombre de diapositives.
3. Expliquez à l'utilisateur comment l'utiliser : touches fléchées, espace ou glissement pour se déplacer ; F pour le plein écran, Esc ou O pour l'aperçu des diapositives, S pour la vue orateur avec notes ; ajoutez ?print-pdf à l'URL et imprimez pour enregistrer un PDF (references/export-pdf.md contient les étapes) ; les couleurs du thème se trouvent dans les variables :root, les polices dans le <link>.
4. Proposez les prochaines actions évidentes : réviser le contenu, changer le thème, exporter un PDF, exporter un fichier PowerPoint (references/export-pptx.md), ou déployer vers une URL en direct pour le partager. S'ils veulent déployer, lisez references/deploy.md et laissez-les choisir l'hébergeur (Surge, Vercel ou Netlify) — n'en présumez pas un.

Fichiers de référence

Lisez-les au fur et à mesure que vous les atteignez, pas tous en même temps :

• references/new-deck.md — Étapes 1 à 4 pour un nouveau diaporama : élaborer le deck, proposer un look, obtenir un oui, construire
• references/design-aesthetics.md — ce qui rend un diaporama design (Étape 2)
• references/theme-generation.md — la procédure pour inventer un thème (Étape 2)
• references/deck-template.md — le squelette HTML, la mise en page et la configuration du moteur (Étapes 2 et 4)
• references/exhibits.md — choisir et construire le visuel de chaque diapositive de contenu (Étapes 2 et 4)
• references/code-slides.md — diapositives de code et leur contrat de balisage (Étape 4)
• references/motion-recipes.md — animation, lorsque l'utilisateur le demande (Étape 4)
• references/media.md — images et vidéos dans les diapositives (Étape 4)
• references/export-pdf.md — enregistrer un diaporama au format PDF (Étape 5)
• references/export-pptx.md — exporter un diaporama vers PowerPoint avec texte modifiable (Étape 5)
• references/deploy.md — publier le diaporama vers une URL en direct (Étape 5)