Sma1lboy/rove

CLI de HyperFrames

Todo se ejecuta a través de npx hyperframes a menos que las instrucciones del proyecto especifiquen un envoltorio local. Obedece exactamente el envoltorio local. Requiere Node.js >= 22 y FFmpeg.

Flujo de trabajo

1. Andamiaje — npx hyperframes init my-video (o capture desde una URL)
2. Escribir — autoriza la composición HTML (ver ../core)
3. Lint — npx hyperframes lint
4. Validar — npx hyperframes validate (errores de tiempo de ejecución + contraste)
5. Inspección visual — npx hyperframes inspect
6. Previsualizar — npx hyperframes preview abre Studio, el editor de línea de tiempo donde el usuario puede editar manualmente cualquier cosa (no solo mirar). Revisa allí, luego pregunta antes de renderizar.
7. Renderizar — elige la variante:
   • Iterar: npx hyperframes render --quality draft
   • Entregar: npx hyperframes render --quality high --output out.mp4
   • CI / reproducción multiplataforma: npx hyperframes render --docker --strict --output out.mp4
   • Nube (largo / grande): npx hyperframes lambda render ./my-project --width 1920 --height 1080 --wait (ver Lambda más abajo)

Ejecuta lint, validate e inspect antes de previsualizar. lint detecta data-composition-id faltantes, pistas superpuestas y líneas de tiempo no registradas. validate carga la composición en Chrome sin cabeza e informa errores de consola de tiempo de ejecución más problemas de contraste WCAG. inspect recorre la línea de tiempo e informa texto que se sale de burbujas/contenedores o del lienzo — y, cuando un archivo .motion.json está presente, verifica la intención de movimiento (entradas que se activan durante el avance, orden de escalonamiento, dentro del fotograma, actividad) contra esa misma línea de tiempo recorrida.

Para trabajos con mucho movimiento, prefiere la iteración basada en instantáneas y un archivo .motion.json adjunto — consulta references/lint-validate-inspect.md para la disciplina y la especificación de verificación de movimiento.

Convenciones para Agentes

Reglas transversales que se aplican a todos los comandos:

• --json está disponible en todos los comandos excepto render, preview y play. Úsalo para cualquier invocación de agente / CI de los comandos compatibles; la salida incluye un envoltorio _meta (versión de CLI, última disponible, consejo de actualización). render informa el estado a través de stdout + código de salida solamente — verifica el éxito con la comprobación posterior al renderizado a continuación; preview / play son servidores, sin JSON.
• doctor --json siempre sale con 0, incluso cuando el entorno está roto. Bloquea el campo ok de la carga útil: npx hyperframes doctor --json | jq -e '.ok' > /dev/null. Esto aísla los pipelines de la rotación de versiones de CLI.
• El modo no interactivo se detecta automáticamente. Cuando stdout no es una TTY (CI, agentes, salida canalizada), la CLI cambia automáticamente a no interactivo; init entonces requiere --example. Pasa --non-interactive para forzar este modo incluso en una TTY.
• Bloqueo en CI para renderizado: --strict falla en errores de lint, --strict-all falla también en advertencias, --strict-variables falla en claves --variables no declaradas.
• Las rutas en --json están censuradas — $HOME se convierte en el literal $HOME para que la salida sea segura para pegar en informes de errores y contextos de agente.
• El renderizado está controlado por el usuario. Nunca auto-renderices una vez que las comprobaciones pasan. Pausa en preview, dile al usuario que el video es editable en Studio, y renderiza solo después de que lo aprueben.
• Verificación posterior al renderizado. Después de que render devuelva el código de salida 0, confirma que el archivo de salida existe y tiene un tamaño plausible antes de informar éxito: [ -s "$OUTPUT" ] || echo "el renderizado no produjo salida". La CLI imprime ◇ <ruta> en éxito; para renderizados largos, también verifica la duración con ffprobe -i "$OUTPUT" -show_format -v error.

Enrutamiento

