wigtn/wigtn-plugins

Générateur de Présentations WIGTN (PPT Generator)

Compétence pour créer une présentation HTML unique incarnant l'identité de la marque WIGTN. Sans modèle (.pptx), Claude conçoit chaque fois une nouvelle présentation à partir des principes de marque et des références.

Principes clés

1. Basé sur des principes, sans dépendance aux modèles — Ne dépend d'aucun fichier modèle fixe. Lit les tokens de marque + les règles de layout dans references/ et génère la présentation à la volée.
2. Fidélité à la marque (Brand Fidelity) — Utiliser uniquement les valeurs HEX exactes. Interdit les couleurs « similaires ». Encre #1E1E28, Violet Signature (Pantone 265) #9B51E0.
3. Répétition des points violets signature — Le point violet (.) issu du point dans wigtn. est la signature de la marque. Chaque slide doit comporter au moins un motif de point violet de manière cohérente (point à côté du numéro de page, point dans le numéro de section, point dans un coin, points de progression, etc.).
4. Double thème Light / Dark — Choisir l'un ou l'autre en fonction de l'environnement de présentation. Ne pas les mélanger dans une même présentation.
5. Ajustement au viewport — Chaque slide fait exactement 100vh. Interdiction absolue de faire défiler le contenu à l'intérieur d'un slide.
6. Pas de slide avec uniquement du texte — Chaque slide doit contenir au moins un élément visuel (forme, bloc de couleur, point, ligne, icône).
7. Montrer, ne pas dire — Ne pas demander de design verbalement. Une fois le thème/le contenu fixé, générer immédiatement, montrer avec des captures d'écran, puis ajuster.
8. Zéro dépendance — Un seul fichier HTML. Présentable directement dans un navigateur (une seule ligne <link> CDN autorisée pour les polices).

Marque (Résumé)

Token	Valeur	Usage
Ink (Bleu marine)	#1E1E28	Fond Dark / Texte Light
Purple (Pantone 265)	#9B51E0	Point signature, accent, liens
Purple Deep	#6B2EAA	Ombres des points, profondeur, fin de dégradé
White	#FFFFFF	Fond Light / Texte Dark

Lire impérativement references/brand.md avant d'appliquer la palette complète (snippets :root Light/Dark), les règles d'utilisation des variantes de logo, la typographie et les règles des points signature.

Workflow (4 phases)

Phase 0 : Thème + contenu (1 AskUserQuestion)

Poser une seule AskUserQuestion qui regroupe :

1. Thème — Light (salle lumineuse, type document) / Dark (scène, type keynote). Recommandation incluse.
2. Objectif — Conférence / Partage d'équipe / Pitch deck / Formation / Rapport à la direction.
3. Volume — 5–10 slides / 10–20 slides / 20+ slides.
4. Message clé & images — Ce qu'il faut transmettre, présence et emplacement des images.

Vérifier également les métadonnées à mettre sur la couverture : nom du présentateur, date, nom de l'entreprise/produit.

Phase 1 : Conception de la structure

Décomposer le contenu en une carte des slides. Limite de densité : la couverture = titre + sous-titre ; le corps = maximum 4–6 puces (ou blocs visuels équivalents) par slide. Si dépassement, diviser automatiquement.

Structure de base : Couverture → Table des matières → (Séparation de section → Corps N) × chapitres → Conclusion (Merci). Pour chaque slide, choisir le type de mise en page dans references/design-guide.md.

Phase 2 : Diagrammes (si nécessaire)

Si un diagramme de flux ou d'architecture est nécessaire, appeler la compétence handdrawn-diagram du même plugin pour créer un diagramme committable (SVG+PNG) et l'insérer dans le slide. Si le style dessin à la main est trop lourd, dessiner directement avec des formes CSS/SVG simples.

Phase 3 : Génération HTML

