Communitygithub.com

script-repo/teardown-simulator

Utilisez-la lorsque l'utilisateur souhaite transformer toute machine ou mécanisme (réel ou imaginaire) en un simulateur 3D interactif, hors ligne, sur une seule page, qu'il peut démonter — vue en coupe, vue éclatée, explicateur « comment ça marche », modèle pilotable, ou un film enregistré avec bande sonore. Exécute la compétence Teardown de Claude Code.

Qu'est-ce que teardown-simulator ?

Cette compétence permet de transformer n'importe quelle machine ou mécanisme (réel ou fictif) en un simulateur 3D interactif complet, contenu dans une seule page HTML hors ligne. Elle est idéale pour les développeurs et utilisateurs d'agents IA souhaitant créer des explicateurs visuels, des vues éclatées ou des modèles pilotables à partir de données réelles. La compétence guide l'utilisateur à travers un workflow structuré en neuf étapes : définition du cahier des charges, construction du modèle 3D à partir de code et de nombres réels, mise en place d'une console avec panneaux et schémas, application d'un style épuré, passage d'un critique automatique pour détecter les collisions, création d'une visite guidée interactive, enregistrement vidéo à 60 fps, composition d'une bande sonore codée, et publication d'une page légère (moins de 1 Mo). Elle s'appuie sur des références visuelles et des nombres sourcés, et interdit toute invention de données. Compatible avec Claude Code et les environnements Node.js, elle produit un dossier livrable comprenant le HTML, un rapport de critique, un contact sheet, une vidéo et une carte de prévisualisation.

Compatible avec✓Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/script-repo/3d-studio/tree/HEAD/skills/teardown-simulator

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Simulateur de démontage (Teardown simulator)

Une machine, une page HTML hors ligne : un modèle construit en code dans des unités réelles, un solveur sous forme de fonctions pures d'une seule entrée, des panneaux en direct, un bouton par sous-système, une visite automatique, un passage critique, un film enregistré à 60 ips avec une bande sonore notée, et une étape de publication facultative.

Règles

  • Référence d'abord. Avant de construire, demandez ou trouvez une vue en coupe, une photo ou un clip. Pas de référence, pas de construction.
  • N'inventez jamais de nombres en silence. Chaque nombre est sourcé ou signalé comme une estimation, avec son origine.
  • Confirmez d'abord le périmètre. Les constructions lourdes utilisent beaucoup de Claude Code : convenez de la machine, des séquences, du film ou pas de film.
  • La publication nécessite un oui explicite, à chaque fois.
  • Sur l'hôte : uniquement au niveau utilisateur, pas de sudo, laissez les services de cluster tranquilles, les longs rendus dans tmux avec des journaux.

Choisissez une bonne machine

Une entrée mobile (angle de vilebrequin, course 0..1, vent, temps) et des nombres publiés réels. Bons départs : dérailleur de vélo, échappement de montre (4 Hz), différentiel de voiture, point de chaînette de machine à coudre, bras de pelle mécanique. Évitez les machines avec de nombreuses entrées indépendantes ou des dimensions secrètes.

Anatomie du simulateur

  1. Machine — construite en code dans des unités réelles. 2. Modèle — un solveur, des fonctions pures d'une seule entrée. 3. Panneaux — diagrammes en direct à partir du même modèle. 4. Boutons — isoler/couper/montrer seul par sous-système, vues, curseurs. 5. Fenêtre — le sol/la scène montre ce que dit le solveur. 6. Visite — visite automatique du curseur ; toute entrée rend le contrôle ; 25 s de silence le redonne.

Installation et exécution (sur <hôte>)

npx skills add elvarofficial/teardown -g -a claude-code
cd ~/.claude/skills/teardown && npm install && npx playwright install chromium
# nécessite Node >= 20, ffmpeg, python3
mkdir -p ~/3d-studio/{projets,out,logs,fumée}
cd ~/3d-studio/projets/<machine>
tmux new -s <machine> 'claude 2>&1 | tee ~/3d-studio/logs/<machine>.log'
# dans Claude Code : /teardown ...   (jamais --dangerously-skip-permissions)

Test rapide : node ~/.claude/skills/teardown/sims/build.mjs cessna-live et ouvrez le HTML depuis teardown-out/dist/.

Workflow (remplacez les [crochets])

0. Brief

Remplissez templates/brief.md (référence, entrée unique, nombres réels, pièces) et confirmez le périmètre.

1. Construction (Build)

