cloudycliff/anatomy-video-skill

Vidéo explicative anatomique

Cette compétence orchestre trois compétences installées et ajoute les parties qu'elles ne couvrent pas :

• /hyperframes gère l'intention, le brief et les règles du projet.
• /faceless-explainer fournit l'ordre des étapes, les portes, l'audio, les sous-titres, les transitions et le rendu.
• /anatomy fournit l'artisanat isométrique : caméra, éclairage quatre tons, ordre du peintre, coupes.

Lisez leurs fichiers SKILL.md lorsqu'une étape ci-dessous le mentionne. Ne répétez pas leurs règles ici.

L'idée principale qui compte

Un seul rig, plusieurs états. La vidéo entière est un dessin paramétrique unique du dispositif. Chaque image est ce rig vu à travers une caméra, avec un état qui est une fonction pure du temps et synchronisé avec les débuts de phrases de la narration. Cela donne :

• une continuité parfaite entre les images ;
• un rendu insensible à la recherche temporelle ;
• un seul endroit pour corriger les bugs de dessin.

C'est aussi pourquoi les images sont générées par un seul script à partir de spécifications (tools/frames/build.mjs) au lieu d'être dispatchées à un sous-agent par image, comme le fait l'étape 5 de faceless-explainer.

Exemple travaillé (59 s, 9:16, mandarin, 7 images) : examples/speaker/. Lisez d'abord examples/speaker/README.md.

Flux de travail

Copiez cette liste de contrôle et suivez-la :

