cloudycliff/anatomy-video-skill

Video explicativo de anatomía

Este skill orquesta tres skills instalados y añade las partes que no cubren:

• /hyperframes maneja la intención, el resumen y las reglas del proyecto.
• /faceless-explainer proporciona el orden de pasos, compuertas, audio, subtítulos, transiciones y renderizado.
• /anatomy suministra el trabajo isométrico: cámara, luz de cuatro tonos, orden del pintor, cortes.

Lee sus archivos SKILL.md cuando un paso a continuación lo indique. No repitas sus reglas aquí.

La única idea que importa

Un rig, muchos estados. El video completo es un dibujo paramétrico único del dispositivo. Cada cuadro es ese rig visto a través de una cámara, con un estado que es una función pura del tiempo y sincronizado con los inicios de las frases de la narración. Esto proporciona:

• continuidad perfecta entre cuadros;
• renderizado seguro para búsquedas;
• un solo lugar para corregir errores de dibujo.

También es por lo que los cuadros son generados por un único script a partir de especificaciones (tools/frames/build.mjs) en lugar de ser enviados a un sub-agente por cuadro, como hace el paso 5 de faceless-explainer.

Ejemplo práctico (59 s, 9:16, Mandarín, 7 cuadros): examples/speaker/. Lee primero examples/speaker/README.md.

Flujo de trabajo

Copia esta lista de verificación y haz seguimiento:

- [ ] 0  Brief + proyecto      (capa de intención hyperframes → paso 0 de faceless-explainer)
- [ ] 1  Cadena de enseñanza      (verdad física antes de cualquier dibujo)
- [ ] 2  Diseño + fuentes        (preajuste + stage-fonts + cjk-fonts)
- [ ] 3  Guión gráfico + guión   (un cambio de estado del rig por cuadro)
- [ ] 4  Voz + temporización     (zh-voice.mjs → sync-durations)
- [ ] 5  Rig                     (templates/rig.js → hoja de previsualización verificada)
- [ ] 6  Cuadros                 (especificaciones en build.mjs, señales de audio_meta.json)
- [ ] 7  Reconstruir + verificar  (rebuild.mjs → lint → snapshot → check)
- [ ] 8  Previsualización, una pregunta, renderizar, entregar

<skill> a continuación significa el directorio de este skill. Ejecuta cada comando desde videos/<project>/.

0 · Brief y proyecto

Sigue exactamente el paso 0 de /faceless-explainer: enrutar a través de /hyperframes intent, init, escribir BRIEF.md, registrar preferencias y mostrar el estado de autenticación. Los valores predeterminados cuando el usuario no especifica:

• 9:16 a 1080×1920;
• voz en off más subtítulos;
• tema claro de anatomía;
• preajuste code-editorial;
• sin música de fondo;
• aproximadamente 60 s.

En modo autónomo, publica resúmenes informativos y pregunta solo la pregunta final de renderizado.

1 · Cadena de enseñanza

Antes de escribir nada visual, escribe la cadena causal como 5–8 eslabones, cada uno un cambio visible en el objeto. Para el altavoz: corriente → bobina en el espacio magnético → fuerza F = B·I·L → cono se mueve → suspensión centra → compresiones y rarefacciones del aire → frecuencia y amplitud se asignan a tono y volumen. Para cada eslabón:

• anota los números reales (dimensiones, intensidad de campo, fuerzas) para que las tarjetas puedan mostrar valores plausibles;
• anota qué parte debe estar iluminada y qué movimiento prueba el eslabón.

Elimina los eslabones que ningún movimiento pueda mostrar.

2 · Diseño y fuentes

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          # Solo chino; reejecutar después de cualquier cambio de copia

3 · Guión gráfico y guión

Escribe STORYBOARD.md y SCRIPT.md según los pasos 3 y 4 de faceless-explainer, con estas diferencias:

