Dans les termes du Skill
Génère un deck de pages web à défilement horizontal sous la forme d'un unique fichier HTML autonome, avec des arrière-plans hero en WebGL, une vue présentateur, une synchronisation écran-public, des notes de présentateur, des séparateurs de chapitre, des pages de données en gros chiffres et des grilles d'images. Deux directions visuelles mutuellement exclusives : A, Magazine électronique x E-ink (titres serif, arrière-plan fluide, tons chauds) et B, Style suisse international (tout en sans-serif, grille à 12 colonnes, arrière-plans en points de grille, un accent à fort contraste parmi IKB, jaune citron, vert citron ou orange sécurité).
Les pages de corps du style B doivent utiliser une des 22 mises en page enregistrées, S01-S22, marquées avec data-layout. Pour les designers et développeurs produisant des conférences, lancements et demo days qui veulent finaliser le deck en une seule passe sans outil de diapositives.
Ce qu'il produit
- Un deck HTML monofichier avec défilement de pages horizontal, livré comme un document unique autonome avec CSS, shader WebGL, JS de pagination et mode présentateur déjà câblés.
- Un enregistrement SPEAKER_NOTES généré dans le même ordre que les valeurs data-slide-id des diapositives, contenant l'objectif, le discours, la transition et des champs de mise en scène optionnels.
- Le plan, enregistré comme fichier markdown à côté du deck afin que les itérations ultérieures aient une base sur laquelle s'appuyer.
Fonctionnement
- 01Vérifier d'abord les mises à jour en amont
Le skill récupère le dépôt et compte de combien HEAD est en retard par rapport à l'amont, puis demande à l'utilisateur avant de tirer quoi que ce soit.
- 02S'accorder sur sept questions avant d'écrire
Le style A ou B vient en premier, puis le public et le cadre, la durée, le matériel source, les images ou captures d'écran, la palette du thème et les contraintes strictes.
- 03Copier le modèle choisi
Copier assets/template.html pour le style A ou assets/template-swiss.html pour le style B vers l'emplacement du deck et créer le dossier images voisin.
- 04Vérifier les noms de classes avant de commencer
Lire le bloc de style du modèle avant d'écrire tout balisage de diapositive et vérifier que chaque classe utilisée y est définie.
- 05Planifier le rythme du thème avant de choisir les mises en page
Écrire la classe de thème de chaque page (hero dark, hero light, light, dark) et l'harmoniser avant de choisir les mises en page.
- 06Se relire par rapport à la checklist
Après la génération, ouvrir references/checklist.md et la parcourir point par point, puis exécuter les validateurs et l'aperçu navigateur.