El gate — antes de cualquier composición
Gatillo literal: la entrega ES un archivo de medios renderizado. MP4, WebM, MOV, PNG. Formato de la entrega, nunca apariencia.
No activa esta skill:
- Video usado dentro de un sitio web — hero, background, testimonio. Es un asset web común.
- Pieza de UI animada que "parece video" pero es interactiva — sigue siendo front-end web.
La distinción es de formato de la entrega. Si el resultado se abre en el navegador y responde al clic, no es esta skill.
Formato, resolución, fps y duración no tienen valor predeterminado
Ninguno de los cuatro. Elegir "1080p 30fps porque es común" es exactamente lo que el gate existe
para impedir. Los cuatro se elevan al usuario antes de que la composición comience (usa
AskUserQuestion), con la recomendación para el destino de la pieza (por ejemplo, vertical
1080×1920 para Reels/TikTok/Shorts).
Costo operacional — confirma antes de comprometer
HyperFrames no es un import: es un proceso de producción. Depende de Node, Chrome y FFmpeg instalados, y la captura es pesada.
Confirma que la infraestructura existe antes de prometer la ruta. Descubrir en el momento del render que falta FFmpeg es descubrir después de que la composición entera esté escrita.
Instalar cualquier dependencia (Node, FFmpeg, Chrome, el paquete hyperframes) es decisión del
usuario. Nombra lo que falta y el comando, y espera el OK.
Render nunca es automático
Ninguna ejecución de render ocurre sin autorización explícita del usuario. Render consume tiempo de máquina y, cuando hay generación de medios involucrada, dinero real.
Cuando falte un asset y la alternativa sea generar: nombra lo que falta y lo que generaría — y detente ahí.
Cómo usar
frontend-video/
├── SKILL.md ← este archivo. El ÚNICO siempre leído
└── referencias/
├── hyperframes.md el gate, formato/fps/duración, tiempo determinístico,
│ adapters, captions, autorización de render
├── direccion-visual.md tokens con razón escrita, antigénérico, referencia descompuesta
├── assets.md origen, licencia, optimización — aquí el asset ES la entrega
└── validacion.md los gates aplicables a los medios
| Tu tarea | Abre |
|---|---|
| decidir formato, resolución, fps, duración | hyperframes.md §3 |
| contenido, fuentes, captions, derechos | hyperframes.md §4 |
| tiempo determinístico, salida reproducible, adapters de escena | hyperframes.md §5 |
| accesibilidad y rendimiento de la pieza | hyperframes.md §6 |
| autorizar el render | hyperframes.md §7 |
| dirección estética de la composición | direccion-visual.md |
| licencia de imagen, fuente, música, efecto, narración | assets.md |
| cerrar la entrega | validacion.md |
Ignorar siempre: SEO, DOM indexable, ruta de navegación y estados de aplicación — medios determinísticos no tienen ninguno de los cuatro. Runtime web como entrega final tampoco se aplica: aquí el navegador es herramienta de captura, no el destino.
Música, efectos y narración
- Música y efectos de sonido: solo descarga con el OK del usuario, archivo por archivo. La
licencia debe permitir el uso previsto (comercial, si corresponde). Registra origen,
autor y licencia de cada pista. Detalles en
assets.md. - Narración: la skill no genera voz. Escribe el texto de la narración, en bloques cortos, y pide al usuario que lo genere en su servicio de voz (por ejemplo ElevenLabs) y envíe el archivo. Generar voz cuesta dinero: nombra el bloque y detente ahí.
Reproducibilidad — lo que "determinístico" realmente exige
El motor hace que la composición sea buscable por tiempo. Eso por sí solo no garantiza salida idéntica.
Prometer archivo byte a byte reproducible exige fijar todos estos: HyperFrames, Chrome, FFmpeg, fuentes, assets, codec y flags, resolución, fps, duración y entorno. Incluso un commit sin ese lock no autoriza la promesa.
Fuente auditada: repositorio heygen-com/hyperframes, commit
af1cb1c10da33bade100db8233435c7591b7c0bc, paquetes principales 0.8.17 en ese commit,
licencia Apache-2.0 en la raíz y en CLI. Verificado el 2026-08-28. El ejemplo-p01/ de este
repositorio se renderizó con la 0.8.166, con la versión fijada en el package.json. Fija la
versión en tu proyecto y reaudita si la composición depende de capacidades no cubiertas por las
fichas.
Lo que siempre vale
- Contenido real, nunca inventado — sin placeholder que parezca final.
- Captions y contraste son parte de la entrega, no son extra.
- Validación en el output real, nunca en la vista previa. Lo que la vista previa muestra y lo que el archivo final contiene divergen — codec, color y timing entre ellos.
- El código de escena autoral sigue siendo responsable de su propio disposal. Escena Three/WebGL dentro de la composición necesita teardown como en cualquier otro lugar.