ConardLi/garden-skills

Motion Showreel

Convertir una idea en un video animado principalmente de gráficos, texto o interfaces de usuario, entregando un MP4 y el código fuente completo para poder recrearlo. Se mantiene la densidad de movimiento y la libertad creativa de los cortometrajes, y también se admite la creación de contenido por capítulos de hasta 20 minutos.

Principio: La página expone una función determinista render(t). El script captura un fotograma por vez y luego usa ffmpeg para componer el MP4. Las imágenes, la locución, la música de fondo y los efectos de sonido comparten el archivo timeline.js. Sin locución, la imagen se organiza según el contenido y el ritmo de la música; con locución, se prioriza el tiempo real del audio de la voz para luego organizar la música y los efectos de sonido.

¿De dónde vienen los buenos videos?: La densidad de los cambios, la calidad del movimiento, un punto memorable y la relación entre audio e imagen suelen decidir la percepción general. Pero, ¿cómo se mueve y cuánto se mueve? Lo determinan el estilo y el contenido, no todos los videos necesitan múltiples ángulos de cámara, resortes ni efectos de sonido por doquier. Solo se siguen unas pocas reglas básicas a nivel global (ver "Reglas básicas"), el resto son puntos de partida para el modelo, no techos infranqueables.

Sensación de video: Los videos explicativos, demostraciones de producto y narrativos deben hacer que el comportamiento y las relaciones de los objetos evolucionen con el contenido, manteniendo una continuidad espacial entre tomas. No se debe convertir cada frase de la locución en un título estático y luego maquillarlo con fundidos, zooms y partículas de fondo. Primero hay que escribir el guion gráfico respondiendo "¿Qué cambio debe entender el espectador?, ¿Cuál es el estado anterior y posterior del sujeto?, ¿Cómo enlaza con la toma anterior?" y luego elegir los efectos de movimiento. Los estilos como logos, tipografía cinética, bucles y pausas intencionadas seguirán sus propias reglas gramaticales; no se juzga la calidad por un movimiento constante y forzado o por la obligación de usar 60 fps. Para más detalles, ver la sección "Narrativa continua" en references/craft.md.

---

Ámbito de aplicación

Lo que el usuario quiere	¿Usar esta Skill?
Video promocional de producto, portafolio de motion, animación de UI, tipografía cinética / sync de beats, reel de logo, intro, bucle animado	✅
Persona con pantalla verde generada por modelo de video + escena de código, texto grande, animaciones	✅ La persona la proporciona el usuario (categoría H de references/formats.md)
El usuario proporciona guion de locución o grabación, quiere exportar un MP4 con narración	✅ Modo impulsado por locución; TTS debe usar el guion original proporcionado por el usuario
Necesita clics para avanzar, presentación en vivo, demostración web interactiva, o convertir un artículo en guion de locución	Usar web-video-presentation
Página web, landing page, prototipo interactivo, maqueta visual estática	❌ Usar web-design-engineer
Interpretación realista de personas, textura de grabación real, edición de metraje existente, usar modelos de video para generar imágenes directamente	❌

Duración: Máximo 20 minutos (1200 segundos), según la duración confirmada por el usuario. Los cortometrajes siguen siendo adecuados para 5–60 segundos; no se debe hacer un video largo como un sync de beats continuo y de alta densidad durante veinte minutos. Si supera los 2 minutos, leer references/long-form.md y planificar, producir y revisar por capítulos. Si la duración especificada por el usuario entra en conflicto con la duración real de la locución o la cantidad de contenido, detenerse para confirmar el plan de ajuste, no se debe truncar, acelerar la locución ni cambiar la duración del video por cuenta propia.

Puntos fuertes de Opus y sus fallos por defecto

