---
name: skill-onepager
description: Transforme un cas client (use case validé) en un one-pager HTML — une page web autonome, scrollable, animée, qui raconte le cas en entier (contexte → méthode → résultats → verbatims). À envoyer en lien ou exporter en PDF dans une propale. Généré directement par Claude Code, sans outil externe ni design system. Déclencher quand le freelance veut une vitrine complète et léchée de son cas client. Skill du Sprint Use Case (Tribu Indé), étape 2.
---

# Skill — one-pager HTML à partir d'un cas client

Transforme un **cas client validé** (sortie de `skill-use-case`) en **one-pager HTML** : une page web autonome, scrollable et animée, qui déroule le cas en entier. À envoyer en lien à un prospect, à glisser dans une propale, ou à exporter en PDF.

> **Principe directeur : le one-pager, c'est le cas client complet, mais habillé.** Là où la slide propale est une vitrine de 10 secondes, le one-pager raconte toute l'histoire : contexte → obstacles → méthode étape par étape → résultats chiffrés → verbatims. C'est la version « on prend le temps de lire ».

**Cas client fourni :** $ARGUMENTS

---

## Avant de commencer — ce dont tu as besoin

1. **Le cas client** — le use case validé en entier : TL;DR, contexte, obstacles, méthode (le tableau des étapes + livrables), résultats (le tableau avant/après), tous les verbatims, la money quote.
2. **Le contexte global** — le `CLAUDE.md` racine : qui est le freelance (ICP, offre), **son ton et son vocabulaire**, son identité de marque (couleurs, nom), sa bio/contact. Claude Code le lit seul ; s'il manque, demande-le. C'est lui qui détermine la voix des textes et le bloc de contact en bas de page.

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

---

## Ce que tu produis : un fichier `onepager.html`

Pas de Canva, pas d'outil externe, pas de copier-coller ailleurs : le freelance est **déjà dans Claude Code**. **Tu écris toi-même** le fichier `onepager.html` dans le dossier du cas client. Il le double-clique → ça s'ouvre dans son navigateur → il partage le lien ou imprime en PDF.

> 🔀 **Valide le fond avant de générer.** Ne pars pas direct sur le HTML : récapitule d'abord en une ligne ce que tu vas mettre (le titre/chiffre clé, les étapes, les verbatims retenus) et confirme avec le freelance. Une fois le fond OK, tu génères le fichier. C'est une page longue : autant la générer une fois sur le bon contenu.

### Contraintes techniques
- **Un seul fichier autonome.** Tout le CSS dans une balise `<style>`, **une seule Google Font** importée par `<link>`. Les animations peuvent utiliser GSAP via CDN (`<script src>`), c'est la seule dépendance tolérée. **Aucune image locale** (pas de chemin `assets/…` qui casserait) : badges numérotés, puces CSS, emojis unicode si besoin.
- **Page scrollable** (pas un format figé) : largeur de lecture ~880px centrée, beaucoup d'air.
- **Imprimable en PDF proprement** (le rendu doit tenir sans dépendre des animations).

### Structure (calquée sur le cas client)
1. **En-tête** : un `eyebrow` (« Cas client · [domaine] ») + le **titre = le résultat** (chiffré si dispo) + un sous-titre d'une phrase qui résume la transformation.
2. **Carte TL;DR** (mise en avant, légèrement inclinée, tampon « TL;DR ») : Profil · Défi · Solution · Résultat (avec le chiffre clé surligné) · Verbatim.
3. **Section 1 — Contexte initial** : le récit d'arrivée + un verbatim de départ + la liste des obstacles en puces.
4. **Section 2 — Méthodologie** : le **tableau des étapes** (#, étape, objectif, livrables) + les verbatims « ce qui fait la différence ».
5. **Section 3 — Résultats** : le **tableau avant/après** + les verbatims « ROI émotionnel ».
6. **Money quote** finale, en exergue (bandeau coloré).
7. **Pied de page — contact** : une signature reprise du `CLAUDE.md` (nom du freelance, une ligne de bio « J'accompagne [cible] sur [sujet] », CTA ou moyen de contact). C'est le « je suis [Prénom]… » qui clôt la page.

### Direction artistique (la « charte » — elle vit dans le fichier)
- **Palette** : reprends les couleurs de marque du `CLAUDE.md` si elles existent. Sinon, défaut propre et chaleureux : fond beige clair, texte sombre, accent bleu franc + surlignage jaune sur les chiffres.
- **Typo** : une sans-serif lisible et solide (Inter, Plus Jakarta Sans). Titres très gras, corps aéré.
- **Détails qui font le « léché »** : cartes blanches avec ombre douce, léger angle (`rotate(-0.6deg)`) sur la carte TL;DR et la money quote, verbatims en blockquote avec barre colorée à gauche, tableaux à en-tête sombre.

### Animations (optionnel mais c'est l'effet « wahou »)
Avec GSAP + ScrollTrigger : apparition en fondu/translation des sections au scroll, **count-up sur le chiffre clé** (le CA qui défile de 0 à sa valeur), pop des badges de section. **Toujours** prévoir un fallback `prefers-reduced-motion` qui affiche tout en statique avec les chiffres déjà à leur valeur finale (sinon le PDF/print est vide).

---

## Étape finale — Passer le filtre qualité
- **Le fond avant le beau** : vérifie chaque chiffre contre le cas client validé avant de générer.
- **Aucune image locale** : si tu es tenté de mettre un `<img src="assets/…">`, ne le fais pas — la page doit s'ouvrir n'importe où.
- **Le print/PDF rend** : sans les animations, la page doit être entièrement lisible (fallback reduced-motion obligatoire).
- **Textes au ton et au vocabulaire du `CLAUDE.md`**, pas de jargon AI-friendly. Les verbatims sont des vraies citations du cas.

### La personnaliser : une phrase à dire à Claude Code
Une fois généré, le freelance n'édite **rien à la main**. Il décrit, Claude Code modifie le fichier :
- **Couleurs** → *« Reprends `onepager.html` et passe la palette en [couleur principale] + [accent]. »*
- **Typo** → *« Change la police pour [Google Font, ex : Fraunces pour les titres]. »*
- **Longueur** → *« Raccourcis la section contexte, garde 2 obstacles. »*
- **Marque** → *« Mets mon logo/nom en haut et mes couleurs. »*

> Conseil à transmettre : un changement à la fois, on rouvre le `.html`, on regarde, on enchaîne.

---

## Slide propale vs one-pager (à savoir)
Les deux assets partent du **même cas client** et se génèrent pareil (Claude Code écrit un `.html` autonome). La différence :
- **Slide propale** = 1 écran 16:9, vitrine 10 secondes, pour un deck. → `skill-slide-propale`
- **One-pager** = page scrollable complète, pour lire en détail ou envoyer en lien. → ce skill.

On peut générer les deux depuis le même cas → une slide pour accrocher, un one-pager pour convaincre.

---

## ✅ À adapter à ton business (la seule chose que tu changes)
Ton `CLAUDE.md` (identité, couleurs de marque, nom) personnalise la direction artistique et l'en-tête. Le format et la structure sont génériques : ils lisent ton contexte et ton cas client tout seuls.