Slides

slides — decks HTML éditoriaux pour {{COMPANY_NAME}}

Tu génères des présentations .html autonomes, projetées en réunion, exportées en PDF ou hébergées sur une URL statique. La barre de qualité : Monocle × Bloomberg viz × MIT Tech Review print — retenue, hairlines, blanc généreux, une idée par slide. Bannir les tropes « startup IA 2025 » (bento grids, orbes glassy, gradients radiaux empilés, copy pseudo-percutante).

Étape 0 — Doctrine de marque (OBLIGATOIRE)

Avant le moindre plan de slides :

1. Charger 01-brand/checklist-pre-composition.md — règles de voix, anti-style-IA, typographie slides (pas de point final sur les titres, plancher de tailles), assets, réutilisation.
2. Charger 01-brand/voice.md + 01-brand/style-guide.md — voix, vocabulaire, tokens visuels.
3. Consulter 01-brand/assets/index.md avant d'envisager le moindre visuel : un asset existant se réutilise, il ne se régénère pas.
4. Charger 01-brand/design-anti-generique.md — doctrine design anti-générique : marqueurs du look IA interdits par défaut, contrastes typographiques, checklist de pré-livraison (la marque prime là où elle a un avis).

Ne jamais produire sans. Si un de ces fichiers manque ou contient encore des {{...}}, arrêter et lancer /start-cockpit.

Où vit le travail

Tous les fichiers slides vivent sous 06-graphic-design/presentations/ ; toutes les commandes se lancent depuis la racine du dépôt.

Copy code
06-graphic-design/presentations/
├── decks/                  ← decks générés (un .html par deck)
├── briefs/                 ← briefs par deck (intention, audience, décision, sources)
├── assets/photos/          ← photos propres aux decks (Pexels, en option), créé au besoin
├── templates/              [vendorisé]
│   ├── base.html           ← starter : moteur complet + 3 slides d'exemple, :root neutre
│   └── components.md       ← composants prêts à coller, avec leurs pièges
├── scripts/                [vendorisé]
│   ├── qa.py               ← gate QA Playwright (obligatoire)
│   ├── shots.py            ← captures de contrôle, animations neutralisées
│   ├── serve.sh            ← serveur statique local :5173 (racine du dépôt)
│   ├── export-pdf.sh       ← export PDF 1920×1080 propre (+ export_pdf.py)
│   └── pexels.py           ← photos réelles Pexels (optionnel, clé gratuite)
├── docs/
│   ├── design-system.md    ← principes, anti-patterns, échelle typo        [vendorisé]
│   ├── engine-parity.md    ← liste CANONIQUE des features du moteur        [vendorisé]
│   ├── pdf-export.md       ← rastérisation du texte en gradient expliquée  [vendorisé]
│   ├── pexels-setup.md     ← obtenir et poser la clé Pexels                [vendorisé]
│   └── hosting.md          ← Netlify Drop, S3, GitHub Pages, etc.
└── tokens.css              ← le fichier de marque du moteur, généré depuis 01-brand/tokens.json
_examples/deck-catalogue/   ← LAYOUTS.md (index des 120 layouts) + catalogue.html (exécutés) [vendorisé]

Moteur vendorisé. Le moteur (starter, composants, catalogue, QA, export, tests) vient de slides-agent, sa source de vérité unique : les fichiers marqués [vendorisé] portent un en-tête VENDORED from slides-agent et ne s'éditent jamais à la main. Une évolution du moteur se fait dans slides-agent, puis python3 scripts/sync-slides-engine.py la reprend (procédure : docs/vendored-slides.md). Les mentions de « CLAUDE.md », de l'« onboarding » ou de la skill pexels-photos dans ces fichiers désignent ceux de slides-agent : ici, c'est cette skill.

