Anatomy (Français)
Source : https://github.com/wheresryan22/anatomy — MIT © 2026 Ryan. Version originale anglaise :
SKILL.en.mddans ce dossier ; analyse détaillée :PHAN-TICH.md.
À quoi ça sert
Expliquer une idée technique en la construisant en un objet réel et fonctionnel : une clé de cache devient une serrure à verrous qui ne tourne que lorsque tous les verrous sont alignés ; un contexte GPU desservant plusieurs toiles devient une imprimante à une seule tête qui visite 16 puits. Le résultat est une illustration isométrique composée de nombreuses petites pièces solides, ombrées en quatre teintes, encadrée dans une carte avec titre, indices et indicateurs en direct, avec un mouvement doux au survol et au clavier.
Trois types d'illustrations (partagent le même kit, la même caméra et les mêmes règles de construction) :
| Type | Description |
|---|---|
| SVG | Cœur du système. Pièces isométriques solides, ombrage 4 teintes, dessinées de l'arrière vers l'avant, dans une carte avec données en direct. Export HTML autonome, .svg avec CSS intégré, ou React/Next.js. |
| SVG + WebGL | Pour ce qui ne peut être dessiné : feu, gaz d'échappement, eau, caustiques, lumière, lueur, vapeur. Les shaders s'exécutent dans un canvas intercalé entre l'arrière-plan SVG et l'avant-plan SVG, avec la même caméra isométrique. |
| 3D (bêta) | Pièces en rotation 3D réelle : vis qui tourne, doigt qui se plie, pièce qui tombe. Le reste est artistique. |
Installation
npx skills add wheresryan22/anatomy -g
# ou -a claude-code / -a antigravity / -a opencode / -a codex / -a minimax-code
- Installation dans
~/.claude/skills/anatomy(Claude Code),~/.config/opencode/skills/anatomy(OpenCode),~/.agents/skills/anatomy(Codex), etc. Ougit clonedu dépôt directement dans le dossier des compétences. - Prérequis : Node.js ≥ 20.10 (utilise uniquement des modules intégrés, 0 dépendance), Chrome/Chromium pour l'auto-vérification (headless, trouvé dans le chemin standard ou défini par
CHROME_PATH). React 18+ nécessaire uniquement pour la sortie React.
Utilisation
/anatomy explain how a token bucket rate limiter works, interactive
- Pas besoin de nommer la compétence : demandez "illustration isométrique", "figure explicative pour docs/blog/landing page" et l'agent l'active automatiquement. Codex utilise
$anatomy. - 3 bonnes pratiques pour une bonne illustration : (1) dites l'idée, pas la description du dessin, avec des données réelles (taille, quantité, vitesse, seuils) ; (2) ou nommez l'objet si vous le connaissez (machine à expresso, brûleur Bunsen, serrure) et dites ce qui bouge ; (3) dites où l'illustration doit vivre (HTML / SVG / React, clair ou foncé).
- Peut demander une impression :
node scripts/print.mjs sheet.mjs --format allécrit un PDF A4 (poster, dessin technique, explicateur 2 pages).
Processus interne de la compétence
- Collecte des données réelles → 2. invention de l'objet → 3. liste des pièces → 4. construction géométrique en une fois avec le kit → 5. ombrage de l'arrière vers l'avant → 6. encadrement → 7. animation → 8. auto-vérification comme un critique : audit géométrique (
build.mjs --audit: rien ne traverse rien, toutes les extrémités sont correctement connectées, chevauchement selon l'ordre de profondeur correct), capture headless Chrome (capture.mjs,drive.mjs), vérification des lignes brisées flottantes (lines.mjs), vérification 3D (turn-check.mjs). L'agent doit lire chaque PNG qu'il génère.
Points forts
- Qualité d'illustration très élevée, avec un système de validation propre (audit + capture + contact sheet) — rare pour une compétence d'illustration d'avoir une boucle d'auto-vérification réelle.
- Aucune dépendance, aucune clé API nécessaire ; kit Node intégré.
- Supporte 5 agents CLI (Claude Code, Antigravity, OpenCode, Codex, MiniMax Code) via le standard Agent Skill.
- Exemples complets dans le dépôt, galerie web communautaire, export poster PDF.
Points faibles
- Lent de manière délibérée : une figure équivaut à une longue session (construction des pièces, audit, capture en gros plan dans 2 thèmes). La construction Raptor prend plusieurs minutes ; l'audit 3D prend 15 à 20 minutes pour 30 pièces.
- Pas une bibliothèque de graphiques : pas d'axes, de séries, de tracés de données.
- Dessine uniquement des machines, outils, meubles — pas de personnes, pas de cartes précises ; une idée sans "mécanisme" produira une illustration faible.
- Le mode 3D est encore en bêta ; les shaders nécessitent WebGL (sans WebGL, le SVG reste lisible).
Adapté à Limix Bot
Assez adapté lorsqu'il faut expliquer un concept technique avec une illustration interactive pour la documentation, les rapports, les pages d'explication (même direction que la compétence answer-me-with-html dans le hub). Pas adapté pour des réponses rapides ou des analyses numériques — c'est plutôt une "arme narrative" pour du contenu produit. Attention au temps de construction long, donc à utiliser dans une tâche dédiée dans un thread séparé, pas mélangé dans une conversation normale.
Sécurité
Compétence purement didactique avec scripts Node exécutés localement (construction/audit/capture). Les scripts ne construisent que du HTML/SVG/PDF, n'appellent aucun service externe lors de la construction ; la partie vérification utilise Chrome headless local. Selon les règles du hub : outil inclus → statut à réviser, le bot propriétaire approuve avant activation.