Si quieres…	Lee
Andamiar un proyecto (init, capture, skills)	references/init-and-scaffold.md
Verificar corrección (lint, validate, inspect, snapshot)	references/lint-validate-inspect.md
Previsualizar o renderizar (preview, play, render, publish)	references/preview-render.md
Diagnosticar el entorno (doctor, browser)	references/doctor-browser.md
Renderizar en la nube con AWS Lambda (lambda deploy / sites / render / progress / destroy / policies)	references/lambda.md
Todo lo demás (info, upgrade, compositions, docs, benchmark, telemetry, preprocesamiento de assets)	references/upgrade-info-misc.md

Transferencias de Sección

• Proyectos con Tailwind (init --tailwind) → ver ../core/references/tailwind.md antes de editar clases o tokens de tema.
• Componentes/bloques del registro (hyperframes add, hyperframes catalog) → ver ../registry para rutas de instalación, cableado de subcomposiciones y fusión de fragmentos.
• Renderizados parametrizados (--variables) → declarados a través de data-composition-variables en <html>; ver ../core/references/variables-and-media.md para el esquema completo.

Lambda (Renderizado en la Nube)

hyperframes lambda despliega renderizado distribuido en AWS Lambda y maneja los renderizados desde tu portátil o CI. El proceso completo son tres comandos:

npx hyperframes lambda deploy                                             # aprovisionar pila SAM (Lambda + Step Functions + S3)
npx hyperframes lambda render ./my-project --width 1920 --height 1080 --wait
npx hyperframes lambda destroy                                            # desmantelar (el bucket S3 se conserva)

Usa Lambda cuando un renderizado es demasiado largo / grande para un solo host (videos de varios minutos, 4K, lotes paralelos grandes) y tienes credenciales AWS configuradas. Para el bucle de desarrollo local, quédate con render local.

Ver references/lambda.md para requisitos previos, los 6 subcomandos (deploy, sites create, render, progress, destroy, policies), validación de políticas IAM, archivos de estado y reglas de costo / limpieza.

Puerta de Control Mínima de Finalización

Puertas estáticas

npx hyperframes lint
npx hyperframes validate

Añade inspect para trabajos sensibles al diseño y render --strict en CI para fallar en errores de lint.

Prueba de humo visual — requerida cuando el proyecto usa subcomposiciones

lint / validate / inspect evalúan cada composición de forma aislada. Nunca cargan index.html y montan subcomposiciones a través de data-composition-src, por lo que no pueden detectar fallos de montaje entre archivos (ver ../core/references/sub-compositions.md, "Errores comunes"). La única puerta que los detecta es una que realmente cargue index.html y recorra la línea de tiempo.

Usa hyperframes snapshot — carga el proyecto de la misma manera que render (por lo que ejecuta la misma ruta de montaje) pero solo captura las marcas de tiempo que solicites, por lo que toma segundos en lugar de un renderizado completo:

# Captura un fotograma en el punto medio de cada subcomposición.
# Puntos medios = data-start + data-duration/2 para cada ranura host en index.html.
npx hyperframes snapshot --at <t1>,<t2>,<t3>,...

# O, si no necesitas un objetivo por escena, una muestra espaciada uniformemente:
npx hyperframes snapshot --frames 9

La salida se guarda en snapshots/frame-NN-at-Xs.png. Inspecciona visualmente cada fotograma contra el plan de la escena.

Señales de alerta por fotograma (cada una se mapea a un modo de fallo específico que las puertas estáticas no detectan):

Lo que ves	Causa raíz
El texto aparece pequeño + sin estilo en la esquina superior izquierda	El bloque <style> se quedó en <head> fuera de <template> (Error 1) — ningún CSS alcanzó el DOM en vivo
Elementos SVG/icono ampliados al tamaño del lienzo	Mismo que arriba — no se aplicaron restricciones de ancho/alto
El elemento principal de la escena falta por completo; solo fondo + marca de agua visibles	Host-id ≠ template id (Error 2) — la línea de tiempo nunca se ejecutó, fotograma capturado en estado inicial
El comando de snapshot registra Sub-composition timelines not registered after 45000ms	Error 2 — confirmación directa

snapshots/ se puede eliminar después de la inspección visual; el renderizado final para el usuario es un pase separado con npx hyperframes render.