Changroro/code-video

Code Video

<skill> es la carpeta que contiene este SKILL.md. El motor vive en <skill>/template/:

• kit.js: líneas dibujadas a mano, texto y tipo cinético, cámara, transiciones, sprites de píxeles, minis, pixelado de imágenes, clips de video, accesorios de teléfono y cursor, desenfoque de movimiento, useFonts
• módulos de estilo para los aspectos y formatos acreditados: handdrawn.js, motion.js, sand.js, lyric.js, beat.js (cada uno dibuja las piezas distintivas del original)
• módulos de aspecto arcade.js, terminal.js, thermal.js, transit.js, blueprint.js: una API de escenas compartida más la escena de formato distintiva de cada aspecto (references/looks.md)
• minis-ai.js: minis listos para usar relacionados con IA (Claude, Codex, Gemini, DeepSeek, Grok, Qwen)
• render.mjs: renderizado paralelo con Chrome sin cabeza; mezcla audio.wav cuando está presente
• main.js: esqueleto de escenas

<skill>/scripts/audio.py sintetiza música y efectos de sonido, <skill>/scripts/beats.py encuentra la cuadrícula de ritmos de una canción, y <skill>/scripts/reference_sheet.py coloca los fotogramas de un original acreditado sobre los tuyos.

Herramientas requeridas: node/npm, ffmpeg compilado con libx264, Google Chrome y uv. Si falta alguna, detente y di cuál.

for c in node npm ffmpeg uv; do command -v $c >/dev/null || echo "missing: $c"; done; ffmpeg -hide_banner -encoders | grep -q libx264 || echo "missing: libx264"

0. Pregunta por el aspecto y el formato, luego la configuración

El aspecto es solo el estilo de dibujo; el formato es la estructura de la historia. Cualquier aspecto funciona con cualquier formato, excepto que los formatos lírico y de ritmo traen su propio aspecto a menos que el usuario pida otro. Primero pregunta por ambos en un mensaje corto con dos listas numeradas (más opciones de las que caben en una pregunta). Omite lo que el usuario ya haya nombrado y sugiere un formato según el tema (una comparación sugiere versus, una alineación sugiere mapa de ruta, etc.).

Aspectos:

Aspecto	Sensación	Sonido predeterminado	Guía	Crédito
1. Dibujo a mano + minis de 8 bits (predeterminado)	juguetón, cuaderno de bocetos	ninguno	styles/handdrawn.md	@nahiddotai
2. Gráficos de marca animados	limpio, oficial	ninguno	styles/motion.md	@digitalstrategyai
3. Arte en arena	cálido, como una historia	música y efectos	styles/sand.md	@Michaelzsguo
4. Arcade de 16 bits	videojuego, enérgico	música estilo chiptune y golpes	looks.md	original
5. Terminal CRT	desarrollador, retro	clics de teclas, pad suave	looks.md	original
6. Recibo térmico	impreso, táctil	ticks de impresora, sello	looks.md	original
7. Mapa de tránsito	diagrama, ordenado	campanadas, trenes	looks.md	original
8. Plano técnico	técnico, preciso	sonidos de dibujo	looks.md	original

Formatos (detalles en references/formats.md):

Formato	Estructura	Crédito
1. Promo estándar (predeterminado)	gancho → título → pasos → número grande → final	original
2. Versus	rondas entre dos opciones, luego un recuento	original
3. Sesión	comandos y salidas que muestran cómo se usa	original
4. Recibo	lista detallada, total, sello	original
5. Mapa de ruta	líneas, estaciones, intercambios	original
6. Ficha técnica	partes, cada una con una especificación	original
7. Videoclip lírico (aspecto propio)	una canción original, un hecho y un diagrama por línea	@goodside
8. Video sincronizado con ritmo (aspecto propio)	clips reales cortados en los ritmos de una canción: pared, carrusel, teléfono	@twoclipping

Cuando enumeres aspectos y formatos, nombra la fuente original de cada uno acreditado con su enlace.