/teardown Build [le train d'atterrissage principal du Cessna 337] en simulateur 3D interactif. Référence jointe : [un dessin en coupe du train]. Construisez-le en code dans des unités réelles : [pièces]. Avant de dessiner quoi que ce soit, écrivez le modèle sous forme de fonctions pures d'une seule entrée : [course de 0 à 1]. Utilisez les nombres réels : [la crémaillère parcourt 201 mm, le pignon a 32 dents au module 4 mm, les jambes tournent exactement à 180°]. Vérifiez-les à la main et montrez-moi la vérification. Si vous n'êtes pas sûr qu'un nombre soit réel, dites-le et indiquez d'où il vient. Chaque pièce, chaque panneau et chaque étiquette lit à partir de ce seul modèle. Rien n'est animé manuellement.

2. Console

Disposez une console autour de la machine à 1600×900 : le titre et le nombre principal en direct en haut à gauche, en grand : [régime moteur en tr/min]. Des diagrammes en direct qui bougent avec la machine : [levée de soupape sur 720° de vilebrequin, diagramme PV]. Un panneau schématique qui redessine le mécanisme en 2D à partir du même modèle. Un bouton par sous-système : isoler, couper, montrer seul. Des vues caméra sous forme de boutons : [héros, face, côté, dessus, intérieur]. Des annotations avec de fines lignes de repère. Chaque panneau se redessine à partir de l'état de l'image. Aucun nombre à l'écran n'est tapé.

3. Aspect (Look)

Style : un modèle d'étude propre sur un studio pâle. Fond clair, ombres douces sur un sol invisible, une couleur d'accent pour la pièce en cours de fonctionnement : [couleur d'accent]. La machine remplit 60 à 70 % de la vue. Les pièces sombres sont brillantes, les chemises en verre, la rugosité du métal au moins 0,45. Les pièces quasi blanches reçoivent un fin contour à l'encre ou un sol plus foncé. Choisissez la caméra pour le mécanisme : [vue 3/4] si la vue de face se réduit à un treillis.

4. Critique (Critic)

Avant de me montrer quoi que ce soit : 1. Rendez une image fixe à chaque temps de la visite et lisez chacune pour : une pièce qui en traverse une autre, une pièce flottant hors de son support, une étiquette couvrant ce qu'elle nomme, un nombre en désaccord avec la pose. 2. Parcourez chaque transition par pas de 0,2 s pour détecter les sauts. 3. Corrigez les collisions avec un nombre dans le bloc de paramètres, ne les cachez jamais avec la caméra. Dites-moi ce que vous avez vérifié et ce que vous avez corrigé. Montrez-moi les images fixes.

5. Pilotage (Drive)

La visite se joue toute seule avec un curseur appuyant sur les boutons : [temps de la visite]. Tout clic, glissement, molette ou touche rend le contrôle au visiteur ; 25 s de silence le redonne. Faites glisser pour orbiter, molette pour zoomer, [touche] masque les panneaux. Réchauffez chaque shader avant la première image. Testez sur un GPU intégré avec des niveaux de qualité : pas d'AO, rapport de pixels inférieur, ombres plus petites, panneaux toutes les deux images.

6. Enregistrement (Record)

Faites de render(t) une fonction pure du temps sur [20 s]. Dessinez chaque image à 60 ips, 1920×1080 dans Chrome sans tête, et pipez-la vers ffmpeg en H.264 yuv420p avec faststart. Donnez-moi un contact sheet de chaque temps.

7. Bande sonore (Score)

Composez-la en code sur la même timeline : [accords Am9 à 92 bpm, un coup sur chaque temps moteur, un clic par pression de bouton, un souffle montant sous la traînée de la manette des gaz]. Masterisez à -14 LUFS, crête vraie sous -1 dB, et multiplexez-la dans la vidéo.

8. Publication (Publish)

Obtenez un HTML sous 1 Mo (les grands modèles vont dans des fichiers frères). Fabriquez une carte de prévisualisation 1200×630 à partir de la meilleure image, avec des URLs d'image absolues. Déployez sur [Vercel / hôte] seulement après mon accord.

9. Cassez-la (Bonus)

Ajoutez un curseur pour [vent 0–15 m/s] et exécutez le modèle en direct avec lui ; montrez l'effet sur les mêmes panneaux.

Leçons apprises

  • Gardez la page sous 1 Mo : une page de 15,9 Mo a tué la carte de lien X ; 967 Ko l'a corrigée.
  • GPUs intégrés : les niveaux de qualité (pas d'AO, rapport de pixels inférieur, ombres plus petites, panneaux toutes les deux images) ont fait passer une construction de 15 ips à 75 ips.
  • Les images fixes rattrapent les collisions que le mouvement cache. Exécutez toujours le passage critique.
  • Corrigez les collisions dans le bloc de paramètres, jamais avec la caméra.

Livrable

Dossier avec : <machine>.html (hors ligne, <1 Mo), rapport de critique (templates/critic-report.md) avec images fixes, contact sheet, <machine>.mp4 (60 ips, -14 LUFS), la vérification manuelle des nombres avec sources/drapeaux, et une carte de prévisualisation si publication.

Crédits

Workflow et prompts par Elvar (@elvar_official), « How I Turn Any Machine Into a 3D Simulator You Can Take Apart » (X, 2026-10-30). Exécute la compétence Teardown d'Elvar, github.com/elvarofficial/teardown (MIT), construit sur whaleyxbt/claude-motion (MIT).

Skills associés