slideshowpar HeyGen

Slideshow Skill.

Un skill Claude Code et Codex pour les présentations PPT : diaporamas HyperFrames interactifs avec fragments, branchements et mode présentateur.

Presentations
Slides HTML

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

heygen-com/hyperframes · skills/slideshow/SKILL.mdSKILL.md

--- name: slideshow description: Author a HyperFrames slideshow — a presentation, pitch deck, or interactive deck with discrete slides, fragment reveals, branching, hotspot navigation, and built-in presenter mode with speaker notes; also converts an existing page into a deck. Output is a navigable deck, not a rendered MP4. If the user didn't explicitly ask for a slideshow, confirm before authoring. Unclear → /hyperframes. --- ## Output — a navigable deck, not a linear MP4 ## Intent confirmation ## The two pieces ## Schema ## Slide writing rules ## Porting source pages

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

01 Ce qu'il fait

Ce que fait le skill slideshow 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

Conçoit des diaporamas HyperFrames — présentations, pitch decks, ou decks interactifs avec diapositives distinctes, révélations par fragments, embranchements, navigation par points d'accès et mode présentateur intégré avec notes du présentateur. Convertit aussi des pages existantes en decks. La sortie est un deck navigable servi avec hyperframes présent, pas un MP4 rendu. Utilise un bloc de script JSON island pour déclarer les diapositives et les connexions. Prend en charge les fragments (points de blocage de révélation au sein d'une diapositive), l'embranchement via des points d'accès vers des séquences hors ligne, et le mode présentateur avec notes modifiables synchronisées via BroadcastChannel.

Nécessite une confirmation avant toute création sauf demande explicite. Applique des règles strictes de rédaction de diapositives : les titres sont des affirmations en phrases complètes, une idée par diapositive, dimensionnement du marché de bas en haut, police minimale de 30pt. Recherche dans le catalogue en ligne avant de construire manuellement un quelconque visuel nommé. Lors du portage de pages source, préserve le design original, le mouvement, les interactions et le comportement des médias tout en traduisant le mouvement de page en transitions diapositive à diapositive.

Ce qu'il produit

Une composition HyperFrames avec des scènes, des clips, des timelines GSAP et un manifeste JSON island
Un deck navigable servi avec hyperframes présent, incluant un mode présentateur avec notes du présentateur

Voir l'exemple de prompt ↗

Fonctionnement

01
Confirmer l'intention
Si l'utilisateur demande explicitement un diaporama, procédez ; sinon, arrêtez-vous et expliquez ce que signifie un diaporama HyperFrames (deck exécutable, navigation, mode présentateur) avant de demander une confirmation.
02
Déclarer les scènes avec des attributs de timing
Chaque diapositive est soutenue par une scène. Déclarez chacune avec data-composition-id, data-start, data-duration et data-label.
03
Ajouter l'îlot JSON
Ajoutez exactement un bloc script de type application/hyperframes-slideshow+json à l'HTML de la composition.
04
Rédiger les diapositives en suivant des règles strictes
Les titres doivent être des affirmations sous forme de phrases complètes. Une idée plus un visuel par diapositive. Commencez par la phrase-choc. Dimensionnement du marché uniquement en approche ascendante (bottom-up). Taille de police minimale équivalente à 30 pt.
05
Rechercher dans le catalogue avant de créer des visuels
Pour chaque apparence, effet, graphique ou transition dont une diapositive a besoin, exécutez npx hyperframes catalog --query en français clair et consultez les meilleurs résultats avant de rédiger.

02 Trouvez celui qui vous convient

Quand utiliser le skill slideshow

Utilisez le skill slideshow dans Claude Code ou Codex quand le travail concerne PPT et les decks de slides de ce type. Les limites et l'adéquation ci-dessous sont tirées du fichier propre au skill.

Bon choix

Présentations, decks de pitch, ou decks interactifs avec des diapositives distinctes
Decks avec révélations par fragments, embranchements, navigation par points chauds et mode présentateur
Conversion d'une page existante en deck

Connaître les limites

Demandes où l'intention de créer un diaporama n'est pas claire — doit être confirmée avant la rédaction
Texte de moins de 40px que l'audience doit pouvoir lire

Quoi fournir

URL source Figma (facultatif)Si le contenu ou le storyboard du deck provient d'une URL figma.com, exécutez d'abord /figma pour l'export des assets, les tokens de marque et la reconstruction du storyboard avant de construire.

03 Dans le skill

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

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

Une idée plus un visuel par diapositive
Si vous êtes tenté d'ajouter un deuxième groupe de puces ou un deuxième graphique, scindez la diapositive.
Taille de police minimale équivalente à 30 pt
En 1920×1080, un titre fait 72–96px ; le texte courant fait 48px. Ne descendez jamais en dessous de 40px pour tout texte que l'audience doit lire.
Dimensionnement du marché uniquement en approche ascendante
N'écrivez jamais un TAM de 50 milliards de dollars sans montrer le calcul. Construisez à partir de l'économie unitaire : comptes × ACV, ou transactions × taux de commission.
Rechercher dans le catalogue avant de construire à la main
Pour chaque visuel nommé dont une diapositive a besoin, exécutez npx hyperframes catalog --query et consultez les meilleurs résultats avant de rédiger. Un vrai bloc vaut mieux qu'une approximation simplifiée.
Ne pas exporter les diaporamas en MP4
Un deck est rédigé comme plusieurs compositions de scène de niveau supérieur sans composition racine maîtresse, si bien que le rendu ne résout que la première composition et produit un MP4 tronqué silencieusement.
Les temps des fragments sont des positions absolues sur la composition-timeline
Les temps de fragment utilisent le même espace de coordonnées que data-start, et non des offsets relatifs au début de la scène. Ils doivent se situer dans la plage start, end de la diapositive, bornes incluses.
Préserver la Fidélité de la Page Source Lors du Portage
Préservez le design visuel, le langage de mouvement, le comportement interactif, le comportement des médias et les affordances de présentation de la page originale aussi fidèlement que possible.