• Puntos fuertes: En un solo archivo se pueden mezclar Canvas, SVG/DOM, WebGL, Three.js, e incluso cambiar de medio en cada segmento; el movimiento se puede calcular con precisión mediante fórmulas (resortes de forma cerrada, cuadrícula de beats, motion blur entre fotogramas); el sonido y la imagen leen la misma línea de tiempo; puede trabajar de forma autónoma durante mucho tiempo "renderizar fotograma estático → mirar la imagen → modificar"; tiene una fuerte capacidad de juicio estético, con un simple "dale todo" puede producir cosas sorprendentes.
• Fallos por defecto: Sin restricciones, la imagen tiende a fondos oscuros, letras grandes centradas, todos los elementos apareciendo juntos con fundido, degradados púrpura-azul con brillo, cámara fija; la música tiende a un compás de cuatro tiempos en La menor, cada beat fuerte con un impacto + crash, un gong final, varios videos suenan como la misma canción. Por lo tanto, primero hay que buscar referencias (tanto visuales como sonoras), escribir el estilo y una lista de lo prohibido. Pero las restricciones no pueden ser rígidas: el banco de estilos y el banco de técnicas de esta Skill son puntos de partida; cuando el tema lo requiera, se pueden modificar, combinar o personalizar.
• Lo que no hace bien: Personas realistas, manos/telas/pelo complejos, cosas que requieren precisión física realista, productos fotorrealistas (a menos que el usuario proporcione modelos o imágenes). En estos casos, se estiliza o se cambia a la división de persona con pantalla verde + escena de código.

---

Flujo de trabajo

0 Verificación del entorno (una vez)
1 Confirmación de requisitos ──────── Completar campos obligatorios, resumir requerimientos → 🛑 Esperar confirmación del usuario
2 brief.md ──────── Referencias → Propósito + Estilo → Reel Read → Guion gráfico + Plan de sonido
3 Fotogramas de estilo ────────── Estilo definido: 3 fotogramas; Estilo no definido: 1 fotograma de cada una de 3 direcciones → 🛑 Esperar confirmación del usuario
4 Producción ──────────── Con locución: preparar audio real y marcas de tiempo primero → timeline → toma por toma → demo → video final
5 Música y mezcla ────── BGM, efectos de sonido elegidos de fuentes independientes; con locución, priorizar la voz humana
6 Revisión ──────────── Revisión técnica (determinada por el programa, debe pasar todo) + Revisión estética (mirar imágenes, listar problemas, dar al usuario la revisión final)
7 Entrega

Directorio de trabajo: Crear <slug>/ en el directorio actual del usuario. Todos los archivos van dentro: brief.md, index.html, motion.js, timeline.js, score.mjs o score.tone.js (según la opción --audio de scaffold), build.sh, fonts/, assets/, audio/, qa/, out/.

Paso 0: Entorno

La primera vez, ejecutar sh <skill>/scripts/setup.sh: instalará Playwright y Chromium, y luego ejecutará check-env.mjs. Se necesita Node 18+ y ffmpeg; si faltan, indicar al usuario cómo instalarlos, no instalar software del sistema por él. La herramienta incluye pruebas: cd <skill>/scripts && npm test.

Paso 1: Confirmación de requisitos (detenerse y esperar al usuario)

Preguntar de forma concentrada los elementos faltantes, no repetir lo ya proporcionado. La siguiente información debe ser explícita, no se pueden usar valores predeterminados fijos en lugar de la decisión del usuario:

Información obligatoria	¿Qué debe quedar claro?
Tema central, contenido a producir	Qué se debe mostrar, qué contenido debe aparecer
Duración	Segundos o minutos exactos, si se permite una pequeña fluctuación; no superar los 1200 segundos
Horizontal o vertical	Determinar el tamaño real según la elección; también mantener la capacidad de que el usuario especifique claramente otras relaciones de aspecto como 1:1. Se puede sugerir resolución y framerate, y escribirlos en el resumen de confirmación
Fuente de la música de fondo (BGM)	Síntesis autónoma de IA / proporcionada por el usuario; el usuario también puede desactivarla explícitamente
Fuente de los efectos de sonido	Síntesis autónoma de IA / proporcionada por el usuario; elegir independientemente del BGM, también se puede desactivar
Modo de locución	Sin locución / TTS de IA / Grabación del usuario

Información condicionalmente obligatoria: Al elegir TTS, el usuario debe proporcionar el guion de locución; no se redacta, completa, modifica y sintetiza por cuenta propia. Al mismo tiempo, especificar el servicio TTS y la configuración API necesaria (reutilizar la configuración existente, las credenciales se almacenan en variables de entorno, no se escriben en el brief). Soporta Gemini, MiniMax y adaptadores personalizados; leer references/narration.md según sea necesario. Al elegir grabación del usuario, se necesita el archivo de audio o una dirección accesible; al elegir BGM/efectos del usuario, se necesitan los archivos correspondientes. El idioma de la locución, el timbre, etc., si se pueden determinar a partir del guion o la configuración, se escriben en el resumen; de lo contrario, se pregunta todo junto.

