ckm:slides

Vue d’ensemble

Qu’est‑ce que ckm:slides ?

ckm:slides est une compétence d’IA pour concevoir des jeux de slides HTML complets et stratégiques. Au lieu de produire une liste de bullet points, elle guide l’agent pour générer une structure de présentation cohérente, prête pour le navigateur, en s’appuyant sur :

• Chart.js pour les visualisations de données
• Des design tokens pour des thèmes visuels cohérents
• Des mises en page responsives adaptées aux différents appareils
• Des formules de copywriting pour des messages persuasifs
• Des stratégies de slides éprouvées pour les types de decks les plus courants

La compétence est optimisée pour créer des présentations marketing, pitch decks, rapports à destination des parties prenantes et démos produit, où l’histoire et la structure sont toutes deux essentielles.

À qui s’adresse ckm:slides ?

ckm:slides est adapté si vous :

• Concevez des jeux de slides pour le marketing, les ventes, la levée de fonds ou le reporting
• Préférez des présentations HTML/JavaScript à des fichiers PowerPoint traditionnels
• Voulez des patterns de mise en page et des templates réutilisables plutôt que partir d’une slide blanche
• Avez besoin de structures narratives claires (par ex. YC seed deck, sales pitch, QBR) intégrées à votre processus

Les développeurs, product marketers, fondateurs et équipes data/analytics peuvent tous utiliser cette compétence pour passer d’un « sujet + nombre de slides souhaité » à un plan de présentation HTML structuré.

Quels problèmes cela résout‑il ?

ckm:slides vous aide à éviter :

• Des decks désorganisés sans arc narratif clair
• Des mises en page et typographies incohérentes d’une slide à l’autre
• Un texte de slide faible et générique qui ne convainc pas
• Le câblage manuel des graphiques Chart.js dans chaque nouvelle présentation

En combinant patterns de mise en page, formules de copywriting et template HTML prêt à l’emploi, la compétence fournit à l’agent tout ce dont il a besoin pour planifier un deck solide et générer un HTML prêt à être implémenté.

Quand ckm:slides n’est‑il pas adapté ?

ckm:slides n’est probablement pas idéal si vous :

• Avez besoin de fichiers PowerPoint ou Keynote natifs plutôt que d’HTML
• Ne travaillez pas sur le front‑end ou ne pouvez pas héberger d’assets HTML/JS
• N’avez besoin que d’une slide unique ponctuelle plutôt que d’un deck complet

Dans ces cas‑là, un générateur de slides plus simple, uniquement textuel, ou un outil qui exporte en .pptx sera sans doute plus approprié.

Comment l’utiliser

Installation et configuration

Pour ajouter la compétence slides depuis le repository nextlevelbuilder/ui-ux-pro-max-skill à l’environnement de votre agent, installez‑la avec :

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill slides

Après l’installation :

1. Ouvrez SKILL.md sous .claude/skills/slides pour comprendre le comportement général et les arguments.
2. Consultez le dossier references/ pour voir les patterns et templates sur lesquels la compétence s’appuie :
   • references/layout-patterns.md
   • references/html-template.md
   • references/copywriting-formulas.md
   • references/slide-strategies.md
   • references/create.md

Aucune étape de build supplémentaire n’est requise pour la compétence en tant que telle ; elle s’exécute dans votre environnement d’agent existant. Vous aurez toutefois besoin d’un moyen de servir ou d’ouvrir le HTML généré (par exemple en l’enregistrant dans un fichier puis en l’ouvrant dans un navigateur).

Pattern d’appel de base

La compétence attend des arguments sous la forme :

• [topic] [slide-count]

et prend en charge une sous‑commande create. Un appel typique depuis le prompt de votre agent pourrait ressembler à :

Use the ckm:slides skill to create a "create" deck about "Series A fundraising narrative" with 12 slides.

En interne, le routage suit ce flux (défini dans SKILL.md) :

1. Analyser la sous‑commande depuis $ARGUMENTS (premier mot, par ex. create).
2. Charger le fichier de référence correspondant (pour create, c’est references/create.md).
3. Utiliser les arguments restants (sujet et nombre de slides) pour générer la structure et le contenu du deck.

Workflow recommandé pour créer un nouveau deck

1. Définir l’objectif et l’audience

Avant d’appeler ckm:slides, clarifiez :

• L’objectif (par ex. lever un seed, conclure un contrat enterprise, informer le board)
• L’audience principale (VCs, prospects, direction, équipes internes, participants à une conférence)
• Le nombre approximatif de slides

Transmettez ce contexte dans vos arguments pour que la compétence puisse choisir la bonne structure et les bons patterns.

2. Choisir une stratégie de slides (ou laisser la compétence choisir)