04 Mettez-le en pratique

Installer slideshow 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 slideshow à 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/heygen-com/hyperframes --skill slideshow

Forme générique de la CLI skills pour skills/slideshow/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

Build a HyperFrames slideshow for a Series A pitch deck. Start with a hook slide showing SMBs lose $40B/year to manual scheduling. Add a problem slide with three pain points that reveal as fragments: no-shows cost 23% of revenue, manual reminders take 4h/week per staff, and rescheduling friction drives 40% churn. Include a hotspot on the $40B figure that branches to a market-sizing slide showing the bottom-up math: 2.3M SMBs × $17k ACV. End with a solution slide: [product name] automates scheduling for service SMBs, cutting no-shows by 80% in 90 days. Include speaker notes for each slide.

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 :

Corrigez le fichier et relancez jusqu'à ce que le lint signale 0 error(s) et que la validation ne signale aucune erreur d'exécution
Vérifiez que chaque slide.sceneId correspond à une scène existante par data-composition-id
Vérifiez que chaque hotspot.target référence un id de slideSequence défini
Vérifiez que les temps de fragment se situent dans la plage start, end de chaque diapositive

Dans OpenDesign, importez slideshow 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: HeyGen
Repository: github.com/heygen-com/hyperframes Branche main
Fichier du skill: skills/slideshow/SKILL.md Checksum du contenu enregistré lors de la vérification ; commit 558c11b
License: Apache-2.0 Depuis LICENSE.
Étoiles du dépôt: 49 761 Instantané GitHub pris le 2026-09-14 pour l'ensemble du dépôt heygen-com/hyperframes, qui contient 9 skills dans ce catalogue. Il ne s'agit pas d'une note ou d'un compteur d'utilisation pour slideshow.
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

Contrat d'écriture du slideshowUn slideshow HyperFrames est une composition normale accompagnée d'un îlot JSON déclarant les diapositives et les connexions
Sortie — un deck navigable, pas un MP4 linéaireServez avec hyperframes présent ; ne rendez pas en MP4 car cela tronque à la première composition
Confirmation d'intentionConfirmez avant de créer, sauf si l'utilisateur a explicitement demandé un slideshow ; une intention routée est pré-confirmée
Les deux piècesScènes déclarées avec data-composition-id et le timing ; îlot JSON avec les tableaux slides et slideSequences
SchémaDéfinitions de champs et exigences pour SlideshowManifest, SlideRef, SlideHotspot et SlideSequence
Règles d'écriture des diapositivesTitres formulés en phrases complètes, une idée par diapositive, dimensionnement de bas en haut, 30pt minimum, recherche dans le catalogue en premier
Portage de pages sourcePréservez le design original, le mouvement, les interactions, les médias ; traduisez le déplacement de page en transitions de diapositives ; câblez les événements média
Fragments : points d'arrêt de révélation au sein d'une diapositiveTemps de timeline absolus dans la plage de la diapositive ; le contrôleur navigue vers chaque fragment sur Next ; pas de lecture entre les deux
Branchement : hotspots et séquences de diapositivesLes diapositives de branche sont exclues de la ligne principale ; le clic sur un hotspot empile la navigation ; retour renvoie au parent
Exemple travaillé : deck de 3 diapositives avec fragments et une brancheSquelette HTML complet avec scènes, îlot JSON, timeline GSAP et une séquence de branche
Composant d'enveloppeEnveloppez dans hyperframes-slideshow ; fournit la navigation, le clavier, le tactile, les hotspots ; Present ouvre un onglet spectateur ; sourdine globale
Exécuter un slideshow en autonome (provisoire)Les démos autonomes nécessitent des contournements jusqu'à la sortie de la prévisualisation hébergée par le moteur ; voir references/standalone-harness.md

Description du skill lui-même

« Créez un slideshow HyperFrames — une présentation, un pitch deck ou un deck interactif avec slides discrets, révélations de fragments, branchements, navigation par hotspot et mode présentateur intégré avec notes de présentation ; convertit aussi une page existante en deck. La sortie est un deck navigable, pas un MP4 rendu. Si l'utilisateur n'a pas explicitement demandé un slideshow, confirmez avant de créer. Pas clair → /hyperframes. »

Description front-matter tirée de SKILL.md. Le fichier complet fait environ 33 631 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill slideshow

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Que sont les fragments et comment fonctionnent-ils ?

Un fragment est un temps absolu de la timeline de composition, en secondes, situé dans la plage start, end d'une diapositive, où le contrôleur maintient un état de révélation.

Le lecteur entre dans une diapositive fragmentée à fragments[0], puis navigue vers chaque fragment suivant sur Next. Après le dernier fragment, Next avance à la diapositive suivante. La navigation est pilotée par recherche, pas par lecture.

Slideshow

Exécuter slideshow sur une tâche de présentations et diaporamas réels.

Téléchargez OpenDesign, importez slideshow 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