Información opcional: Materiales de referencia, audiencia y plataforma de publicación, estilo del tema. Si no se proporcionan la audiencia y la plataforma, se infieren según el contenido y se explica en el resumen. Si no se proporciona el estilo, se reserva para la fase de fotogramas de estilo, donde se ofrecerán tres direcciones.

¿Cómo manejar los materiales?: Si el usuario ya ha proporcionado contenido específico y ha autorizado la generación por IA, se procede a crear basándose en ello; si el usuario no ha proporcionado suficiente contenido específico, se pregunta por los materiales necesarios. También se puede realizar investigación en línea según el tema y mantener las fuentes. Si hay guion de locución, primero extraer la información del guion original, no hacer que el usuario lo repita. La IA puede generar ilustraciones, escenas, gráficos abstractos y contenido esquemático claramente etiquetado; las funciones reales del producto, los números y los materiales de marca aún deben cumplir las "reglas básicas", no se pueden usar datos ficticios para hacerse pasar por contenido real. Los requisitos para logos de marca o capturas de pantalla de productos reales se encuentran en references/stack.md.

• Si el usuario proporciona un video de referencia: primero ejecutar inspect.mjs sheet <ref> --cells 30 para ver el panorama general, inspect.mjs grid <ref> --strips para medir los puntos de corte y la cuadrícula de beats en la que caen (candidatos a BPM, cuántos pasos por sección, fotogramas continuos de cada transición), inspect.mjs heat <ref> para ver dónde hay movimiento en cada sección y qué área ocupa. Anotar las mediciones en la sección de referencias del brief. Solo aprender la estructura y las técnicas, no copiar los materiales.
• Si el usuario proporciona una canción: sin locución, ejecutar primero audio.mjs beats <track> --out <slug>/audio/beats.json; con locución, los beats musicales se subordinan al ritmo narrativo.
• Si hay nombres de productos, marcas o términos técnicos que deben aparecer en la imagen, verificar primero si no está seguro.

Después de completar la información, resumir el tema, la duración, el formato de imagen, las fuentes de BGM/efectos de sonido, el modo de locución y el estado de los materiales, detenerse y esperar la confirmación del usuario antes de escribir el brief. Incluso si la primera solicitud tiene toda la información, enviar primero un resumen de confirmación. Si el usuario dice "dale todo", "sorpréndeme", "tú decides", solo autoriza la elección creativa, no significa que se puedan omitir los campos obligatorios o saltar la confirmación; solo se puede continuar si el usuario solicita explícitamente omitir una confirmación en particular, y se debe registrar su autorización.

Modo desatado: Mantener la autonomía creativa, solo cumplir las reglas básicas y el pipeline técnico. El estilo, la estructura y las técnicas pueden ser determinados por uno mismo, y se puede prescindir completamente del banco de estilos. Aún así, escribir un brief, ofrecer tres direcciones y seguir las reglas anteriores para las dos confirmaciones, excepto aquellas que el usuario haya eximido explícitamente.

Paso 2: brief.md

Primero buscar referencias: Antes de empezar a escribir, elegir 1–2 obras de referencia para este video (este tema + este propósito). Pueden ser cabeceras de películas, anuncios, videojuegos, obras de motion, corrientes de diseño. En el brief, escribir "qué aprender" (composición, ritmo, gramática de cámara, lógica de color, estructura musical) y "qué no aprender" (personajes, tomas específicas, melodías, logos, archivos de fuente). Las referencias son más efectivas que cualquier regla para elevar el techo.

Luego, pensar en tres estructuras candidatas: Por ejemplo, un viaje, una comparación de antes y después, una cuenta atrás, una transformación, un plano secuencia sin cortes. Escribir cada una en 2–3 líneas, elegir una y justificar la razón. La primera idea que viene a la mente suele ser el cliché de este estilo.

Elegir Propósito y Estilo por separado:

• Propósito (qué se va a filmar, cómo se va a estructurar): ver references/formats.md, leer solo la sección correspondiente.
• Estilo (cómo se ve, cómo se mueve, qué sonido tiene): primero leer references/styles/INDEX.md, luego leer solo 1–2 archivos de estilo seleccionados. El estilo se puede usar directamente, modificar (reemplazar una o dos reglas), combinar (uno principal y otro secundario, o cambiar de medio por sección), o personalizar siguiendo styles/_template.md. Las reglas del estilo se mantienen igual; la historia, las tomas y la estructura provienen del tema del usuario, no se deben copiar de otros videos. Cada archivo de estilo tiene las secciones "Señales de identificación" y "La versión más trillada". Elegir 2–3 señales según el tema (al menos una que no esté en los clichés), y escribir en el brief qué clichés se han descartado y por qué, o por qué se mantienen. Cuando el usuario elige un estilo, quiere reconocerlo de un vistazo; con 2 o 3 señales es suficiente.
• Luego, consultar references/craft.md (banco de técnicas) según sea necesario.