1. Lire references/brand.md et references/design-guide.md
2. Écrire un seul fichier HTML en appliquant les tokens :root du thème choisi. Règles obligatoires :
   • .slide { height: 100vh; height: 100dvh; overflow: hidden; }
   • Toutes les polices et espacements utilisent clamp(min, pref, max) (pas de px fixes seuls)
   • Media queries basées sur la hauteur (max-height: 700px/600px) pour réduire progressivement
   • Barre de progression + points de navigation (violets) + clavier/tactile/glissement + prefers-reduced-motion
   • Le point violet signature répété sur chaque slide
   • Insertion du logo : suivre les règles ci-dessous dans « Utilisation du logo »
3. Remplir le contenu, animations sobres (professionnelles : 0.2–0.4s fondu/glissement).

Phase 4 : Validation et livraison

Vérifier avec des captures d'écran l'ajustement au viewport, la cohérence de la marque et la présence du point signature. Si Playwright/Chrome est disponible, rendre un PNG par slide et lire pour vérifier ; sinon, inviter l'utilisateur à ouvrir le fichier dans un navigateur.

Génération terminée :
- HTML : docs/{nomfichier}-presentation.html  (dans le navigateur, touche F pour plein écran → flèches/glissement)

Utilisation du logo

Le logo WIGTN est un actif réservé à l'équipe, donc il n'est pas commité dans le plugin public (.gitignore). Chercher dans l'ordre de priorité :

1. ${CLAUDE_PLUGIN_ROOT}/skills/wigtn-ppt/assets/logo/ — Logo inclus (local à l'équipe ; *.png est gitignore donc absent du clone public)
2. <project>/docs/images/ — Emplacement local des actifs de marque de l'équipe (également gitignore, non inclus dans le dépôt public)
3. Fallback : mot‑clé CSS/SVG — Si les deux chemins ci‑dessus ne contiennent pas de PNG (clone public, nouvel environnement par défaut), rendre wigtn + le point violet directement avec une police/SVG (snippet dans brand.md). Ce fallback fonctionne toujours.

Lorsque vous utilisez le logo, copier le fichier dans l'espace de travail de la présentation (par ex. docs/workspace/) puis y faire référence en chemin relatif dans le HTML. Suivre la table de correspondance dans brand.md pour les variantes par thème (Light → logo NAVY, Dark → logo WHITE).

Anti-Patterns (à éviter)

• Dégradé violet cliché (#6366f1), violet/rose basique sur fond blanc → Utiliser uniquement le violet WIGTN #9B51E0
• Utiliser Inter/Roboto/Arial comme police d'affichage (casse le ton de la marque)
• Centrer tous les éléments, répéter une grille de cartes identiques
• Utiliser min-height (autorise le débordement du slide) → utiliser impérativement height
• Omission du point signature, mélange de thèmes, remplacement par une couleur « similaire »

Références

• references/brand.md — Système de marque WIGTN : palette Light/Dark, variantes et placement du logo, règles des points violets, typographie, fallback mot‑clé CSS
• references/design-guide.md — Principes de mise en page par type de slide (couverture/table des matières/section/corps/conclusion), règles du viewport, animations, anti‑patterns
• Compétence design-system-reference — Réutiliser les idées de densité de layout et hiérarchie typographique (Swiss Minimal, Editorial, Minimal Corporate sont les plus proches du ton WIGTN). Cependant, les couleurs, points et logo sont toujours remplacés par les tokens WIGTN.
• Compétence handdrawn-diagram — Slides nécessitant un diagramme

Checklist

• Phase 0 : AskUserQuestion pour recueillir en une fois le thème (Light/Dark) + le contenu
• Phase 1 : Carte des slides + limite de densité
• Phase 2 : Identifier les slides nécessitant un diagramme (handdrawn-diagram)
• Phase 3 : Lire brand.md + design-guide.md → Générer un seul HTML (viewport, point violet, logo)
• Phase 4 : Valider avec captures d'écran → livrer