Luego pregunta la configuración en una sola llamada AskUserQuestion. Omite cualquier cosa que el usuario ya haya dicho y pon la opción recomendada primero.

• Duración: 30 s / 15 s / 45 s / 60 s
• Fotograma: 16:9 1920×1080 / 9:16 1080×1920 / 1:1 1080×1080 / 16:9 2560×1440
• Personajes: mascota del logo + minis del tema / minis especificados por el usuario / solo mascota del logo / ninguno
• Idioma en pantalla: el idioma de esta conversación / Inglés / ambos

Los personajes adoptan la forma del aspecto: sprites de 8 bits, siluetas de arena, héroes pixelados o iconos planos. Los minis son un elenco de apoyo que se ajusta al tema. Usa el elenco del usuario si lo nombra. De lo contrario, elige un elenco de la investigación y propónlo en el plan (ver "Minis" en references/storyboard.md).

Usa estos valores predeterminados para cualquier cosa que no hayas preguntado y menciónalos en el plan:

• 30 fps (60 fps con desenfoque de movimiento para el formato beat), H.264 MP4, como máximo 10 MB por cada 30 s (un poco más cuando hay sonido)
• Sonido según lo indicado para el aspecto; los formatos lírico y de ritmo siempre tienen música. No hay voces cantadas.

Reglas para cada aspecto y formato

• Los aspectos acreditados reproducen el original. Antes de planificar, abre la guía y mira sus fotogramas de referencia <skill>/docs/styles/<key>.jpg con la herramienta Read. Cada elemento de la tabla de Características Distintivas de la guía debe aparecer en pantalla; la tabla es un requisito, no un menú. Los extras vienen después de las características distintivas, nunca en su lugar.
• Idioma: cada fragmento de texto en pantalla sigue la configuración de idioma en pantalla, incluyendo etiquetas, HUD, letras, recibos, salida de terminal y la tarjeta final.
• Tema de la investigación: la paleta proviene de los colores reales de la marca (página de CI, CSS del sitio o píxeles del logo) y las tipografías de la marca cuando sea posible. Muestra la paleta como valores hexadecimales con su fuente en el plan. Los aspectos con un material o campo fijo (arena, campo de movimiento oscuro, verde de terminal, papel térmico, azul de plano) lo mantienen y llevan la marca en el logo, un acento y la tarjeta final.
• Números: cada número tiene una fuente. Calcula las edades y los "N años" a partir de la fecha de fundación en lugar de copiar una línea antigua de "N años" del sitio. No inventes lecturas de UI ni estadísticas de ejemplo; usa valores reales o déjalos fuera.
• Crédito: los aspectos y formatos acreditados nombran al creador cuya idea adaptan. Mantén esos créditos cuando cambies una guía.
• Espera tu propio trabajo. Ejecuta los renderizados en primer plano con un tiempo de espera Bash largo (hasta 600000 ms). Cuando inicies agentes o comandos en segundo plano, espera sus resultados antes de terminar tu turno: en una ejecución no interactiva, nada te despierta de nuevo.

1. Investigación

Sigue references/research.md.

• Mantenlo proporcional: para un video de menos de un minuto, unos 10 hechos con fuente y los activos de la marca son suficientes. Dale a un agente de solo lectura un resumen breve (las preguntas, los sitios, un límite de unas 15 recuperaciones) y ejecuta búsquedas independientes en paralelo.
• Verifica personalmente los números principales contra la oración original.
• Si las fuentes discrepan en un número, pregunta al usuario cuál usar.

2. Aprobación del plan

Muestra lo siguiente y obtén aprobación antes de crear la carpeta de trabajo:

• resumen de la investigación con enlaces a las fuentes
• aspecto y formato, y la línea de tiempo de escenas usando los patrones y tiempos de sus guías
• para un aspecto o formato acreditado: su tabla de características distintivas con la escena que muestra cada elemento
• paleta (valores hexadecimales y de dónde vino cada uno) y tipografías
• plan de sonido cuando el aspecto o formato tenga sonido: tempo, secciones y pistas
• números utilizados y números descartados, lista de activos (URL del logo, tipografías, personajes, clips, licencia de la canción), ubicación de la carpeta de trabajo