Le fichier references/slide-strategies.md répertorie 15 structures de deck courantes, telles que :

• YC Seed Deck (10–12 slides)
• Sales Pitch (7–10 slides)
• Product Demo (5–8 slides)
• QBR, Board Meeting, Webinar, Workshop, etc.

Vous pouvez soit :

• Demander explicitement une structure (par ex. « Use a YC seed deck structure »), soit
• Laisser l’agent déduire la meilleure correspondance selon votre objectif et votre audience.

Chaque stratégie inclut un plan slide par slide et un arc émotionnel (par ex. curiosity → frustration → hope → confidence → trust → urgency) pour maintenir une narration cohérente.

3. Générer le texte avec des formules persuasives

Le fichier references/copywriting-formulas.md propose 25 formules, dont :

• PAS (Problem–Agitate–Solution) pour les slides centrées sur un problème
• AIDA (Attention–Interest–Desire–Action) pour les accroches et CTA
• FAB (Features–Advantages–Benefits) pour les slides de fonctionnalités et produit
• Cost of Inaction et Before–After–Bridge pour l’urgence et la transformation

La compétence utilise ces formules pour structurer titres, corps de texte et CTAs slide par slide. Encouragez‑la à :

• Associer chaque type de slide à une formule appropriée
• Utiliser le langage de template fourni comme point de départ
• Ajuster le ton à votre marque et au niveau de sophistication de votre audience

4. Appliquer les patterns de mise en page et les animations

Le fichier references/layout-patterns.md définit 25 patterns de mise en page basés sur CSS, tels que :

• Title Slide
• Problem Statement
• Solution Overview
• Feature Grid
• Metrics Dashboard
• Comparison Table
• Timeline Flow
• Team Grid
• Pricing Cards
• CTA Closing

Chaque pattern inclut :

• Un cas d’usage recommandé
• Des exemples de classes d’animation (animate-fade-up, animate-stagger, animate-scale, etc.)
• Des exemples de structures CSS pour les principaux types de slides

Lorsque vous demandez à l’agent de générer votre deck, ajoutez des instructions du type :

For each slide, assign a layout class from layout-patterns.md and, where relevant, an animation class.

Cela permet de garder un deck visuellement cohérent et facile à thématiser en CSS.

5. Utiliser le template de slides HTML

Le fichier references/html-template.md fournit une structure HTML complète pour le deck, incluant :

• Un <head> avec Chart.js intégré via CDN
• Un système de thème piloté par des tokens via des variables CSS :root
• Un conteneur .slide-deck et des éléments .slide dimensionnés en 16:9
• Des styles de base pour la typographie et la mise en page

Un workflow typique consiste à :

1. Partir du template HTML fourni.
2. Insérer les slides générées sous forme d’éléments <section> ou <div> avec les classes appropriées.
3. Coller vos design tokens (par ex. depuis embed-tokens.cjs) dans le bloc :root.
4. Ajouter les éléments <canvas> Chart.js et le JavaScript correspondant pour les graphiques.

La compétence peut produire :

• Un brouillon du fichier HTML complet, ou
• Uniquement la structure des slides dans le <body> que vous collez dans votre propre shell template.

6. Connecter les visualisations de données Chart.js

Pour les decks pilotés par les données (dashboards de métriques, slides de traction, QBR, rapports au board), ckm:slides est conçu pour fonctionner avec Chart.js (comme montré dans html-template.md).

Vous pouvez guider l’agent pour :

• Créer des éléments <canvas> pour les graphiques à l’intérieur des mises en page concernées
• Proposer des objets de configuration Chart.js (datasets, labels, couleurs) en fonction de vos métriques
• Intégrer des blocs <script> qui initialisent ces graphiques au chargement de la page

Vous restez responsable de fournir les données réelles et de valider la configuration des graphiques, mais la compétence fournit le squelette structurel.

7. Exporter et présenter

Une fois le HTML du deck prêt :

1. Enregistrez‑le en fichier .html dans votre projet.
2. Ouvrez‑le directement dans votre navigateur ou servez‑le via votre serveur web habituel.
3. Utilisez la navigation au clavier ou un JS personnalisé (si vous en ajoutez) pour passer d’une slide à l’autre.

Si vous devez partager avec des parties prenantes habituées à PowerPoint, vous pouvez partager votre écran avec le navigateur ou exporter les slides en images/PDF via la fonction d’impression en PDF de votre navigateur.

Conseils pour de meilleurs résultats avec ckm:slides

• Soyez explicite sur le nombre de slides et la structure quand c’est possible.
• Indiquez à l’agent quelle décision le deck doit aider à prendre (financement, achat, alignment, etc.).
• Précisez quelles slides doivent inclure des graphiques et de quel type (line, bar, pie, etc.).
• Demandez un tableau récapitulant pour chaque slide le numéro, le titre, l’objectif, le layout et la formule de copywriting principale afin de valider le plan avant de générer le contenu complet.