Escribir el brief siguiendo la plantilla references/brief-template.md. El núcleo es:

Reel Read:
  format: [propósito, tipo de formats.md]
  benchmark: [obra de referencia · qué aprender · qué no aprender]
  structure: [tres estructuras candidatas → cuál se elige y por qué]
  style: [estilo de styles/ (con puntos de modificación), o plan de combinación, o reglas personalizadas]
  signals: [cuáles 2–3 señales se eligieron y por qué; qué clichés se descartaron]
  takeaway: [una frase o imagen que el espectador recordará]
  hook: [qué sucede en el primer segundo]
  signature: [punto memorable: segundo, técnica]
  palette / type / motion / camera / texture: [escribir los valores específicos según el estilo elegido]
  sound: [sin sonido / sintetizado (referencia de sonido, ritmo, armonía, instrumentación, curva, ver sección 2 de sound.md) / canción del usuario (BPM, drop)]
  audio-sources: [BGM y efectos de sonido: IA / usuario / desactivado]
  narration: [ninguna / TTS con guion del usuario / grabación del usuario; con locución, ruta de timeline de frases, prioridad de voz]
  forbidden: [lista de prohibiciones para este video]

Luego, escribir la tabla de guion gráfico: Sin locución, mantener la cuadrícula de beats + tabla de guion gráfico. Con locución, asociar las frases con las tomas y eventos, escribiendo Toma / ID de frase | Cambio a explicar | Estado inicial y final del objeto | Objeto y espacio heredados | Eventos clave y su base temporal | Toma y sonido. Una sola toma puede cubrir varias frases, una frase puede tener múltiples acciones; no tratar cada frase de la locución como una instrucción de corte, ni exigir que cada frase se muestre en pantalla completa. Los intervalos reales se rellenan después de preparar el audio, no usar la estimación por número de palabras como referencia final de alineación. Para videos largos, escribir una tabla de capítulos, la duración de cada capítulo y las reglas de consistencia entre capítulos.

Si el usuario solo dice "dale todo", también hay que traducirlo a las restricciones concretas anteriores; de lo contrario, el resultado será aleatorio.

Paso 3: Fotogramas de estilo (segunda parada para esperar al usuario)

Crear el proyecto: sh <skill>/scripts/scaffold.sh <slug> [--audio synth|tone|layer|file|none] (synth = síntesis de nivel 1; solo copiar la score seleccionada, file usa la pista final ya preparada). Los valores predeterminados del motor del scaffold son solo para la inicialización técnica, no para sustituir la confirmación de requisitos. El starter solo sirve para verificar que el pipeline funcione; tanto las imágenes como el texto deben ser reemplazados.

A. El usuario ya ha definido el estilo (o ha dado referencias claras): Los segundos en los siguientes comandos son solo ejemplos; tomar los tiempos efectivos de la apertura, punto memorable y final de este video; no copiar 14.5 segundos.

1. Construir con código real el fotograma del hook, el fotograma del punto memorable y el fotograma final, usando los colores, fuentes y texto final.
2. render.mjs <slug> --still 0.6,7.2,14.5 --sheet, revisarlo uno mismo primero, corregir problemas evidentes antes de mostrarlo al usuario. Para direcciones que dependen del movimiento, generar además demos continuas según las indicaciones de esta sección (con --start --duration).
3. Enviar al usuario el resumen del Reel Read, el resumen del guion gráfico y los fotogramas de estilo, y preguntar "¿Es correcta la dirección?".

B. El usuario no ha definido el estilo (incluyendo el modo desatado): Proporcionar 3 direcciones claramente diferenciadas, siguiendo las reglas de styles/INDEX.md:

