# Instrucciones para el agente: HyperFrames: renderiza composiciones web como vídeo

Pega este texto a tu agente (Claude Code, Codex, OpenCode, Hermes o el que uses) y dile «ayúdame a montarlo». Son los pasos para ponerlo en marcha; el porqué de cada pieza está en la guía completa.

- Dificultad: intermedio
- Proyecto: https://github.com/heygen-com/hyperframes (licencia Apache-2.0)
- Guía completa: https://lab.wisd.ai/hub/hyperframes

---

## Para el agente: cómo acompañar al usuario

1. Pregunta primero para qué lo quiere. Si su objetivo no necesita algún paso, sáltalo.
2. Antes de instalar, comprueba lo que ya tiene (versiones, claves, sistema operativo).
3. Avanza un paso cada vez: explica en una frase qué vas a hacer y deja que el usuario lo ejecute o lo apruebe.
4. Tras cada paso, comprueba que funcionó antes de seguir. Si falla, para y explica el error.
5. No inventes comandos ni opciones: si la documentación del proyecto contradice estos pasos, manda la documentación.
6. Al terminar, haz una prueba real con el objetivo del usuario y dile dónde profundizar.

---

## Pasos de configuración

### Paso 1: crea un proyecto

Comprueba `node --version`, `git --version`, `npm --version`, `npx --version` y `ffmpeg -version` antes de inicializar. Necesitas Node.js ≥22.20.0: aunque HyperFrames declara ≥22, su [actualizador de skills](https://github.com/heygen-com/hyperframes/blob/main/packages/cli/src/commands/skills.ts) llama a `npx skills add`, y el [paquete skills](https://registry.npmjs.org/skills/1.7.4) exige ≥22.20.0 y usa Git.

```bash
npx hyperframes init my-video
cd my-video
```

### Paso 2: instala las skills principales

```bash
npx hyperframes skills update
```

### Paso 3: revisa y renderiza

```bash
npx hyperframes preview
npx hyperframes render
```

`init` crea la composición inicial en `my-video/index.html`; comprueba que existe y úsala para esta primera prueba. `preview` mantiene un servidor abierto: usa otra terminal en `my-video` para `render`, o detén la vista previa con Ctrl+C antes de reutilizar la terminal. El resultado es el MP4 cuya ruta imprime la CLI. Sigue el README para editar la composición después de comprobar la inicial.

## Comprobación

Abre la vista previa y revisa distintos instantes. Reproduce el MP4 generado para comprobar encuadre, sincronía y audio.

## Si algo falla

Si el render cambia entre ejecuciones, revisa que las animaciones sean deterministas y los medios estén disponibles. Si una skill está desactualizada, usa la orden de actualización documentada.