- [ ] 0  Brief + projet      (couche d'intention hyperframes → étape 0 de faceless-explainer)
- [ ] 1  Chaîne d'enseignement (vérité physique avant tout dessin)
- [ ] 2  Conception + polices   (preset + stage-fonts + cjk-fonts)
- [ ] 3  Storyboard + script   (un changement d'état du rig par image)
- [ ] 4  Voix + timing        (zh-voice.mjs → sync-durations)
- [ ] 5  Rig                   (templates/rig.js → feuille de prévisualisation vérifiée)
- [ ] 6  Images                (spécifications dans build.mjs, indices depuis audio_meta.json)
- [ ] 7  Reconstruction + vérification (rebuild.mjs → lint → snapshot → check)
- [ ] 8  Prévisualisation, une question, rendu, livraison

<skill> ci-dessous désigne le répertoire de cette compétence. Exécutez chaque commande depuis videos/<projet>/.

0 · Brief et projet

Suivez exactement l'étape 0 de /faceless-explainer : passez par l'intention /hyperframes, init, écrivez BRIEF.md, enregistrez les préférences et affichez l'état d'authentification. Les valeurs par défaut lorsque l'utilisateur ne précise pas :

• 9:16 à 1080×1920 ;
• voix-off plus sous-titres ;
• thème d'éclairage anatomique ;
• preset code-editorial ;
• pas de musique de fond ;
• environ 60 s.

En mode autonome, publiez des résumés intermédiaires et ne posez que la question finale du rendu.

1 · Chaîne d'enseignement

Avant d'écrire quoi que ce soit de visuel, écrivez la chaîne causale sous forme de 5 à 8 maillons, chacun représentant un changement visible dans l'objet. Pour le haut-parleur : courant → bobine dans l'entrefer → force F = B·I·L → cône se déplace → suspension recentre → compressions et raréfactions de l'air → fréquence et amplitude correspondent à hauteur et volume. Pour chaque maillon :

• notez les valeurs réelles (dimensions, champ magnétique, forces) pour que les cartes puissent afficher des valeurs plausibles ;
• notez quelle pièce doit être éclairée et quel mouvement prouve le maillon.

Supprimez les maillons qu'aucun mouvement ne peut montrer.

2 · Conception et polices

node <faceless-explainer>/scripts/build-frame.mjs --preset code-editorial --hyperframes .
node <skill>/scripts/stage-fonts.mjs --preset code-editorial
node <skill>/scripts/cjk-fonts.mjs          # Chinois uniquement ; réexécutez après toute modification de copie

3 · Storyboard et script

Écrivez STORYBOARD.md et SCRIPT.md selon l'étape 3 et l'étape 4 de faceless-explainer, avec ces différences :

• Une image = un maillon de la chaîne = un changement d'état du rig. Schémas d'images typiques de l'exemple :

  Rôle	Mouvement du rig	Carte
  accroche	un macro détail s'éloigne pour révéler l'objet complet, avec un petit mouvement en direct	nom et une lecture en direct
  anatomie	explosion, puis éclairage de chaque groupe de pièces à mesure qu'il est nommé	index de pièce numéroté, lignes précédentes atténuées
  détail critique	réassemblage, puis rapprochement de la caméra sur le détail et fondu d'une superposition	2–3 faits clés avec des chiffres
  loi	la superposition entraîne un déplacement	la formule se construit terme par terme, le résultat augmente
  dynamique	entraînement périodique avec une bande de traçage en direct et une tête de lecture	valeur en direct signée plus direction
  sortie	le mouvement rayonne (particules ou ondes), la caméra recule	étiquettes qualitatives (dense / clairsemé)
  conclusion	petit objet plus une comparaison des tracés	règles (↑ → ↑), puis la chaîne entière en une ligne

• Le dessin ne porte aucune étiquette. Les noms vivent dans le titre, la carte et les sous-titres.

• Disposition (9:16) :

  • en-tête à y 132–330 ;
  • figure à y 330–1290 ;
  • carte à y 1300–1570 ;
  • rien de votre en dessous de y 1600, qui appartient aux sous-titres.

• Sorties uniquement dans la dernière image.

• Format SCRIPT.md pour zh-voice.mjs :

  • en-têtes ## Ligne N — <titre> (Image N) ;
  • texte parlé sur des lignes indentées avec 4 espaces ;
  • une ou deux phrases se terminant par 。 ;
  • phrases divisées par ，；：、, environ 8–14 caractères chacune, afin que chaque phrase puisse devenir un sous-titre ;
  • nombres écrits comme ils sont prononcés (一特斯拉、六牛).

• Dans chaque ligne de scène du storyboard, liez chaque changement d'état à une phrase, pas à une seconde devinée. Les temps exacts arrivent à l'étape 4.

4 · Voix et timing

Chinois :

node <skill>/scripts/fit-voice.mjs [--target 60] -- --voice zf_xiaobei [--say "弹波=谈波"]
node <faceless-explainer>/scripts/audio.mjs sync-durations --audio-meta ./audio_meta.json --storyboard ./STORYBOARD.md

• fit-voice.mjs recherche la vitesse (non linéaire) de Kokoro jusqu'à ce que la durée totale soit à ±3 % de la cible. La cible vient du duration: du storyboard. Il conserve la meilleure prise ; enregistrez sa vitesse dans SCRIPT.md.
• Pour des modifications ponctuelles, appelez zh-voice.mjs directement. --reuse réajuste le temps de l'audio mis en cache sans resynthétiser, et --only 3,5 ne refait que ces images.
• Ensuite, lisez words[].start de chaque image dans audio_meta.json. Ce sont les débuts de phrase relatifs à l'image que chaque indication de l'étape 6 utilise.

Anglais : utilisez audio.mjs de faceless-explainer comme documenté. Il transcrit les temps des mots.

5 · Rig

1. Copiez les modèles :
   • templates/rig.js → assets/rig/rig.js
   • templates/rig.css → assets/rig/rig.css
   • templates/preview-rig.mjs → tools/preview-rig.mjs
2. Modélisez les pièces :
   • Pièces tournées ou axisymétriques : utilisez la révolution en quart de section de examples/speaker/speaker.js. Copiez emitRevolved, emitRing et sectionFaces.
   • Pièces prismatiques : utilisez emitBox.
   • Lisez les references/craft.md et references/3d.md de la compétence anatomie pour l'ombrage et le détail des pièces.
3. Implémentez tous les états dont le storyboard a besoin : explosion, éclairage, degré de liberté et superpositions.
4. Rendez la feuille de prévisualisation, faites-en une capture d'écran et corrigez le rig jusqu'à ce qu'il soit propre. Les vérifications et corrections sont dans references/rig-contract.md.

Porte : chaque état du storyboard s'affiche proprement sur la feuille de prévisualisation, et l'état le plus lourd reste en dessous de 7,5k chemins (le journal de prévisualisation imprime les comptes).

6 · Images

1. Copiez les modèles :
   • templates/frame-shell.mjs → tools/frames/common.mjs
   • templates/build-frames.mjs → tools/frames/build.mjs
2. Définissez les presets RIG et CAM, mesurés à partir de bounds().
3. Écrivez une spécification par image, en utilisant les motifs de examples/speaker/build.mjs :
   • tout l'état du rig et des lectures va à l'intérieur de R.drive(tl, DUR, fn) ;
   • le texte et les cartes utilisent enter / fade ;
   • les temps d'indication sont les débuts de phrase de l'étape 4 ;
   • la caméra et l'état de fin de l'image N sont copiés textuellement comme début de l'image N+1.
4. Marquez chaque image status: animated dans STORYBOARD.md.

7 · Reconstruction et vérification

node <skill>/scripts/rebuild.mjs [--fonts]      # bundle → images → rig-health → sous-titres(+CJK) → assemble → transitions → tag
npx hyperframes lint
node <skill>/scripts/cue-snapshots.mjs          # une image fixe par phrase de narration + milieux d'images
npx hyperframes check

• Réexécutez toujours tout rebuild.mjs après une édition, car l'injection de transitions et la balise de sous-titres sont perdues sinon.
• Passez --fonts lorsque la copie à l'écran a changé.
• rig-health.mjs exécute le pilote réel de chaque image dans un bac à sable. Il échoue sur le budget de chemins, NaN, les rendus non déterministes ou une mauvaise caméra, donc un rig lourd est détecté ici plutôt que comme un délai de check.
• Lisez la feuille de contact des indices par rapport au storyboard. Chaque image fixe est étiquetée dans cues.json avec son image et sa phrase. Après une correction, refaites la capture d'écran uniquement de cette image avec --frames N.
• Avant de déboguer quoi que ce soit, consultez references/pitfalls.md.

Porte : lint est propre, check réussit et les captures d'écran correspondent au storyboard à chaque indication de phrase.

8 · Prévisualisation, question, rendu, livraison

npx hyperframes preview --background

Posez exactement une question : lancer le rendu maintenant, ou quels changements ? Après la réponse :

npx hyperframes render --skill=faceless-explainer --quality high --output renders/video.mp4
node <skill>/scripts/deliver.mjs                # durée, feuille de contact, tableau des images → renders/DELIVERY.md

Livrez ce que deliver.mjs imprime : le chemin du MP4, la durée, la feuille de contact et le tableau des identifiants d'images, afin que les modifications ultérieures puissent cibler une image.

Mentionnez également une fois que les préférences ont été enregistrées, et relayez toute ligne que le CLI imprime à propos de l'application de bureau.

Scripts

Script	Ce qu'il fait
scripts/fit-voice.mjs	Recherche la vitesse de Kokoro jusqu'à ce que la longueur totale atteigne la cible, en conservant la meilleure prise
scripts/zh-voice.mjs	Narration mandarine : synthétise des phrases entières, place les timings de phrase sur les vraies pauses, force les ruptures de groupes de sous-titres et écrit audio_meta.json
scripts/rig-health.mjs	Échantillonne la chronologie réelle de chaque image et vérifie le budget de chemins, NaN, le déterminisme et la caméra (code de sortie 1 en cas d'échec)
scripts/cue-snapshots.mjs	Prend des captures d'écran de la vidéo à chaque indication de phrase de narration et au milieu de chaque image, et écrit cues.json
scripts/deliver.mjs	Sonde le rendu, construit la feuille de contact et écrit renders/DELIVERY.md avec le tableau des images
scripts/cjk-fonts.mjs	Télécharge les sous-ensembles de Noto Serif SC et Noto Sans SC contenant uniquement les caractères utilisés
scripts/stage-fonts.mjs	Copie les fichiers de polices latines d'un preset dans assets/fonts/
scripts/patch-captions.mjs	Ajoute les polices CJK à compositions/captions.html
scripts/bundle-rig.mjs	Intègre le CSS du rig dans rig.bundle.js, que chaque image charge
scripts/rebuild.mjs	La chaîne de régénération complète, dans le bon ordre, avec rig-health comme porte

Les modèles sont copiés dans le projet et édités. Les scripts sont exécutés depuis le dossier de la compétence.

Références

• references/rig-contract.md couvre l'API du rig, le modèle d'état, la sécurité de recherche, les corrections de dessin, le budget de performance et la vérification du rig.
• references/pitfalls.md liste chaque échec rencontré jusqu'à présent, chacun avec sa correction.
• examples/speaker/ est le projet complet de haut-parleur : rig, spécifications d'images, script et storyboard.