• A: se ajusta al tema / marca, B: cambia a un lenguaje visual diferente (de otro grupo), C: es audaz (personalizado, combinación o estructuralmente muy atrevido; al menos una dirección no debe ser existente en el banco).
• Cada dirección escribe un mini Reel Read (estilo, referencia, punto memorable, dirección musical, 3–5 líneas) y renderiza con código real un fotograma clave que mejor la represente. Las tres direcciones se colocan en el mismo proyecto, cambiando con ?dir=a|b|c. B y C solo sirven para este fotograma clave, no es necesario que sean videos completos.
• render.mjs <slug> --directions a,b,c --at 14.5,2,0 renderiza los tres de una vez y los combina en qa/directions.png con etiquetas, se envía al usuario y se pregunta "¿Cuál eliges, o cómo se mezclan?".

En ambos casos, realmente esperar la respuesta del usuario antes de entrar en la producción. Para proyectos con TTS, adjuntar el esquema de segmentación del guion original y una muestra corta de tono (usando solo el texto proporcionado por el usuario), para confirmar la dirección de la voz. Si el usuario ha indicado explícitamente de antemano que no se necesita confirmación, elegir una, justificarla, auto-revisarse y continuar; al entregar, dar al usuario las direcciones no elegidas (en el caso B, adjuntar qa/directions.png; en el caso A, escribir una frase sobre las otras dos direcciones posibles), para que el usuario pueda cambiarlas después.

Para las direcciones que dependen del movimiento continuo, adjuntar una demo de movimiento representativo de 6–10 segundos (para videos de menos de 6 segundos, usar el video completo) que cubra un cambio de estado y su transición anterior y posterior; revisar uno mismo los fotogramas continuos para excluir saltos. La demo se confirma junto con los fotogramas de estilo, sin añadir una tercera parada obligatoria. Cuando la locución aún no se ha generado, marcar explícitamente como previsualización de movimiento, no afirmar que está alineada con precisión con la voz.

Paso 4: Producción

Antes de la producción, leer references/stack.md (contrato de página, determinismo, trampas de cada tecnología). Para buscar implementaciones ya hechas, consultar references/recipes.md.

Con locución, primero fijar la línea de tiempo de la locución: Sintetizar el guion original del usuario o importar la grabación del usuario siguiendo references/narration.md, obtener la duración real y las marcas de tiempo de cada frase, y luego organizar las imágenes. Para la grabación del usuario, se necesita obtener el texto y el tiempo mediante herramientas de transcripción disponibles o un SRT/JSON proporcionado por el usuario; sin marcas de tiempo fiables, no se puede afirmar que la alineación frase por frase está completa. Si se descubre que la duración entra en conflicto, confirmar primero, no rellenar, recortar o cambiar la velocidad en silencio. Importar los intervalos reales en la tabla de tomas, mantener las pausas y los énfasis de la locución, no forzar la alineación con los compases musicales. Si supera los 2 minutos, dividir por capítulos siguiendo references/long-form.md y mantener la caché de los capítulos.

Las frases solo proporcionan rangos de sincronización; las tomas y el movimiento de los objetos pueden continuar a través de varias frases. Cuando los cambios clave requieren sincronización a nivel de palabra, usar el tiempo real de las palabras o puntos de anclaje anotados manualmente, consultando a través de narration.js, para que las imágenes y los efectos de sonido hagan referencia al mismo evento; cuando solo se tiene tiempo a nivel de frase, mantener la sincronización a nivel de frase, no falsificar los puntos de tiempo de cada palabra. Durante la producción, usar preview.mjs para previsualizar con sonido, arrastrar y revisar fotograma a fotograma; la previsualización solo impulsa el mismo render(t), no entra en el renderizado formal.

1. Escribir todos los puntos de tiempo en timeline.js. La página y score.mjs importan desde allí. La tabla de tomas se escribe en SHOTS (para informar el movimiento por toma durante la revisión), las pausas intencionadas se escriben en HOLDS (por ejemplo, final [[b(36), DUR]]), los beats que requieren respiración se escriben en DROPS, la herramienta de revisión los leerá. Cuando las transiciones deben coincidir con el beat, usar revealOn(beat, duración_transición, punto_revelación) para calcular el punto de inicio, de modo que el fotograma donde aparece la nueva imagen caiga exactamente en el beat.
2. Hacer toma por toma. Renderizar 3 fotogramas estáticos de cada toma (inicio, mitad, final); para cambios de estado clave y uniones entre tomas, ver además demos continuas para comprobar si el sujeto se reinicia repentinamente, si la velocidad del movimiento cambia abruptamente o si la toma se interrumpe. Que los fotogramas estáticos se vean bien no reemplaza la comprobación del movimiento; para movimientos rápidos, usar inspect.mjs strip para ver los fotogramas continuos.
3. Ejecutar la comprobación de determinismo: render.mjs <slug> --determinism. Si no pasa, corregirlo primero.
4. Si el video dura 30 segundos o más, o el renderizado es lento, primero generar una demo de baja resolución: --size 960x540 --out out/proxy.mp4.
5. Generar el video final: primero establecer FPS, SIZE, AUDIO, LOOP al principio de build.sh según el brief, luego ejecutar sh <slug>/build.sh. Construirá la música, primero ejecutará la comprobación de determinismo (si no pasa, no genera el video), luego renderizará, después ejecutará la comprobación de encuadre de texto (solo genera materiales de revisión, no detiene la construcción), y finalmente, con las mismas especificaciones, ejecutará la comprobación técnica (la duración se toma de DUR en timeline.js). --subframes, --dpr, --grain se añaden como parámetros al final, según las necesidades del estilo. Estos parámetros aumentarán el tiempo de procesamiento de forma exponencial; informar del tiempo estimado antes de empezar a renderizar.

