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/ :

06-graphic-design/presentations/
├── decks/                  ← decks générés (un .html par deck)
├── briefs/                 ← briefs par deck (intention, audience, décision, sources)
├── templates/
│   ├── base.html           ← squelette (chrome, nav, mode print, hooks QA)
│   ├── components.md       ← catalogue de composants + guide de sélection
│   └── components/         ← layouts de slides prêts à coller
├── scripts/
│   ├── qa.py               ← check Playwright overflow (obligatoire)
│   ├── serve.sh            ← serveur statique local :5173
│   ├── export-pdf.sh       ← export PDF 1920×1080 propre
│   └── export_pdf.py       ← worker Chromium headless
├── docs/
│   ├── design-system.md    ← principes, anti-patterns, échelle typo
│   ├── engine-parity.md    ← liste CANONIQUE des features du moteur + règle de parité
│   ├── pdf-export.md       ← rastérisation du texte en gradient expliquée
│   └── hosting.md          ← Netlify Drop, S3, GitHub Pages, etc.
└── tokens.css              ← variables CSS slides, dérivées de 01-brand/

Base technique : le starter templates/base.html embarque le moteur complet (parité avec _examples/deck-catalogue/catalogue.html, voir docs/engine-parity.md) : plein écran, overview groupée, export PDF, folios auto, hooks de pattern. Partir du starter (ou du deck approuvé le plus récent dans decks/ pour ses compositions) — mais le moteur, lui, ne se réécrit jamais : il se reprend tel quel et qa.py vérifie sa présence.

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, 01-brand/voice.md et tokens.css ne contiennent plus de {{...}}.
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

1. 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.
2. 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.
3. 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.
4. 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

1. Décider quels patterns 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.
2. Tester le tout premier composant via Playwright avant d'en ajouter d'autres — attrape tôt les bugs d'échelle et de typo.
3. 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.
4. 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

1. Logo de marque : inline en ` depuis 01-brand/assets/. Toujours fill="currentColor" sur les paths internes — le shadow DOM du ne reçoit PAS fill: url(#gradient) ; piloter la couleur via color:` sur le wrapper.
2. 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.
3. 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.
4. Co-branding : logo partenaire monochrome foncé sur fond sombre → filter: brightness(0) invert(1) pour le passer en blanc.
5. Logos d'outils tiers (au besoin), ordre de tentative : (a) cdn.simpleicons.org//, (b) api.iconify.design/logos/.svg ou api.iconify.design/simple-icons/.svg?color=, (c) WebFetch du site officiel + extraction du SVG inline, (d) fallback PNG google.com/s2/favicons?domain=&sz=256. Sauvegarder sous 01-brand/assets/. et référencer en relatif. Re-vérifier les URLs à chaque projet — elles dérivent.

Phase 5 — Contenu

1. É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).
2. Jamais de point final sur un titre. Jamais de tiret cadratin (—) dans le contenu visible : –, virgule ou reformulation.
3. 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/.
4. Vérifier slogans et formules signature : uniquement les versions validées de 01-brand/voice.md.
5. Baseline footer : {{COMPANY_NAME}} · {{COMPANY_WEBSITE}} en signature bottom du chrome sur chaque slide hors hero (déjà câblé dans base.html).

Phase 6 — Navigation

1. 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), 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.
2. 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)

1. Exécuter python scripts/qa.py decks/.html depuis 06-graphic-design/presentations/. Doit retourner All slides clean. 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.
• Écart contenu bas / chrome bas ≥ 16px sur chaque slide.

1. Re-tester à 1366×768 et 1024×600 pour confirmer le scaling responsive. Inspecter visuellement chaque screenshot.
2. 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

1. 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.
2. Garder v1 intact pendant l'itération. Révision → v2 à côté. Une fois approuvé, supprimer v1 si souhaité.
3. Confirmer que l'utilisateur a prévisualisé le deck (./scripts/serve.sh puis http://localhost:5173/decks/.html) avant d'annoncer terminé.

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

Plancher : aucun texte de contenu sous ~18-20px sur le cadre 1920×1080 (équivalent 18pt minimum en projection ; corps idéal 20-24pt). Seuls les labels mono du chrome (folio, signature, tag-meta) restent à 12-14px. Captions et notes ≥ 15px.

É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)

| Symptôme | Cause | Fix | |---|---|---| | Descendantes g j p q (et % O 9) coupées sur display | background-clip: text ne peint que dans la boîte de l'inline-block, dont la hauteur = line-height ; en display serré les descendantes sortent de la boîte | line-height ≥ 1.1 sur les titres texte, letter-spacing: -0.025em max, et sur le span en gradient : padding: 0.22em 0.08em; margin: -0.22em -0.08em; overflow: visible | | Texte en gradient rendu différemment après transform: scale() | -webkit-background-clip: text + rendu sub-pixel | display: inline-block; transform: translateZ(0); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision | | Halos colorés autour du texte en gradient en PDF/print | background-clip: text + display: inline-block clippent mal en print | En @media print, remplacer le gradient par un aplat var(--brand-primary-deep) — ou rastériser (voir export PDF) | | Chiffre + unité qui passent sur 2 lignes | display: block ou colonne de grille trop étroite | display: inline-flex; align-items: baseline; white-space: nowrap, élargir la colonne | | Logo invisible après embed | fill: url(#grad) ne traverse pas le shadow DOM du ` | fill="currentColor" dans le , color: sur le wrapper (slide sombre : color: var(--brand-light)) | | Élément qui déborde sur le chrome bas | Composant trop haut, padding-bottom trop court | Audit Playwright, réduire font-sizes / paddings / gaps ; jamais de padding-bottom de slide avec le même gradient, remplacer le DOM par des ` PNG, restaurer sur afterprint`. Sélecteurs à maintenir dans la constante :

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, sinon le PDF montrera des artefacts sur cet élément.

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 `` ; watermark ambient possible sur les slides hero.
• Border-radius : {{BRANDBORDERRADIUS}} — 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.

…

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: Littlpinguin
• Source: Littlpinguin/marketing-cockpit-template
• License: MIT

Install and usage instructions live in the source repository linked above.