FAQ

Que génère exactement ckm:slides ?

ckm:slides est conçu pour générer :

• Un plan slide par slide avec objectifs et arc narratif
• Un brouillon de texte pour chaque slide, en utilisant des formules comme PAS, AIDA et FAB
• Des suggestions de layout basées sur les patterns prédéfinis dans layout-patterns.md
• Une structure HTML/CSS pour un deck responsive basé sur des tokens
• Le squelette Chart.js pour les slides de data visualization

La sortie exacte dépend de la façon dont vous promptiez l’agent, mais le cœur reste un contenu de slides HTML stratégique plutôt qu’un document texte générique.

Est‑ce que ckm:slides crée des fichiers PowerPoint (.pptx) ?

Non. ckm:slides se concentre sur les jeux de slides HTML. Il utilise HTML, CSS et Chart.js pour créer des présentations que vous ouvrez dans un navigateur. Si vous avez besoin de fichiers .pptx, vous devrez ajouter une étape d’export ou de conversion en dehors de cette compétence.

Puis‑je personnaliser le design pour l’adapter à ma marque ?

Oui. Le fichier html-template.md utilise des design tokens via des variables CSS. Vous pouvez :

• Remplacer les valeurs de tokens d’exemple dans :root par vos couleurs, typographies et espacements de marque
• Étendre les classes CSS pour des layouts ou animations personnalisés
• Ajouter vos propres composants (logos, pieds de page, styles de watermark)

ckm:slides fournit une base structurée ; à vous d’y appliquer votre système de marque.

Comment fonctionne la sous‑commande create ?

La sous‑commande create est le point d’entrée principal décrit dans references/create.md. Lorsque vous invoquez create avec des arguments, la compétence :

1. Traite <task>$ARGUMENTS</task> comme la description du deck souhaité.
2. Utilise la base de connaissances (layout patterns, copywriting formulas, slide strategies, HTML template) pour concevoir un deck persuasif aligné sur cette tâche.

Vous n’appelez généralement pas create directement en CLI ; vous demandez plutôt à votre agent d’utiliser la compétence ckm:slides avec la sous‑commande create.

Pour quels types de decks ckm:slides est‑il particulièrement adapté ?

D’après les patterns de slide-strategies.md, ckm:slides est particulièrement utile pour :

• Les decks de levée de fonds (YC Seed Deck, Series A)
• Les sales pitches et démos produit
• Les quarterly business reviews (QBR) et mises à jour au board
• Les webinars, workshops et interventions en conférence
• Les études de cas et présentations d’analyse concurrentielle

Tous ces formats reposent sur une histoire claire, un texte persuasif et souvent des graphiques — exactement ce pour quoi la base de connaissances de la compétence est optimisée.

Comment gérer la navigation et les contrôles clavier ?

Le template HTML de base se concentre sur la mise en page et le visuel. La navigation (flèches du clavier, clic pour avancer, indicateurs de progression) n’est pas entièrement définie dans l’exemple de référence et reste à votre charge. Vous pouvez :

• Ajouter du JavaScript pour écouter les touches ArrowLeft / ArrowRight et changer la slide visible
• Utiliser des hash d’URL ou des data attributes pour suivre la slide active
• Vous intégrer à un framework de slideshow HTML existant si vous le préférez

ckm:slides vous aide à concevoir le contenu et la structure ; le comportement de navigation dépend de votre setup front‑end.

Dois‑je connaître JavaScript pour utiliser ckm:slides ?

Une familiarité de base avec le front‑end est très utile, en particulier si vous :

• Souhaitez modifier ou étendre le template HTML
• Devez configurer des graphiques Chart.js et de l’interactivité

Cependant, l’essentiel du travail (structure narrative, choix du layout, patterns de copywriting) n’est pas technique. Les non‑développeurs peuvent en tirer parti en collaborant avec un développeur pour finaliser le HTML et les graphiques.

Où puis‑je voir tous les patterns et stratégies disponibles ?

Ouvrez le répertoire de la compétence (généralement .claude/skills/slides) et consultez :

• SKILL.md pour le comportement global, les arguments et le routage
• references/layout-patterns.md pour les layouts et structures CSS
• references/html-template.md pour le shell HTML de base du slide deck
• references/copywriting-formulas.md pour les frameworks de texte persuasif
• references/slide-strategies.md pour les structures de decks complètes et leurs arcs émotionnels

Parcourir ces fichiers vous donne une vision claire de ce que ckm:slides peut faire et vous aide à rédiger des prompts plus précis lors de la génération de decks.