Para mezclar pistas de audio, usar AUDIO=file AUDIO_FILE=audio/final.wav sh build.sh; los métodos de construcción antiguos synth/tone/layer/none siguen estando disponibles. Para videos largos, usar build-long.mjs para construir capítulos persistentemente; ver references/long-form.md para más detalles.

Reglas estrictas:

• La imagen solo está determinada por t: no usar Math.random, Date.now, rAF, temporizadores, animaciones CSS. No guardar estado entre fotogramas.
• Cargar todas las fuentes y materiales antes de establecer READY = true; alojar las fuentes en el proyecto.
• El diseño se deriva del ancho y alto devueltos por stageSize(), no se escriben píxeles fijos.

Paso 5: BGM, efectos de sonido y mezcla

Ver references/sound.md. BGM y efectos de sonido se crean por separado según las fuentes confirmadas, permitiendo combinaciones como música del usuario + efectos de sonido de IA. La siguiente tabla muestra las opciones de motor de síntesis de IA; no se puede usar un valor predeterminado del motor para anular la fuente de material ya confirmada. La dirección del sonido (referencia, ritmo, armonía, instrumentación, curva) se define en el brief:

Nivel	Qué usar	Adecuado para
Nivel 1 · Síntesis integrada	score.mjs, sintetizador en Node (batería, percusión de mano, bajo, pad, guitarra pulsada, marimba / metalófono / kalimba, órgano, pad vocal, FM, ruido ambiente, efectos de sonido, sidechain, reverberación, procesamiento lo-fi), cero dependencias	Electrónica, UI, chiptune, ambiente, lo-fi, artesanal y de juguete, la mayoría de los videos de motion
Nivel 2 · Tone.js	score.tone.js, renderizado offline usando Tone.js en un navegador sin cabeza: instrumentos sampleados (audio.mjs samples salamander descarga piano con licencia CC BY), reverberación de convolución, sintetizadores y efectos más ricos	Estilos que necesitan instrumentos reales, espacialidad, sensación cinematográfica
Canción externa	Música proporcionada por el usuario (propia, con licencia, generada por servicios de música IA)	El usuario ya tiene la música de fondo

• Construcción: audio.mjs build <slug>/score.mjs o score.tone.js, ambos producen audio/music.wav normalizado a −14 LUFS.
• Canción del usuario: Sin locución, ejecutar primero audio.mjs beats (usará librosa automáticamente si está disponible) para alinear con la línea de tiempo, luego superponer efectos de sonido usando S.load() en la score. Con locución, solo usar los beats musicales como referencia, ajustar la música y los efectos de sonido para que acompañen a la voz, no mover la línea de tiempo de la locución ya confirmada.
• Sin sonido: Omitir si BGM, efectos de sonido y locución están desactivados; desactivar solo el BGM no significa que el video sea completamente mudo.
• Con locución: Reducir la melodía principal, la percusión densa y los grandes cambios dinámicos en la música; los efectos de sonido solo se usan para acciones con valor informativo, evitando palabras clave y el inicio de las frases. Mantener pistas independientes y usar narration.mjs mix para realizar la atenuación durante la voz, la normalización de la sonoridad y el procesamiento de picos. Verificar las imágenes con las marcas de tiempo reales de las frases, la sensación auditiva aún requiere la revisión final del usuario.