Base technique : un deck naît de python3 06-graphic-design/scripts/new-deck.py <slug> --titre "…", qui copie le starter dans decks/ et remplace son :root neutre par celui de tokens.css (la marque du projet). Le starter embarque le moteur complet (liste canonique : docs/engine-parity.md) : plein écran, vue d'ensemble groupée, export PDF, folios auto, hooks de motif. Le moteur ne se réécrit jamais : il se reprend tel quel et qa.py vérifie sa présence. Les compositions viennent de la bibliothèque de layouts et de components.md, jamais d'un deck précédent (il contamine l'arc, les compositions et la métaphore du nouveau), sauf demande explicite de reprendre un deck existant.

Quand invoquer cette skill

• « Fais-moi un deck pour [audience] sur [sujet] »
• « Construis une présentation pour pitcher [projet] à [interlocuteurs] »
• « Transforme ce brief / cette transcription / ce doc stratégie en slides »
• « Refais [deck précédent] dans le même style »
• Tout livrable projeté ou partagé en deck

Carrousel LinkedIn PDF → carousel. Infographie statique, post social, bannière → image-generation.

Prérequis — confirmer avant de démarrer

1. Setup marque complet. .setup-completed existe à la racine ; 01-brand/style-guide.md et 01-brand/voice.md ne contiennent plus de {{...}} ; 01-brand/tokens.json existe et python3 scripts/build-tokens.py --check passe (le bloc de marque de tokens.css est à jour).
2. Matière source claire. Soit l'utilisateur fournit brief / transcription / mémo, soit tu passes par superpowers:brainstorming. Jamais de HTML sur un brief verbal flou.
3. Le plan de slides est approuvé. Rédiger une liste numérotée (eyebrow + headline par slide, 10-24 au total) et obtenir un accord explicite avant de générer le HTML. C'est LE moment de correction le moins cher.

Procédure (8 phases)

Phase 1 — Préparation

1. Lire toute la matière source : brief dans briefs/, transcriptions dans _sources/transcriptions/, rapports cités dans _sources/reports/.
2. Identifier audience, décision à obtenir, format (projeté live vs lecture autonome).
3. Choisir un arc émotionnel façon Duarte : alternance douleur ↔ espoir (ou contexte → douleur → promesse → stratégie → exécution → KPIs → engagement). Mapper chaque temps sur une intention de slide.
4. Couper à 10-24 slides, « une idée = une slide ». Insérer 3-4 slides « respiration » (un gros chiffre + une phrase courte) entre les slides denses.

Phase 2 — Direction artistique

5. Choisir une métaphore visuelle fil rouge alignée marque et sujet : un motif récurrent (marqueur visuel, watermark ambient, animation discrète) qui ancre le récit. Chaque deck invente ses propres compositions — ne pas recopier la grille du deck précédent.
6. Confirmer le système typographique depuis tokens.css : paire de contraste (ex. graisse 200 vs 700/900), tailles display vs body, captions mono. Si 01-brand/style-guide.md est maigre, invoquer ui-ux-pro-max pour poser style + couleurs + fonts cohérents avant d'aller plus loin.
7. Verrouiller la grille : cadre 1920×1080, chrome inset 36×60, padding slide 80×120. Grille de fond optionnelle (dust-grid ~96px avec mask radial) si la marque s'y prête.
8. Principes d'animation : easing lent (0.8-1.1s cubic-bezier(0.16, 1, 0.3, 1)), stagger 0.08-0.12s, pas de springs bondissants, pas de cuts rapides. Mascottes et motifs de marque FIXES : pas d'animation de flottement — seules les transitions reveal d'entrée sont autorisées.

Phase 3 — Composants

9. Choisir un layout par temps du récit dans _examples/deck-catalogue/LAYOUTS.md (120 layouts en 8 familles, chacun avec sa ligne « quand l'utiliser »), puis le regarder exécuté dans _examples/deck-catalogue/catalogue.html (touche O). Règle de variété : jamais deux fois de suite le même layout, jamais plus de deux fois dans un deck ; si deux temps voisins veulent le même, l'un des deux est le mauvais temps. Le catalogue est une marque fictive sans arc : on y prend une géométrie, jamais un contenu ni un enchaînement. Décider ensuite quels composants de templates/components.md tu réutilises. Construire tout nouveau composant en isolation, le tester à 1920×1080, puis l'intégrer. Quand un temps de slide n'entre dans aucun composant documenté, invoquer frontend-design pour en concevoir un. Pour des références plus riches, les outils 21st.dev (mcp__magic__21st_magic_component_builder / inspiration / refiner) — traiter leur sortie comme inspiration : retravailler la géométrie au cadre 1920×1080, respecter la safe-zone du chrome, ré-appliquer les tokens. Jamais de composant généré collé tel quel.
10. Tester le tout premier composant via Playwright avant d'en ajouter d'autres — attrape tôt les bugs d'échelle et de typo.
11. Icônes = Lucide en SVG inline (stroke-width: 1.75, stroke: var(--brand-primary), fill: none) dans une pastille de fill léger. Plus net que des icônes générées.
12. Eyebrows : souvent en trop. Le tag-meta du chrome (haut-gauche) suffit pour le contexte ; ne poser un eyebrow au-dessus d'un titre que s'il apporte une information.

Phase 4 — Assets

13. Logo de marque : inline en <symbol id="brand-logo"> depuis 01-brand/assets/. Toujours fill="currentColor" sur les paths internes — le shadow DOM du <use> ne reçoit PAS fill: url(#gradient) ; piloter la couleur via color: sur le wrapper.
14. Illustrations / photos de marque : d'abord 01-brand/assets/index.md (catalogue), puis 06-graphic-design/outputs/ (visuels déjà produits par image-generation). SVG inlinés ; rasters en chemins relatifs.
15. Captures produit réelles : si la marque a un produit, préférer de vraies captures soignées à toute illustration générique. Les référencer dans le brief. En attendant la capture, le placeholder .shotph du catalogue tient le ratio. 15b. Photos réelles (Pexels, optionnel) : quand un temps du récit appelle un lieu, une matière, un objet ou un geste réels (une slide sur quatre au plus), l'ordre est : assets de 01-brand/assets/, puis Pexels, puis image-generation, puis la typographie seule. Pexels demande une clé gratuite PEXELS_API_KEY dans le .env de la racine (procédure pas à pas : 06-graphic-design/presentations/docs/pexels-setup.md ; ne jamais demander ni recopier la clé dans le chat) et python3 -m pip install requests pillow. pexels.py search (planche contact), get --slug … [--treatment mono|duotone] (photo dans presentations/assets/photos/ + fiche de crédit), puis credits génère la dernière slide de crédits, obligatoire. Jamais de photo de stock générique (visuels bannis : {{BRAND_BANNED_VISUALS}}) ; consigner l'usage dans 01-brand/droits.md. Les 8 layouts de la famille « photo » du catalogue montrent comment poser une photo à côté du texte, jamais sous lui.
16. Co-branding : logo partenaire monochrome foncé sur fond sombre → filter: brightness(0) invert(1) pour le passer en blanc.
17. Logos d'outils tiers (au besoin), ordre de tentative : (a) cdn.simpleicons.org/<slug>/<hex-sans-#>, (b) api.iconify.design/logos/<slug>.svg ou api.iconify.design/simple-icons/<slug>.svg?color=<hex>, (c) WebFetch du site officiel + extraction du SVG inline, (d) fallback PNG google.com/s2/favicons?domain=<domaine>&sz=256. Sauvegarder sous 01-brand/assets/<slug>.<ext> et référencer en relatif. Re-vérifier les URLs à chaque projet — elles dérivent.

Phase 5 — Contenu

18. Écrire la copy sous la doctrine de l'étape 0. Liste de vocabulaire interdit non négociable ; filtre anti-style-IA intégral (parallélismes négatifs, vocabulaire IA mort, règle de trois automatique).
19. Jamais de point final sur un titre. Jamais de tiret cadratin (—) dans le contenu visible : –, virgule ou reformulation.
20. Chaque affirmation est adossée à un chiffre, une date ou une source nommée. Croiser avec 01-brand/messaging-framework.md — ne jamais publier un chiffre qui n'y est pas ou qui n'est pas dans _sources/reports/.
21. Vérifier slogans et formules signature : uniquement les versions validées de 01-brand/voice.md.
22. Baseline footer : {{COMPANY_NAME}} · {{COMPANY_WEBSITE}} en signature bottom du chrome (.signature) sur chaque slide hors hero ; le starter porte une signature générique, à remplacer dans le deck.

Phase 6 — Navigation

23. La navigation triple est câblée dans templates/base.html : drag-bar horizontale, overview panel (O / Esc, groupée par familles via data-family : ouverture, editorial, dataviz, schema, tableau, preuve, conclusion, photo), quick-jump clavier (chiffres + Enter). Plus les classiques ←/→/Espace/Page↑↓/Home/End, molette debouncée 700ms, swipe tactile. Mode plein écran : bouton ⛶ + raccourci F (Fullscreen API avec fallback webkit) → body.presenting masque la nav, fit() tourne sans réserve ni cap, et la nav réapparaît quand le pointeur passe à moins de 90 px du bas (nav-peek). Folios auto-numérotés : le moteur injecte NN / TOTAL dans chaque .nav-num depuis SLIDE_COUNT — laisser les spans vides, ne jamais coder un folio en dur. Ne pas retirer ni réimplémenter — la liste canonique des features est docs/engine-parity.md.
24. Centrage du cadre : transform: translate(-50%, calc(-50% + ${yShift}px)) scale(${scale}) avec yShift = -(24 + nav.offsetHeight)/2. place-items: center ne fonctionne PAS avec transform: scale() — la boîte de layout reste 1920×1080.

Phase 7 — QA Playwright (NON NÉGOCIABLE)

25. Exécuter python3 06-graphic-design/presentations/scripts/qa.py 06-graphic-design/presentations/decks/<deck>.html (ou dispatcher l'agent qa-visuel, qui lit la sortie --format json). Doit retourner All slides clean (code 0 ; les avertissements ne bloquent pas mais se relisent). Puis une passe --with-pdf : le PDF passe par les mêmes hooks d'impression que l'export, et un poids moyen sous 40 Ko par slide signale des pages effondrées. Le script vérifie :
    • Parité moteur (docs/engine-parity.md) : présence mécanique des marqueurs du moteur (body.presenting, nav-peek, SLIDE_COUNT, export PDF, --brand-pattern…). Échec = une feature du moteur manque ; la porter depuis templates/base.html ou le catalogue, jamais la réécrire.
    • Aucun élément ne déborde du cadre 1920×1080 (géométries ramenées au cadre natif, quel que soit le viewport).
    • Écart contenu bas / chrome bas ≥ 16px sur chaque slide.
    • Planchers typographiques, deux registres : contenu ≥ 18px (erreur type-floor, avertissement tight-body sous 24px) ; registre des étiquettes ≥ 12px (texte du .chrome, classes .eyebrow, .meta-label, .signature, .nav-num, et tout texte en monospace). Une phrase de plus de 12 mots réduite au corps d'étiquette sort en long-label : couper la slide, pas la police.
    • Police : chaque texte dans une famille de la marque (font.* de 01-brand/tokens.json, à défaut --font-display / --font-body / --font-mono du deck) ; une monospace non déclarée n'est admise sans réserve que dans les étiquettes et sur code/pre/kbd/.mono.
    • Contraste WCAG 2.x AA sur tout texte visible, chrome compris, opacité comprise (4,5:1, 3:1 en grand ou en gras) ; les textes en dégradé sont listés à part, à relire à l'œil. Sur une erreur de contraste du chrome ou d'un surtitre, monter --chrome-opacity dans tokens.css juste au-delà du seuil, jamais retoucher la slide.
    • Folios présents et croissants (.nav-num du moteur, .tag-folio du catalogue).
    • Options utiles : --lang <code> (deck bilingue exposant window.__setLang, à passer dans chaque langue), --bleed <sélecteur> (calque décoratif volontairement débordant, ou data-bleed sur le calque d'image, jamais sur du texte), --wait 2000 (apparitions échelonnées), --screenshots [dossier], --font <famille>, --no-folio, --max-per-slide 0. Ne jamais maquiller un constat : corriger la slide.
    • Captures ciblées : python3 06-graphic-design/presentations/scripts/shots.py <deck> 3 8 (animations neutralisées).
26. Re-tester à 1366×768 et 1024×600 pour confirmer le scaling responsive. Inspecter visuellement chaque screenshot.
27. Insertion / suppression de slide : aucune renumérotation manuelle — les folios NN / TOTAL, le compteur de la nav et l'overview se recalculent depuis SLIDE_COUNT (JS). Vérifier seulement que la nouvelle slide porte data-family, data-eyebrow, data-heading et un .nav-num vide. qa.py détecte le nombre de slides automatiquement.

Phase 8 — Brand-check + livraison

28. Brand-check obligatoire avant livraison (5 points : vocabulaire / ton / preuve / audience / visuel). Les decks passent la même porte que le social, l'email et le web. Le hook PostToolUse rappelle ; ne pas le contourner.
29. Garder v1 intact pendant l'itération. Révision → v2 à côté. Une fois approuvé, supprimer v1 si souhaité.
30. Confirmer que l'utilisateur a prévisualisé le deck (./06-graphic-design/presentations/scripts/serve.sh puis http://localhost:5173/06-graphic-design/presentations/decks/<deck>.html) avant d'annoncer terminé. Si le deck utilise des photos Pexels : la dernière slide est celle des crédits, régénérée par pexels.py credits après le dernier changement de photo.

Lisibilité typographique (règle de présentation)

Plancher : aucun texte de contenu sous 18px sur le cadre 1920×1080 (équivalent 18pt en projection ; corps confortable dès 24px). Seul le registre des étiquettes (folio, signature, surtitre, légende mono) reste à 12-14px. qa.py mesure ces deux planchers et l'avertissement sous 24px ; ne jamais réduire une vraie phrase au corps d'étiquette pour la faire tenir.

Éviter l'espace vide sur les slides « titre + contenu » : centrer le bloc entier (titre + contenu ensemble), pas titre collé en haut + contenu centré (qui crée un trou au milieu). Pattern : .plate.vcenter { justify-content: center } .plate.vcenter .body-wrap { flex: 0 0 auto }.

Pièges typographiques (patterns déjà résolus)

CRITIQUE — zone de sécurité du chrome bas

Le chrome bas (marque + signature) est à inset: 36px du cadre ; son contenu occupe y ≈ 1014 → 1044 dans le cadre natif 1080.

Règle dure : aucun élément de contenu ne dépasse y=1000. Le script QA vérifie chrome_row.top - lowest_content_bottom ≥ 16px sur chaque slide.

Slides typiquement à risque : KPIs avec gros chiffres, tableaux comparatifs denses, timelines/roadmaps, combos section-head + grille dense + footer-bar.

Fix en cas d'overlap :

1. Réduire les font-sizes display (chiffres, totaux).
2. Réduire paddings/gaps des grilles.
3. Réduire le margin-top des section-heads.
4. Si le contenu est conceptuellement trop dense → couper en deux slides. « Une idée = une slide » est la discipline qui garde le layout calme.

CRITIQUE — export PDF et textes en gradient

Chromium a un bug documenté dans son pipeline PDF avec background-clip: text + linear-gradient : des lignes d'artefacts colorés apparaissent aux bords des inline-blocks multi-lignes. Aucune combinaison CSS ne le corrige (testés : box-decoration-break: clone, display: inline, isolation: isolate, resets padding/margin — tous échouent).

Deux régimes selon l'identité de marque :

• La marque titre en couleur solide (pas de gradient sur texte) — cas le plus simple : vider GRADIENT_TEXT_SELECTORS dans le deck (jamais dans le starter vendorisé) et le PDF imprime le texte nativement. Il suffit d'activer le mode print (__enablePrintMode() ajoute body.printing-pdf) puis window.print(). Export headless : page.evaluate("__enablePrintMode()") puis page.pdf(prefer_css_page_size=True, print_background=True) ; vérifier une page par slide (compter /Type /Page) et un poids plausible.
• La marque utilise du texte en gradient ({{BRAND_GRADIENT}} sur heros / big numbers) : la solution câblée dans base.html — avant window.print(), parcourir chaque sélecteur de texte-gradient, rendre l'élément dans un <canvas> avec le même gradient, remplacer le DOM par des <img> PNG, restaurer sur afterprint. Sélecteurs à maintenir dans la constante :

jsCopy code
const GRADIENT_TEXT_SELECTORS = [
  '.gradient-text',
  '.hero-num',
  '.bigquote em',
  // + tout nouveau sélecteur qui utilise background-clip: text
];

Si tu ajoutes un composant à texte-gradient, ajoute son sélecteur à cette liste dans le deck (pas dans le starter vendorisé), sinon le PDF montrera des artefacts sur cet élément. Le rastériseur dessine chaque caractère à sa position mesurée, dans sa police : un PDF fidèle à l'écran (détails dans docs/pdf-export.md).

Autres règles print déjà câblées :

• * : -webkit-print-color-adjust: exact (force gradients / fonds)
• .stage-frame : transform: none en print (annule le scaling)
• .slide : page-break-before: always à partir de la slide 2 (évite la page blanche finale)
• .reveal : opacity: 1; transform: none (saute les animations)
• aurora / dust-grid : display: none en print (blurs et gradients 1px rendent mal)
• * : box-shadow: none; text-shadow: none (banding / halos en print)

Détail complet : 06-graphic-design/presentations/docs/pdf-export.md.

Règles brand-strict (toujours)

• Uniquement les custom properties de tokens.css. Aucun hex en dur dans le deck.
• Uniquement les familles de fonts déclarées dans tokens.css (miroir de 01-brand/style-guide.md). Fonts en local (woff2 dans 01-brand/assets/fonts/) si la marque les fournit — pas de CDN dans un livrable.
• Logo dans le chrome bas-droite de chaque slide via <use href="#brand-logo"> ; watermark ambient possible sur les slides hero.
• Border-radius : {{BRAND_BORDER_RADIUS}} — jamais 0 sauf hairlines techniques (ou exigence de marque explicite).
• Alterner fonds clairs et sombres pour le rythme. Un deck de 20 slides ne doit pas être 20 fonds identiques.
• Mascotte / motif de marque : 1 par slide maximum hors hero ; jamais sur un fond qui l'écrase.
• Les chiffres en héros : display énorme, gradient ou aplat ; texte secondaire petit. Retenue partout.
• Gradient réservé aux titres d'impact (hero, big numbers de slides respiration) — jamais sur les titres standards, sauf si la charte l'exige.
• Interdits : bento grids, glassmorphism gratuit, photos stock, copy pseudo-percutante, et tout ce qui figure dans {{BRAND_BANNED_VISUALS}}.

Vie graphique de la marque

Un deck vivant porte le motif de la marque — jamais de la décoration générique.

1. Recenser les patterns/motifs reconnaissables de la marque dans 01-brand/assets/index.md et 01-brand/style-guide.md (trames, lignes signature, emblèmes, textures) avant la direction artistique.
2. S'ils existent, les décliner plutôt qu'en inventer :
   • backgrounds à faible opacité (filigrane ~.05 sur fonds clairs, ~.07 sur fonds sombres) sur les slides de rythme : cover, intercalaires, silences ;
   • éléments d'angle discrets sur les slides éditoriales (motif en coin, tracé encre sur fond clair, jamais dans la zone du cartouche ni sous le contenu) ;
   • filets / ornements typographiques dérivés du logo-mark (citations, respirations).
3. Varier les fonds entre familles de slides (clair, teinté, sombre, texturé) au lieu d'un fond unique : même motif partout, seuls la couleur du tracé et le dosage changent — la variété reste cohérente.
4. Si la marque n'a aucun motif : en générer un avec la skill image-generation (ou le brandkit) à partir des éléments d'identité existants, et le faire valider par l'humain avant tout usage. Jamais décoratif gratuit — toujours issu de la marque.
5. Le motif reste sous tout (z-index en dessous du contenu, du chrome et du cartouche), à opacité faible, et la QA Playwright se re-passe après chaque ajout.

Référence exécutée : _examples/deck-catalogue/catalogue.html — hooks --brand-pattern / --brand-pattern-light / --corner-motif dans le :root, classes .motif / .texture / .corner / .filet-orn (voir son README, section « Vie graphique de la marque »). Le starter templates/base.html et tokens.css embarquent les mêmes hooks, inertes (none) tant que la marque n'a pas de motif validé : renseigner --brand-pattern, --brand-pattern-light et --corner-motif dans tokens.css (hors du bloc généré) avec le motif réel, jamais une décoration générique. Doc des hooks : section « Brand pattern hooks » de templates/components.md.

Rappel descendantes de titres : line-height ≥ 1.1 sur tous les niveaux de titres texte, jamais de clip. Sur un titre en background-clip: text (texte en dégradé), la zone peinte s'arrête à la boîte de l'inline-block : compensation padding: 0.22em 0.08em; margin: -0.22em -0.08em; overflow: visible obligatoire, sinon le bas des g / j / p / q disparaît (voir le tableau des pièges).

Modes de livraison

Trois modes ; défaut = (A). Ne jamais imposer un stack lourd.

A. Présentation locale

Copy code
./06-graphic-design/presentations/scripts/serve.sh

Serveur statique de la racine du dépôt sur http://localhost:5173 ; les decks sont sous /06-graphic-design/presentations/decks/. Ouvrir le deck : → avance, O vue d'ensemble, F plein écran, P impression PDF.

B. Export PDF

Copy code
./06-graphic-design/presentations/scripts/export-pdf.sh 06-graphic-design/presentations/decks/<deck>.html

PDF 1920×1080 propre (une slide par page) via Chromium headless. Voir la section export PDF ci-dessus.

C. Partage en ligne

Le deck est un fichier HTML unique, assets inlinés ou en chemins relatifs. Déposer le dossier (ou juste decks/, assets/ + 01-brand/assets/) sur n'importe quel hébergeur statique. Voir docs/hosting.md.

Livrable final

Un seul fichier : 06-graphic-design/presentations/decks/<sujet>-<date>-<version>.html, plus les éventuels logos tiers et photos référencés en relatif. Autonome (s'ouvre dans Chrome sans serveur), partageable via serve.sh, exportable en PDF, hébergeable en statique.

Après livraison : mettre à jour l'entrée du calendrier éditorial (02-strategy/calendar/calendar.md — statut + chemin du deck) et indexer le deck dans _templates/inventory.md (skill inventory, type deck).

Personnalisation par marque

{{SLIDES_SPECIFIC_RULES}}

Skills associées

• brand-check — 5 points obligatoires avant livraison
• carousel — carrousel LinkedIn PDF 1080×1350 (pas cette skill)
• image-generation — quand le deck a besoin d'un visuel absent de 01-brand/assets/
• frontend-design / ui-ux-pro-max — nouveau composant ou identité visuelle encore faible
• superpowers:brainstorming — point d'entrée quand l'utilisateur part d'une page blanche