• Un cuadro = un eslabón de la cadena = un cambio de estado del rig. Patrones de cuadros típicos del ejemplo:

  Función	Movimiento del rig	Tarjeta
  gancho	detalle macro se aleja al objeto completo, con un pequeño movimiento en vivo	nombre y una lectura en vivo
  anatomía	explotar, luego iluminar cada grupo de partes a medida que se nombran	índice de partes numerado, filas anteriores atenuadas
  detalle crítico	reensamblar, luego acercar la cámara al detalle y fundir una superposición	2–3 datos clave con números
  ley	la superposición impulsa un desplazamiento	la fórmula se construye término a término, el resultado cuenta
  dinámica	impulso periódico con una tira de seguimiento en vivo y cabezal de reproducción	valor vivo con signo más dirección
  salida	el movimiento se irradia (partículas u ondas), la cámara se aleja	etiquetas cualitativas (denso / disperso)
  cierre	objeto pequeño más comparación de trazas	reglas (↑ → ↑), luego toda la cadena como una línea

• El dibujo no lleva etiquetas. Los nombres viven en el título, la tarjeta y los subtítulos.

• Diseño (9:16):

  • encabezado en y 132–330;
  • figura en y 330–1290;
  • tarjeta en y 1300–1570;
  • nada tuyo debajo de y 1600, que pertenece a los subtítulos.

• Salidas solo en el último cuadro.

• Formato de SCRIPT.md para zh-voice.mjs:

  • encabezados ## Línea N — <título> (Cuadro N);
  • texto hablado en líneas sangradas con 4 espacios;
  • una o dos oraciones que terminan en 。;
  • frases divididas por ，；：、, aproximadamente 8–14 caracteres cada una, para que cada frase pueda convertirse en un subtítulo;
  • números escritos como se pronuncian (一特斯拉、六牛).

• En cada línea de Escena del guión gráfico, vincula cada cambio de estado a una frase, no a un segundo supuesto. Los tiempos exactos llegan en el paso 4.

4 · Voz y temporización

Chino:

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 busca la velocidad (no lineal) de Kokoro hasta que la duración total esté dentro de ±3 % del objetivo. El objetivo proviene del duration: del guión gráfico. Deja la mejor toma en su lugar; registra su velocidad en SCRIPT.md.
• Para ediciones únicas, llama a zh-voice.mjs directamente. --reuse re-temporaliza el audio en caché sin resintetizar, y --only 3,5 rehace solo esos cuadros.
• Luego lee words[].start de cada cuadro en audio_meta.json. Estos son los inicios de frase relativos al cuadro que utiliza cada señal en el paso 6.

Inglés: usa audio.mjs de faceless-explainer según lo documentado. Transcribe las temporizaciones de palabras.

5 · Rig

1. Copia las plantillas:
   • templates/rig.js → assets/rig/rig.js
   • templates/rig.css → assets/rig/rig.css
   • templates/preview-rig.mjs → tools/preview-rig.mjs
2. Modela las partes:
   • Partes torneadas o axisimétricas: usa el giro de sección de cuarto de examples/speaker/speaker.js. Copia emitRevolved, emitRing y sectionFaces.
   • Partes prismáticas: usa emitBox.
   • Lee references/craft.md y references/3d.md del skill anatomía para sombreado y detalle de partes.
3. Implementa cada estado que necesita el guión gráfico: explosionar, iluminado, el grado de libertad y las superposiciones.
4. Renderiza la hoja de previsualización, captúrala y corrige el rig hasta que esté limpio. Las comprobaciones y correcciones están en references/rig-contract.md.

Compuerta: cada estado del guión gráfico se renderiza limpiamente en la hoja de previsualización, y el estado más pesado se mantiene por debajo de 7.5k trazos (el registro de previsualización imprime los conteos).

6 · Cuadros

1. Copia las plantillas:
   • templates/frame-shell.mjs → tools/frames/common.mjs
   • templates/build-frames.mjs → tools/frames/build.mjs
2. Establece los preajustes RIG y CAM, medidos desde bounds().
3. Escribe una especificación por cuadro, usando los patrones en examples/speaker/build.mjs:
   • todo el estado del rig y la lectura va dentro de R.drive(tl, DUR, fn);
   • el texto y las tarjetas usan enter / fade;
   • los tiempos de señal son los inicios de frase del paso 4;
   • la cámara y el estado final del cuadro N se copian textualmente como inicio del cuadro N+1.
