/graph : vos chiffres deviennent un graphique animé
L'utilisateur donne des chiffres de n'importe quelle forme : Mar 200K, Apr 650K, Nov 1.5M, un tableau copié, un fichier CSV, une capture d'écran ou une phrase. Vous les transformez en une petite spécification, vérifiez une image, rendez la vidéo et remettez un MP4 silencieux (environ 5 secondes).
${CLAUDE_SKILL_DIR} ci-dessous est le dossier de cette compétence (celui où se trouve ce SKILL.md). Si votre environnement ne le remplit pas, utilisez le chemin de ce dossier. Enregistrez tout dans le dossier actuel de l'utilisateur, ou dans le dossier qu'il nomme.
0. Vérification de l'installation
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" --check
Cela prend quelques secondes ; exécutez-le si vous n'êtes pas sûr que cet ordinateur soit configuré. "ready": true signifie que c'est bon. Sinon, exécutez les commandes listées sous "fix", en disant à l'utilisateur qu'il s'agit d'une installation unique : python3 -m pip install playwright (le pilote de navigateur), python3 -m playwright install chromium (uniquement si Google Chrome ou Edge n'est pas installé, environ 150 Mo) et python3 -m pip install imageio-ffmpeg (uniquement si ffmpeg est manquant). Si pip refuse avec "externally managed environment", créez un environnement privé une fois et utilisez son Python pour chaque commande :
python3 -m venv ~/.animate-skills && ~/.animate-skills/bin/pip install playwright imageio-ffmpeg, puis
~/.animate-skills/bin/python -m playwright install chromium si nécessaire. Sous Windows, utilisez py au lieu de python3.
Pas de navigateur possible ici (par exemple le sandbox de l'application Claude) ? Voir la fin de ce fichier.
1. Écrire la spécification
Enregistrez graph-<sujet>.json :
{
"title": "Mes abonnés Instagram",
"subtitle": "2026",
"data": [["Mar", 200000], ["Avr", 650000], ["Nov", 1500000]],
"source": "Instagram",
"theme": "night"
}
Règles :
- Utilisez les chiffres exacts de l'utilisateur. N'inventez, n'arrondissez, ne lissez ni ne remplissez jamais les valeurs. Si quelque chose est vraiment ambigu (quelle colonne, quelle unité), posez une question courte ; sinon, allez-y.
- Écrivez les nombres complets : 650K →
650000, 1.5M →1500000, 12% →12avec"suffix": "%". - Gardez les étiquettes courtes (environ 8 caractères maximum pour un meilleur rendu) :
Mar,T1,2024,Lun. - Le titre décrit ce que sont les chiffres, dans les mots de l'utilisateur si possible (environ 30 caractères au maximum ;
|force un saut de ligne). Ajoutezsubtitleetsourceuniquement lorsque l'utilisateur les a fournis ou qu'ils sont clairement déduits de la demande ("mes abonnés Instagram" → source Instagram) ; ne les inventez pas.
| Champ | Son rôle |
|---|---|
title, subtitle | Titre et une petite ligne en dessous (période, unité). |
data | [["label", nombre], ...] ou [{"label": "...", "value": n}, ...], dans l'ordre. |
type | Laissez vide pour automatique : barres jusqu'à 10 valeurs ; une ligne pour les séries plus longues, et pour les valeurs qui changent peu par rapport à leur taille (un poids passant de 210 à 178, un prix, une température), où la ligne zoom sur la plage. "bar" ou "line" pour forcer. |
prefix, suffix | Unités : "$", "€", "%", " kg". |
decimals | Forcer les décimales. Par défaut : chaque valeur garde les siennes. |
compact | Par défaut affiche 10 000+ comme 12K / 1,5M / 2B. false pour les nombres complets. |
callout | Laissez vide pour l'indicateur de croissance automatique de la première à la dernière valeur (↑ 7,5x ; nombres entiers à partir de 10x, ↑ 77x ; ↑ 32% ; ↓ 18%). Un texte court de votre cru ("De retour dans le vert"), ou null pour rien. |
good | "down" quand une valeur plus basse est meilleure (poids perdu, dette remboursée, coûts, temps de course) : une baisse obtient un indicateur vert au lieu d'un rouge. |
highlight | Quelle barre est en doré : "last" (par défaut), "max", un index, ou "none". |
theme | night (bleu nuit foncé, barres corail ; par défaut), light, sunset, mint. |
source | Petite note "Source : ..." sous le graphique. |
size | "1080x1920" (vertical, par défaut), "1080x1080", "1920x1080". |
duration, fps | Secondes (par défaut ~5) et images par seconde (par défaut 30 ; 60 est plus fluide mais plus lent). |
Exemples : examples/instagram-followers.json (barres), examples/website-visitors-line.json (une ligne).
2. Vérifier la dernière image
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" graph-<sujet>.json --still end --out graph-<sujet>-check.png
Regardez l'image (2-3 secondes à générer) : étiquettes lisibles, rien ne se chevauche, les nombres sont exactement ceux de l'utilisateur. Corrigez la spécification et vérifiez à nouveau si ce n'est pas le cas.
3. Rendre la vidéo
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" graph-<sujet>.json --out graph-<sujet>.mp4
Environ 10-20 secondes. Supprimez l'image de vérification.
4. Livrer
Donnez à l'utilisateur le chemin du MP4 (affichez-le si votre environnement peut afficher des fichiers). Il n'a pas de son, prêt pour de la musique ou une voix off. Proposez une variante rapide (un autre thème, le format carré, une ligne au lieu de barres).
Pas de navigateur ici ? (par exemple le sandbox de l'application Claude)
Si la vérification d'installation ne parvient pas à lancer un navigateur, écrivez l'animation sous forme de page à la place :
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" graph-<sujet>.json --html graph-<sujet>.html. La page joue le graphique dans n'importe quel navigateur (montrez-la comme un artefact si possible). Dites à l'utilisateur que le MP4 nécessite Claude Code sur un ordinateur, ou un enregistrement d'écran de la page.