---
name: skill-slide-propale
description: Transforme un cas client (use case validé) en une slide propale 16:9 — une vitrine « 1 cas = 1 slide » lisible en 10 secondes, à glisser dans une propale ou un deck. Sort les 6 blocs de contenu ET un prompt prêt à coller qui génère une slide HTML autonome avec effet « wahou », sans avoir à construire de design system. Déclencher quand le freelance veut une slide de preuve à partir de son cas client. Skill du Sprint Use Case (Tribu Indé), étape 2.
---

# Skill — slide propale à partir d'un cas client

Transforme un **cas client validé** (sortie de `skill-use-case`) en **une slide propale 16:9** : une vitrine **1 cas = 1 slide = 1 message**, lisible en 10 secondes, à glisser dans une propale, un deck commercial ou un message de prospection.

> **Principe directeur : c'est une vitrine, pas le dossier complet.** On ne met pas tout le cas. On met le résultat en gros, 3 étapes de méthode, 3 chiffres, 1 verbatim. Si le lecteur doit lire deux fois, c'est raté.

**Cas client fourni :** $ARGUMENTS

---

## Avant de commencer — ce dont tu as besoin

1. **Le cas client** — le use case validé : titre/résultat, TL;DR (profil + défi), méthode, résultats chiffrés, money quote.
2. **Le contexte global** — le `CLAUDE.md` racine : qui est le freelance, son identité visuelle si elle existe (couleurs, nom à mettre en footer). Claude Code le lit seul.

> ⚠️ **Slide propale = données validées uniquement.** Pas de `[à confirmer]` sur un asset commercial. Si le cas est encore un draft, signale-le et arrête-toi sur les chiffres non confirmés.

---

## Partie 1 — Les 6 blocs (le contenu)

Remplis ces 6 blocs depuis le cas client. C'est la matière, indépendante du visuel.

| Bloc | Contenu | Où le prendre |
|---|---|---|
| **1. Titre** | **Le résultat, une seule idée.** Chiffré si dispo, sinon la transformation. | Titre du livrable final / résultat phare |
| **2. Sous-titre** | 1 ligne qui ajoute le punch (le « sans quoi », la condition remarquable). | Résultats / contexte |
| **3. Profil + Défi** | ICP en 1 ligne · le challenge en 1 ligne. | TL;DR |
| **4. Méthode** | **3 étapes max**, verbes d'action, condensées. | Tableau méthodologie (on garde l'essentiel) |
| **5. Résultats** | Le chiffre clé + 1 indicateur + (option) coût & ROI. **3 lignes max.** | Tableau résultats |
| **6. Verbatim** | **1 seule phrase** — la money quote la plus forte. | Money quote / ROI émotionnel |

**Règles de remplissage :**
- **Titre = le bénéfice client**, pas « projet X ». Une idée, pas deux (le reste descend en sous-titre ou dans les résultats).
- **Méthode : 3 étapes, pas 5.** Si le cas en a plus, fusionne ou coupe les moins vendeuses.
- **1 verbatim, le plus fort.** Jamais deux.
- **Pas de chiffre ?** (métier créatif, conseil, support) → titre = transformation qualitative, et « Résultats » devient 3 bénéfices tangibles (process cadré, charge mentale en moins, actif réutilisable). Ne force jamais un nombre.
- **Anonymiser** si pas d'accord de publication : profil ICP au lieu du nom du client.

Sors d'abord ces blocs en clair (texte), pour que le freelance valide le fond avant le visuel.

### 🔀 Point de décision (à poser APRÈS validation des blocs)
Ne génère jamais le HTML par défaut. Une fois les 6 blocs validés, demande au freelance ce qu'il veut :

- **Option A — On s'arrête au brief.** Tu lui livres les 6 blocs propres (le « mini-brief »), prêts à coller dans **son propre template** (Canva, Google Slides, PowerPoint…). C'est tout. Beaucoup ont déjà une charte à eux : inutile de générer un HTML qu'ils n'utiliseront pas.
- **Option B — Tu génères la slide HTML** (voir Partie 2). Pour ceux qui n'ont pas de template et veulent l'effet « wahou » tout de suite.

> Par défaut, **propose les deux et laisse choisir.** Ne pars pas tête baissée sur le HTML.

---

## Partie 2 — Générer la slide HTML (le visuel, sans outil externe)

> ⚠️ Uniquement si le freelance a choisi l'Option B ci-dessus.

Pas besoin de Canva, de Claude Design ni de copier un prompt ailleurs : le freelance est **déjà dans Claude Code**, qui sait écrire un fichier HTML directement sur son disque. **Tu génères toi-même la slide**, en un seul fichier autonome. Toute la charte tient dans le fichier — aucun design system, aucun composant à configurer.