Después de cada construcción, ejecutar audio.mjs check en la mezcla final para ver los números y los gráficos; cuando el anfitrión lo permita, escuchar también. No se puede dar por "confirmada la sensación auditiva" solo porque los números pasen. Cuando DROPS esté escrito en timeline.js, también medirá la atenuación antes del beat fuerte y el aumento después; si no hay respiración, emitirá una ADVERTENCIA.

Paso 6: Revisión

Revisión técnica: Determinada por el programa, si falla no se puede entregar.

node <skill>/scripts/inspect.mjs qa <slug>/out/final.mp4 --out <slug>/qa/final \
  --expect-size 1920x1080 --expect-fps 30 --expect-duration 16 --audio required   # Para video sin sonido usar --audio none; para bucle añadir --loop

Esto comprueba si el archivo se puede decodificar, el tamaño, el framerate, la duración, el número de fotogramas, la pista de audio, los fotogramas negros, el nivel de sonoridad, los picos reales y la unión del bucle (si es necesario). Si algún elemento falla, el código de salida es 1 y debe corregirse. Las especificaciones no pasadas se listarán como NO COMPROBADO, en cuyo caso la revisión no se considera aprobada. build.sh pasará automáticamente las especificaciones. La herramienta de renderizado también rechazará publicar archivos con un número incorrecto de fotogramas.

Revisión estética: Para juicio humano, no es una determinación del programa. Mirar los fotogramas extraídos, los fotogramas extraídos en tamaño móvil, las secciones congeladas (las declaradas en HOLDS se marcarán como pausas intencionadas, el resto hay que juzgar si son tiempos muertos), los puntos de corte, el movimiento y los fotogramas flash por toma, las imágenes marcadas de encuadre de texto (qa/text-*.png), los gráficos de audio. Seguir la tabla de revisión de references/review.md, anotar las observaciones y los 3 problemas más graves. Para videos con números y gráficos, verificar el contenido y la coherencia de los datos. Después de corregir, solo re-renderizar el segmento problemático, luego generar el video completo, registrando el proceso en qa/review_log.md. Si el anfitrión lo permite, enviar a otro agente que no haya participado en la producción para que solo mire estos materiales y señale problemas (ver "Revisión independiente" en review.md).

Con locución, ejecutar adicionalmente narration.mjs check para verificar la cobertura de tiempo de las frases, la duración del audio y las especificaciones confirmadas; revisar frase por frase la coherencia entre el guion original, la imagen y la voz; la comprobación automática no puede reemplazar la revisión auditiva. Para videos largos, revisar capítulo por capítulo y comprobar la imagen, el sonido y la línea de tiempo en las uniones.

La conclusión de la revisión es una referencia para el usuario, no puede reemplazar la visualización del video por parte del usuario. Las partidas no aplicables se marcarán como "no aplica", como la sincronización de audio e imagen en una obra sin sonido; no asignar una puntuación forzada.

Paso 7: Entrega

Informar al usuario de:

• Las rutas de out/final.mp4 y out/poster.png (poster: render.mjs <slug> --poster <t>).
• brief.md: el prompt estructurado completo, el registro de las dos confirmaciones, reutilizable, sin credenciales de API.
• Con locución, adjuntar el guion original del usuario, la línea de tiempo de las frases y las fuentes de cada pista; para videos largos, adjuntar el manifiesto de capítulos y el comando de reconstrucción desde punto de interrupción.
• Los resultados de la revisión técnica (todos PASADOS), los problemas aún no resueltos del registro de revisión estética y el tiempo de renderizado.
• Cómo reconstruir (sh build.sh), cómo modificar solo un segmento.
• Las fuentes y licencias de los materiales de terceros (fuentes, materiales del usuario, canciones); recordar al usuario que verifique nuevamente el contenido factual.

Las conclusiones de la revisión y las evidencias de la verificación se guardan en qa/review_log.md del proyecto y se entregan junto con los archivos de producción.

---

Reglas básicas (que todos los estilos deben cumplir)