Si el usuario cambia escenas o énfasis, reformula el flujo revisado una vez, luego procede.

3. Construcción

cp -R <skill>/template <work-folder>/<name>-video && cd <work-folder>/<name>-video
chmod -R u+w .   # el skill instalado puede ser de solo lectura, y cp mantiene sus modos
npm i
bash <skill>/scripts/fetch_fonts.sh assets/fonts
curl -fsSL -o assets/logo_src.png '<URL del logo oficial>'
uv run --with pillow python <skill>/scripts/clean_logo.py assets/logo_src.png assets/logo.png

• index.html: establece tamaño, fps y duración en window.VIDEO; declara las tipografías que nombra la guía con @font-face (y solo esas); carga el módulo de estilo para un aspecto o formato acreditado (handdrawn.js, motion.js, sand.js, lyric.js, beat.js) o un módulo de aspecto para los aspectos 4–8 (sus tipografías se cargan mediante useFonts(LOOK.fonts)).
• Con un módulo de aspecto, construye escenas a partir de la API de escenas y la escena característica del formato (references/looks.md); establece los colores de la marca en LOOK.colors.
• main.js: TEMA, funciones de escena y boot(). La API está en references/kit-api.md.
• Usa el logo real y los archivos de marca denominativa.
• Dibuja la mascota del logo como un sprite drawPixels (o como una silueta en el aspecto de arena).
• Registra minis en MINIS y dibújalos con drawMini. Para temas relacionados con IA, carga minis-ai.js y dibuja solo los personajes que falten.
• Muestra al usuario un fotograma fijo de la alineación de personajes al principio y haz que lo confirme.
• Mantén el texto y los números como constantes al principio de main.js. Para dos versiones (un número pendiente, dos idiomas), bifurca en un parámetro de URL y renderiza cada uno con QUERY=lang=ko node render.mjs video ….
• Sonido: escribe audio.json con los mismos tiempos de escena que main.js, luego uv run --with numpy --with scipy python <skill>/scripts/audio.py audio.json audio.wav. Para el formato de ritmo, ejecuta beats.py en la canción primero y corta en su cuadrícula.

4. QA

Sigue references/qa-checklist.md.

1. Renderiza fotogramas fijos con node render.mjs stills <tiempos a mitad de escena y tiempos justo antes y después de cada transición>.
2. Construye hojas de revisión con uv run --with pillow python <skill>/scripts/contact_sheet.py stills <carpeta-temporal> y míralas.
3. Corrige lo que encuentres.
4. Renderiza el video una vez con CRF=25 node render.mjs video <Nombre>.mp4, extrae los fotogramas de transición y un fotograma cada 2 s, y verifica el tamaño del archivo. Con sonido, verifica el flujo de audio, la sonoridad y la sincronización de las pistas.
5. Para un aspecto o formato acreditado, construye uv run --with pillow python <skill>/scripts/reference_sheet.py <clave> <Nombre>.mp4 <carpeta-temporal>/ref.jpg, míralo y marca cada elemento de las características distintivas. Corrige cualquier error y renderiza de nuevo.

5. Entrega

• El renderizado de QA es el archivo de entrega. Renderiza de nuevo solo después de una corrección; si excede el objetivo de tamaño, eleva CRF a 27 o baja boot({ noise }).
• Elimina archivos intermedios como stills/ y registros.
• Envía el MP4 con SendUserFile (muestra render) e informa:
  • especificaciones: aspecto, formato, duración, resolución, fps, tamaño de archivo, sonido
  • la fuente original de un aspecto o formato acreditado, con su enlace, y el resultado de la lista de verificación de características distintivas
  • lista de escenas
  • hechos utilizados, con enlaces a las fuentes
  • números descartados y por qué, y elementos que necesitan confirmación
  • el comando de re-renderizado, señalando que debe ejecutarse dentro de la carpeta de trabajo