tadyuh76/slide-deck

Slide deck

Un deck est ici un petit projet React qui génère des diapositives 1920×1080, ainsi qu'un pipeline qui les transforme en PowerPoint natif (texte éditable, notes de l'orateur), en PDF et en script d'orateur. Le dossier starter/ contient un deck complet fonctionnel (12 diapositives d'exemple en vietnamien, thème bleu, un exemple de chaque composition). Copiez-le, remplacez le contenu, conservez le système.

Lisez le brief pour trois choses avant toute chose : qui est dans la salle (supposez aucune connaissance préalable sauf indication contraire), combien de temps dure le créneau, et quel est le propre plan de l'orateur. Le plan de l'orateur détermine l'ordre et le contenu. Votre travail est la clarté et l'esthétique, pas de nouvelles affirmations.

1. Démarrage

cp -R "<dossier-de-ce-skill>/starter" "<projet>/<nom-du-deck>"
cd "<projet>/<nom-du-deck>/deck" && npm install && npx playwright install chromium
npx vite                                                # serveur de dev, port dans vite.config.ts

Définissez ensuite les noms : tools/deck-name.txt (nom du fichier PPTX et PDF), la balise title dans deck/index.html, le titre dans deck/script-doc.mjs, les noms des sections dans deck/src/deck/types.ts (ACTS), ainsi que le texte de pied de page et les logos dans Chrome (deck/src/deck/Deck.tsx). Choisissez un port libre dans deck/vite.config.ts si un autre deck est en cours d'exécution.

Structure du projet :