**Le geste pour le freelance :**
1. Il valide les 6 blocs de la Partie 1 (le fond).
2. Tu écris `slide-propale.html` dans le dossier du cas client.
3. Il double-clique le fichier → ça s'ouvre dans son navigateur → il fait une capture (ou imprime en PDF).

### Ce que tu produis : un fichier `slide-propale.html`

Contraintes techniques :
- **Format 16:9, 1280×720**, un **seul fichier autonome** : tout le CSS dans une balise `<style>`, **une seule Google Font** importée par `<link>`, aucune autre dépendance.
- Rendu **prêt à screenshoter**, type slide de deck premium.

**Direction artistique** (c'est ça, la « charte » — elle vit dans le fichier) :
- **Palette** : reprends les couleurs de marque du `CLAUDE.md` si elles existent. Sinon, défaut propre : fond en dégradé indigo profond `#2B2A6B → #4F46E5`, texte blanc, accent jaune `#FFD23F`.
- **Typo** : une sans-serif géométrique et lisible (Plus Jakarta Sans, Poppins ou Sora). Titre très gros et gras, le reste aéré.
- **Ambiance** : sobre, beaucoup d'air, hiérarchie nette, ombres douces sur les cartes. Pas de surcharge, pas d'emoji décoratif.

**Placement du contenu** (depuis les blocs de la Partie 1) :
- **Titre** (BLOC 1) en très gros — c'est le héros de la slide.
- **Sous-titre** (BLOC 2) juste dessous, plus léger.
- **Ligne contexte** : « Profil : [BLOC 3 profil] » · « Défi : [BLOC 3 défi] ».
- **Deux cartes côte à côte** :
  - Carte **MÉTHODE** : liste numérotée des 3 étapes (BLOC 4).
  - Carte **RÉSULTATS** : les 3 lignes (BLOC 5), avec **le chiffre clé en très gros** dans la carte (c'est la preuve).
- **Verbatim** (BLOC 6) en exergue en bas, entre guillemets, en italique.
- **Footer** discret en bas à droite : nom / identité du freelance (du `CLAUDE.md`).

**Règle de hiérarchie** : le titre et le chiffre clé doivent être ce que l'œil voit en premier. Si un texte déborde, raccourcis-le plutôt que de réduire la lisibilité.

### Pourquoi ça marche sans design system
- **La charte vit dans le fichier** : la direction artistique ci-dessus EST la charte. Pour la changer, on édite la palette et la typo dans le `<style>`, pas un système de composants.
- **Un seul fichier autonome** : aucune install, aucun build, aucun outil tiers. Le freelance ouvre le `.html` dans son navigateur, point.
- **Réutilisable** : relance le skill sur un autre cas → une slide cohérente à chaque fois → un deck homogène sans avoir jamais « monté » de template.

> Si le freelance a une vraie identité de marque (couleurs, police), branche-la depuis le `CLAUDE.md`. Sinon, le défaut indigo/jaune donne déjà un rendu propre.

### La personnaliser : une phrase à dire à Claude Code
Une fois la slide générée, le freelance n'édite **rien à la main**. Il décrit le changement, Claude Code modifie le fichier. Donne-lui ces formulations toutes faites :

- **Couleurs** → *« Reprends `slide-propale.html` et passe la palette en [ta couleur principale] + [ta couleur d'accent]. Garde le fond foncé / passe le fond en clair. »*
- **Typo** → *« Change la police pour [nom d'une Google Font, ex : Poppins, Sora, Fraunces]. »*
- **Ton chiffre/élément à mettre en avant** → *« Mets [tel chiffre] en très gros à la place, c'est lui la preuve. »*
- **Marque** → *« Mets mon nom "[Prénom Nom]" en bas à droite et reprends mes couleurs de marque. »*

> Conseil à transmettre : changer **une chose à la fois**, regarder le rendu (rouvrir le `.html`), puis enchaîner. C'est plus sûr que tout demander d'un coup.

---

## Étape finale — Passer le filtre qualité
- **Le fond avant le beau** : si un chiffre est faux ou non validé, le visuel ne sauve rien. Vérifie les blocs avant de générer le prompt.
- **Une idée par bloc.** Si le titre a deux idées, coupe.
- **Pas de jargon AI-friendly** (« levier », « game-changer ») dans les textes de la slide.
- **Lisible en 10 secondes** : relis comme si tu la voyais 3 secondes dans un deck. Si tu rates le message, simplifie.

---

## ✅ À adapter à ton business (la seule chose que tu changes)
Ton `CLAUDE.md` (identité, couleurs de marque, nom) personnalise le footer et la `DIRECTION ARTISTIQUE`. Le format de la slide et le prompt sont génériques : ils lisent ton contexte et ton cas client tout seuls.