4. Marca cada cuadro status: animated en STORYBOARD.md.

7 · Reconstruir y verificar

node <skill>/scripts/rebuild.mjs [--fonts]      # bundle → cuadros → rig-health → subtítulos(+CJK) → ensamblar → transiciones → tag
npx hyperframes lint
node <skill>/scripts/cue-snapshots.mjs          # una imagen fija por frase de narración + puntos medios de cuadro
npx hyperframes check

• Siempre reejecuta rebuild.mjs completo después de cualquier edición, porque la inyección de transiciones y la etiqueta de subtítulos se pierden en caso contrario.
• Pasa --fonts cuando la copia en pantalla haya cambiado.
• rig-health.mjs ejecuta el controlador real de cada cuadro en un entorno aislado. Falla por presupuesto de trazos, NaN, renderizados no deterministas o una cámara incorrecta, por lo que un rig pesado se detecta aquí en lugar de como un tiempo de espera de check.
• Lee la hoja de contactos de señales contra el guión gráfico. Cada imagen fija está etiquetada en cues.json con su cuadro y frase. Después de una corrección, vuelve a tomar la instantánea solo de ese cuadro con --frames N.
• Antes de depurar cualquier cosa, escanea references/pitfalls.md.

Compuerta: lint está limpio, check pasa, y las instantáneas coinciden con el guión gráfico en cada señal de frase.

8 · Previsualización, pregunta, renderizar, entregar

npx hyperframes preview --background

Haz exactamente una pregunta: ¿renderizar ahora, o qué cambios? Después de la respuesta:

npx hyperframes render --skill=faceless-explainer --quality high --output renders/video.mp4
node <skill>/scripts/deliver.mjs                # duración, hoja de contactos, tabla de cuadros → renders/DELIVERY.md

Entrega lo que imprime deliver.mjs: la ruta del MP4, la duración, la hoja de contactos y la tabla de ID de cuadros, para que ediciones posteriores puedan apuntar a un cuadro.

También menciona una vez que las preferencias fueron recordadas, y transmite cualquier línea que el CLI imprima sobre la aplicación de escritorio.

Scripts

Script	Qué hace
scripts/fit-voice.mjs	Busca la velocidad de Kokoro hasta que la duración total alcanza el objetivo, manteniendo la mejor toma
scripts/zh-voice.mjs	Narración en mandarín: sintetiza oraciones completas, coloca las temporizaciones de frases en las pausas reales, fuerza los cortes de grupo de subtítulos y escribe audio_meta.json
scripts/rig-health.mjs	Muestrea la línea de tiempo real de cada cuadro y verifica el presupuesto de trazos, NaN, determinismo y la cámara (código de salida 1 en caso de fallo)
scripts/cue-snapshots.mjs	Toma instantáneas del video en cada señal de frase de narración y punto medio de cuadro, y escribe cues.json
scripts/deliver.mjs	Sonda el renderizado, construye la hoja de contactos y escribe renders/DELIVERY.md con la tabla de cuadros
scripts/cjk-fonts.mjs	Descarga subconjuntos de Noto Serif SC y Noto Sans SC que contienen solo los caracteres utilizados
scripts/stage-fonts.mjs	Copia los archivos de fuente latina de un preajuste en assets/fonts/
scripts/patch-captions.mjs	Añade las caras CJK a compositions/captions.html
scripts/bundle-rig.mjs	Integra el CSS del rig en rig.bundle.js, que carga cada cuadro
scripts/rebuild.mjs	La cadena de regeneración completa, en el orden correcto, con rig-health como compuerta

Las plantillas se copian en el proyecto y se editan. Los scripts se ejecutan desde la carpeta del skill.

Referencias

• references/rig-contract.md cubre la API del rig, el modelo de estado, la seguridad de búsqueda, las correcciones de dibujo, el presupuesto de rendimiento y la verificación del rig.
• references/pitfalls.md enumera todos los fallos encontrados hasta ahora, cada uno con su corrección.
• examples/speaker/ es el proyecto completo del altavoz: rig, especificaciones de cuadros, guión y guión gráfico.