/minimal-graphics : une idée expliquée avec des formes et des points mobiles
L'utilisateur donne une idée ("comment une idée devient virale", "comment un projet de loi devient une loi", "le cycle de l'eau", "où va votre attention"). Vous choisissez le motif de mouvement qui la représente, écrivez un petit cahier des charges, vérifiez une image, générez la vidéo et remettez un MP4 silencieux (5-7 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 courant 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 tout va bien. Sinon, exécutez les commandes listées sous "fix", en informant 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 "environnement géré en externe", 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. Aucun navigateur possible ici (par exemple le sandbox de l'application Claude) ? Voir la fin de ce fichier.
1. Choisir le motif
| Motif | Montre | Idéal pour | Champs |
|---|---|---|---|
spread | Un point atteint 2 à 4 autres, chacun en atteint plus, anneau par anneau | Idées virales, bouche-à-oreille, réactions en chaîne, parrainages, choses qui doublent | branches (2-4, défaut 3), depth (2-5, défaut 4), sequence (étiquettes courtes facultatives par anneau, par ex. ["1","3","9","27","81"] ou ["1k$","2k$","4k$"], affichées sur une ligne sous le titre à mesure que chaque anneau s'allume ; quelques caractères chacune) |
flow | Formes numérotées dans l'ordre, un point voyageant de l'une à l'autre, puis un flux régulier | Comment quelque chose fonctionne, un processus, un pipeline, une recette | steps: 2-6 étiquettes courtes ; shapes (les formes sont décoratives : ["circle"] les fait toutes en cercle) |
cycle | Étapes sur une boucle avec un point qui orbite en continu | Cycle de l'eau, boucle d'habitude, boucles de rétroaction, saisons, cycles de sommeil | steps: 3-6 étiquettes courtes ; center: un mot au milieu |
converge | De nombreux points convergeant vers un cercle qui grandit (ou "direction": "out" : un cercle envoie des points vers plusieurs directions) | Où va votre attention, votre temps ou votre argent ; de nombreuses entrées en un seul résultat | sources: 2-6 étiquettes (facultatif) ; weights: combien de points reçoit chaque source ; center: le mot dans le cercle ; count: points (défaut ~40) |
compare | Deux ou trois montants côte à côte, sous forme de points (un par unité) ou de cercles dimensionnés par le montant | Montants "X vs Y" : sucre, coût, temps, calories | groups: [{"label": "...", "value": n, "unit": "..."}] ; highlight: index de celui à colorer |
Si aucun ne convient bien, utilisez le plus proche et dites-le en une ligne ; ne forcez pas une image trompeuse. Un motif montre la forme d'une idée ; la ligne takeaway énonce le point en mots. Les idées sur deux forces en équilibre (offre et demande, équilibre travail-vie personnelle) n'ont pas de motif propre : montrez la boucle qui les stabilise comme un cycle, ou indiquez-le.
2. Rédiger le cahier des charges
Enregistrez minimal-<sujet>.json :
{
"title": "Comment une idée devient virale",
"pattern": "spread",
"branches": 3,
"depth": 4,
"takeaway": "Chaque personne en prévient trois autres",
"theme": "coral"
}
Champs courants : title (l'idée comme titre ou question court, jusqu'à environ 40 caractères), subtitle (petite ligne facultative sous le titre), takeaway (le point en une ligne ; il apparaît sous le titre lorsque l'animation se termine, et les longs se réduisent pour tenir), theme (coral par défaut, ink noir, paper blanc cassé, blue, mint), size ("1080x1920" par défaut, "1080x1080", "1920x1080"), duration (secondes ; défaut 5-6, plus avec un takeaway ; un plus long ne fait que tenir la fin plus longtemps), speed (0.7 = tout 30% plus lent, 1.3 = plus rapide), fps (défaut 30).
Règles d'écriture :
- Les étiquettes sont minuscules : jusqu'à 4 mots chacune (étiquettes de séquence : quelques caractères). Pas de jargon.
- Les chiffres doivent être vrais. Si l'idée nécessite des chiffres dont vous n'êtes pas sûr, omettez-les ou dites qu'ils sont illustratifs.
- Une idée par vidéo. Si l'idée de l'utilisateur a deux parties, faites deux vidéos (deux cahiers des charges).
Exemples dans examples/ : idea-goes-viral.json, bill-becomes-law.json (flow), water-cycle.json (cycle), where-attention-goes.json (converge), soda-vs-apple.json (compare).
3. Vérifier deux images
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" minimal-<sujet>.json --still 2 --out minimal-<sujet>-check1.png
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" minimal-<sujet>.json --still end --out minimal-<sujet>-check2.png
--still prend des secondes, ou end. Regardez-les : les étiquettes sont-elles lisibles et non coupées, l'image dit-elle l'idée ? Ajustez et vérifiez à nouveau si ce n'est pas le cas.
4. Générer la vidéo
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" minimal-<sujet>.json --out minimal-<sujet>.mp4
Environ 10 à 25 secondes. Supprimez les images de vérification.
5. Remettre le résultat
Donnez à l'utilisateur le chemin du MP4 (montrez-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 (un autre motif ou thème).
Pas de navigateur ici ? (par exemple le sandbox de l'application Claude)
Si la vérification d'installation ne peut pas lancer de navigateur, écrivez l'animation sous forme de page à la place : python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" minimal-<sujet>.json --html minimal-<sujet>.html. La page se lit dans n'importe quel navigateur (montrez-la comme artefact si possible). Dites à l'utilisateur que le MP4 nécessite Claude Code sur un ordinateur, ou un enregistrement d'écran de la page.