• deck/src/slides/*.tsx : un fichier par diapositive ou groupe, ordre défini dans index.ts. Chaque fichier exporte une SlideDef (id, titre, acte, minutes, notes, Composant).
• deck/src/ui/atoms.tsx : éléments partagés : Bg, Header, HaloArt/Art, Feature (le panneau mis en évidence), IconTile, Stat, Source, LogoTile, AppIcon. Links.tsx dessine des lignes de connexion avec des points qui se déplacent lentement. World.tsx est une carte du monde en pointillés à partir de formes réelles de pays.
• deck/src/index.css : contient les jetons de couleur. Re-thématisez en modifiant --accent, --accent-ink, les valeurs d'arrière-plan et les teintes rgba, sans ajouter un second thème.
• tools/ : génération d'illustrations, construction, publication.

2. Règles de contenu (ce que le propriétaire a corrigé, par ordre de fréquence)

1. Suivez le document de l'orateur. L'ordre des sections, le libellé des définitions et chaque nombre proviennent de ce document. Là où le plan n'a qu'un titre, ajoutez le minimum à partir d'une source primaire, liez-la dans Source, et informez le propriétaire des diapositives que vous avez complétées. Ne présentez jamais un nombre que la liste ne supporte pas (une liste annoncée comme contenant 30 noms mais qui en contient 28 : affichez la liste, omettez le nombre, signalez-le).
2. Les titres sont très simples. Un titre nomme la diapositive avec des mots que le public utilise déjà : "5 cách thu thập dữ liệu xuyên biên giới", "Yêu cầu dans tình huống khẩn cấp". Les lignes astucieuses ou condensées sont rejetées. Une seule ligne, jusqu'à environ 40 caractères à 66 px ; la seconde moitié dans la couleur d'accentuation.
3. Texte minimal, langage simple. Une idée par carte, quelques lignes courtes. Les termes courants en anglais sont mis entre parenthèses ou sur une petite deuxième ligne ("service provider"). Des chiffres, pas des mots-nombres. Pas de petite étiquette au-dessus d'un titre, pas de deux-points ni de points médians comme décoration, pas de formulation promotionnelle.
4. Traduisez tout d'un deck source dans la langue du public ; conservez les noms propres et le terme anglais là où les officiels le rencontreront.
5. Les notes de l'orateur contiennent le texte complet. La diapositive conserve la forme courte ; les notes contiennent les phrases complètes de l'orateur issues du plan, afin que rien ne soit perdu. Additionnez les minutes par rapport au créneau et signalez un dépassement.
6. De vrais logos pour de vraies organisations (fichiers officiels, jamais une imitation générée) ; enregistrez l'origine de chacun dans assets/logos-src/SOURCES.md. Les logos d'organisations demandées par le propriétaire doivent figurer sur chaque diapositive dans Chrome, en grand sur la diapositive de titre et de clôture.
7. Vérifiez les faits en arrière-plan. Envoyez un agent de recherche pour les faits que vous ajoutez (dates, numéros d'articles, numéros de loi, comptages) et écrivez le résultat dans docs/facts.md avec une URL par élément. Là où le propre chiffre de l'orateur diffère des sources publiques, conservez le sien et signalez la différence.

3. Graphismes

Chaque diapositive de contenu a une illustration. Les diapositives avec uniquement des icônes ont été jugées ennuyeuses. Les petites icônes lucide sont acceptables uniquement comme marqueurs de ligne lorsque la diapositive contient également de l'art.

• Une seule famille : des objets pseudo-3D compacts à partir de plans de couleur plats, pas de dégradés ni de lueurs, une seule famille de couleurs plus un petit marqueur jaune. Les feuilles de référence de style sont assets/ref/blue-indicators.png et green-indicators.png. Chaque tuile sur une feuille doit elle-même être plate : une seule tuile brillante attire les nouvelles images vers les dégradés. Pour une autre couleur, recolorez une feuille pour commencer (tools/blue_ref.py), changez la palette de couleurs dans tools/art.mjs, générez un premier lot, puis reconstruisez la feuille à partir de 16 de vos meilleurs résultats et utilisez-la ensuite (la feuille bleue a été réalisée de cette façon).
• Ajoutez une ligne par image à tools/art-list.tsv (nom<TAB>concept). Un concept est un objet clair avec au maximum deux détails d'accompagnement et sans texte : "une enveloppe scellée avec un cadenas sur son rabat et un insigne d'œil barré".
• P=4 bash tools/art-batch.sh génère ce qui manque avec l'outil d'image de Codex CLI (environ 80 s chacun ; nécessite codex installé et connecté, le modèle défini dans tools/art.mjs). Lancez-le en arrière-plan et continuez à écrire les diapositives. Certaines exécutions échouent silencieusement : une fois terminé, vérifiez que chaque nom existe et relancez-le pour ceux qui manquent.
• docker build -q -t deck-pack -f tools/Dockerfile tools && docker run --rm -v "$PWD":/w -w /w deck-pack python tools/art_finish.py les réduit dans deck/public/art/*.webp. Utilisez <HaloArt name="..." size={...} />.
• Les sujets sensibles (préjudice aux enfants, suicide, terrorisme) reçoivent des symboles de protection : un parapluie, un bouclier, une bouée de sauvetage, un panneau d'avertissement.
• Les cartes proviennent de World.tsx (formes réelles), jamais d'un modèle d'image. Les diagrammes (Venn, flux, hubs) sont en SVG dans la diapositive.

4. Composition : pas deux voisins identiques

Un deck où chaque diapositive est une rangée de cartes égales a été renvoyé ("chaque diapositive ayant une mise en page très similaire"). Donnez à chaque diapositive la forme que son contenu impose. Le starter contient un exemple travaillé de chacune :

Contenu	Composition	Diapositive du starter
Quelques parties dans l'ordre	Étapes montant le long d'un chemin, grands chiffres pâles	s02-agenda.tsx
Une idée parapluie plus plusieurs autres	Bento : une grande tuile surélevée et une 2×2	Terms dans s03-terms.tsx
Un processus	Pipeline : stations numérotées sur une ligne, aboutissant à un panneau de résultat	s05-preserve.tsx
Plusieurs façons d'arriver à une chose	Hub et rayons	s06-channels.tsx
Types parallèles avec les mêmes attributs	Lignes pleine largeur : image, question, nom, contenus	DataTypes dans s03-terms.tsx
Options avec un avertissement	Grille de tuiles plus un panneau Feature	Emergency dans s08-requests.tsx
Une chaîne de transferts	Flux de nœuds avec flèches (Link de ui/Links.tsx)	aucun dans le starter
Deux alternatives	Deux larges panneaux	aucun dans le starter
Zones qui se chevauchent avec un noyau commun	Venn, étiquettes sur lignes de guidage	Directorate dans s11-venn.tsx
Lieux	Carte en pointillés avec des épingles ou des pays éclairés, liste à côté	s17b-map-list.tsx
Un centre avec quatre fonctions	Disque au milieu, éléments dans les coins	AspDesk dans s14-corners-bridge.tsx
Deux côtés et ce qui passe entre eux	Pont : deux rives, voies entre elles	Gateway dans s14-corners-bridge.tsx
Chiffres qui prouvent un point	Panneau Feature avec Stat	aucun dans le starter

Lorsque la propre diapositive de l'orateur a une idée de diagramme (un Venn, une liste à côté d'une carte), conservez l'intention et le contenu et redessinez-la ; ne conservez pas son style.

5. Artisanat du texte (chacun de ces points a été une capture d'écran rejetée)

• Rien ne saute. Dans un ensemble de cartes, le même élément commence à la même hauteur dans chaque carte. Faites en sorte que les titres aient le même nombre de lignes (reformulez, ou donnez à chaque titre deux lignes), puis empilez le reste directement en dessous. Pas d'emplacements vides ni de trous margin-top: auto entre un titre et son texte.
• Coupez les lignes par sens. .slide a white-space: pre-line ; écrivez \n à la fin d'une phrase : "Chuỗi bảo quản\nchứng cứ", jamais "Chuỗi bảo\nquản chứng cứ". Gardez chaque ligne configurée à la main suffisamment courte pour que le navigateur ne la renvoie jamais à la ligne ; si elle se renvoie, raccourcissez la ligne ou élargissez la boîte. Les listes de noms obtiennent également des lignes configurées à la main (les espaces insécables ont cassé le PowerPoint).
• Une seule taille par ligne. Un grand nombre et son unité sont deux blocs (Stat) ; un mot d'accentuation qui précède une description est sa propre ligne.
• Marges. Le contenu reste à l'intérieur de 120 px à gauche et à droite et dégagé de la bande de logo (haut 30 à 98 px). Vérifiez les étiquettes sur les cartes et les diagrammes par rapport au bord droit.
• Les diapositives s'ouvrent complètes. Pas d'animation d'entrée ; au plus une révélation au clic, uniquement lorsque la révélation est le but. Les mouvements d'ambiance (points qui coulent, l'arrière-plan du titre) sont acceptables.
• Pas de widgets de progression ou de numéro de section sur les diapositives sauf demande ; la barre de pied de page suffit.

6. Construction et vérification

zsh tools/release.sh     # environ 5 minutes : release/ obtient Deck/ (web), .pptx, .pdf, Kich-ban-trinh-bay.pdf

La publication sauvegarde le fichier via Microsoft PowerPoint pour que les polices soient intégrées. Il quitte d'abord PowerPoint : vérifiez qu'aucun fichier non sauvegardé n'est ouvert, et il prend un dossier de verrouillage dans /tmp afin que deux sessions ne sauvegardent jamais en même temps. Sans PowerPoint sur un Mac, sautez cette étape dans tools/release.sh ; le deck s'ouvre toujours, avec des polices qui doivent être installées sur la machine de présentation.

La vérification fait partie du travail, à chaque tour :

1. cd deck && npx vite build && node export.mjs ../tmp/export rend chaque diapositive dans tmp/export/sNN.png.
2. Regardez chaque diapositive en taille réelle, une image à la fois (réduisez à 1600 px de large). Les planches contact cachent les lignes renvoyées, le texte touchant les bords et les rangées mal alignées. Recherchez : des lignes qui se sont renvoyées là où vous ne les aviez pas coupées, du texte près ou sur un bord, des titres touchant les logos, des départs inégaux entre les cartes, des images manquantes (un carré vide en pointillé), des étiquettes qui se chevauchent.
3. Après la publication, regardez tmp/lo/p-NN.png (le PowerPoint mis en page par LibreOffice) pour les diapositives que vous avez modifiées. C'est là que les boîtes de texte débordantes apparaissent. LibreOffice rend le texte légèrement plus large que PowerPoint, donc un quasi-accident là-bas est un risque réel.
4. Corrigez, reconstruisez, regardez à nouveau. Dites clairement ce que vous avez regardé et ce que vous n'avez pas regardé.

Copiez ensuite release/ dans un dossier nommé sur le Bureau, servez release/Deck sur localhost (docker run -d -p 127.0.0.1:<port>:80 -v "$PWD/release/Deck":/usr/share/nginx/html:ro nginx:alpine), et ouvrez le dossier lorsque demandé.

7. Rapport

Commencez par ce qui est prêt et où. Ensuite, listez les décisions qui appartiennent au propriétaire ou à l'orateur : tout ce que vous avez ajouté au-delà du plan, tout chiffre que vous avez conservé mais que les sources contredisent, tout compte qui ne correspond pas, le temps de passage par rapport au créneau. En termes simples, sans noms de fichiers ni de fonctions.