1. Requisitos y guion original: La información obligatoria debe ser confirmada; el video no supera los 20 minutos; el guion original del TTS debe provenir del usuario. Los conflictos de duración deben ser confirmados, no se debe modificar el guion, truncar o cambiar la velocidad por cuenta propia.
2. Precisión factual: Las funciones del producto, los números y los nombres solo provienen del usuario o de fuentes fiables; si no está seguro, señalarlo.
3. Texto legible: El tamaño de fuente debe ser legible en el tamaño de un móvil; el tiempo de permanencia debe ser suficiente para leerlo (ver sección 7 de craft.md); el texto no se desborda, no se superpone, no está oculto.
4. Materiales con licencia: Los logos, capturas de pantalla, fuentes, canciones deben ser utilizables, y listarlos en la entrega.
5. Corrección técnica: Renderizado determinista, todas las comprobaciones técnicas aprobadas, sin fotogramas negros, el final no puede ser abrupto (fotograma final estático o bucle sin interrupciones).
6. Consistencia de estilo: Las reglas de estilo seleccionadas se mantienen de principio a fin, no se incumple la lista de prohibiciones del brief.

Además de esto, cuánto se mueve la cámara, si se usan resortes, la densidad de los efectos de sonido, el ritmo rápido o lento, se determinan según el estilo y el contenido (ver references/styles/ y craft.md).

---

Referencia rápida de herramientas (S=<skill>/scripts)

Propósito	Comando
Instalar dependencias / comprobar entorno / autocomprobación	sh $S/setup.sh · node $S/check-env.mjs · cd $S && npm test
Crear proyecto	sh $S/scaffold.sh <slug> [--audio synth|tone|layer|file|none]
Fotogramas estáticos + composición	node $S/render.mjs <slug> --still 0.5,3,7.2 --sheet · --range 0:15:1 --sheet
Tres direcciones / portada	node $S/render.mjs <slug> --directions a,b,c --at 14.5,2,0 → qa/directions.png · --poster 14.5 → out/poster.png
Determinismo	node $S/render.mjs <slug> --determinism
Encuadre de texto (material de revisión)	node $S/render.mjs <slug> --text-check [--safe auto|none|T,R,B,L] → qa/text.json + imagen marcada (build.sh lo ejecuta automáticamente)
Analizar video de referencia	node $S/inspect.mjs grid <ref> --strips (puntos de corte + cuadrícula de beats + fotogramas de transición) · heat <ref> (mapa de calor de movimiento de cada sección)
Demo / Final / Segmento	--size 960x540 --out out/proxy.mp4 · Final sh <slug>/build.sh --subframes 2 --grain 4 (especificaciones en build.sh) · --start 6 --duration 3 --out out/seg.mp4
Sonido	node $S/audio.mjs build <slug>/score.mjs (o score.tone.js) · samples salamander · beats <track> --out audio/beats.json · check audio/music.wav (lee DROPS)
Locución / Mezcla final	node $S/narration.mjs tts … · import … · mix … · check … (parámetros en narration.md)
Reconstrucción de videos largos	node $S/build-long.mjs <slug>/chapters.json (parámetros en long-form.md)
Previsualización con sonido	node $S/preview.mjs <slug> --size 1920x1080 --fps 30 (se puede añadir --audio audio/final.wav; ver stack.md)
Revisión y materiales de revisión	node $S/inspect.mjs qa out/final.mp4 --expect-… (build.sh lo añade automáticamente) · sheet · phone · strip --at 4.2 · loop · motion (lee SHOTS / HOLDS: movimiento por toma, saltos, fotogramas flash)

Archivos de referencia (leer según sea necesario)

Archivo	Cuándo leerlo
references/formats.md	Paso 2: Propósito, como video promocional, portafolio, animación UI, tipografía con beats, logo, explosión de datos, composición con pantalla verde
references/styles/INDEX.md	Paso 2: Índice de 43 estilos, reglas para tres direcciones, reglas de combinación; luego leer solo styles/<slug>.md del seleccionado. Usar styles/_template.md para personalizar
references/craft.md	Pasos 2 y 4: Ritmo, movimiento, transiciones, cámara, tipografía, color, textura, puntos memorables, lista de sabores por defecto
references/brief-template.md	Al escribir el brief
references/stack.md	Paso 4: Contrato de página, determinismo, trampas de cada tecnología, fuentes, materiales, múltiples formatos, rendimiento
references/recipes.md	Cuando se necesita una implementación ya hecha
references/sound.md	Paso 2 (sección 2: Dirección del sonido) y Paso 5
references/review.md	Paso 6: Explicación de la revisión técnica, tabla de revisión estética, revisión independiente, problemas comunes, lista de entrega
references/narration.md	Al elegir TTS, locución del usuario, mezcla independiente de BGM/efectos de sonido
references/long-form.md	Cuando supera los 2 minutos: planificación de capítulos, caché persistente, audio segmentado y reconstrucción desde punto de interrupción