🌐 agent-browser (Playwright)
La primera pieza es la captura. agent-browser controla un navegador mediante Playwright: abre la URL en un viewport fijo, navega por la app, ejecuta acciones y toma capturas de pantalla reales con sus bounding boxes.
Es agent-browser quien produce la materia prima del video: assets/shots/*.png (los estados) y el steps.json (recuadros + captions + narración). Sin esta etapa, no hay nada que animar.
agent-browser navega por la app real — entonces el localhost:8000 (o la URL) debe estar respondiendo durante la captura. Los detalles del capture.mjs y del actions.json quedan en la Trilha 2.
🎞️ HyperFrames (HTML→MP4)
La segunda pieza es el renderizado. HyperFrames convierte una página HTML animada en un video MP4; usa Chrome headless para generar los frames y FFmpeg para montarlos.
La página animada (marco + shots + cursor + zoom + CTA), generada por build-demo.mjs.
Renderiza fotograma a fotograma, de forma determinista, sin interfaz visible.
Une los frames y el audio en un MP4 final en 16:9.
Como el video se crea a partir de HTML renderizado en Chrome headless, es natural que el renderizado sea determinista (sin red): exactamente el principio del Módulo 1.2. Los detalles del renderizado están en la Trilha 3.
🗣️ Kokoro TTS local
La tercera pieza es la narración. Kokoro genera el habla en PT-BR localmente: un WAV por paso (más la CTA), con la voz pf_dora a --speed 0.98.
Kokoro funciona como modelo local (kokoro-onnx). La primera ejecución descarga ~340MB; después, cada video genera los WAV sin ningún servicio externo. El generador mide esos WAV con ffprobe para sincronizar el timing automáticamente.
- ✓ "512" → "quinientos doce"
- ✓ "inema.club" → "inema punto club"
- ✓ Siglas y URL deletreadas o expandidas
- ✓ 1 frase corta por paso
- ✗ Dejar los números sin formato (se leen mal)
- ✗ Esperar una actuación dramática (la voz es buena, pero neutra)
- ✗ Frases largas que hacen que el paso se desborde
- ✗ Inglés en la narración (siempre PT-BR)
Como no se puede escuchar el audio durante el flujo de generación, lo habitual es mostrarle los frames al usuario y pedirle que confirme la locución antes del renderizado final.
🔒 Sin clave de API
Las tres piezas se ejecutan localmente. La captura, el render y la narración no dependen de ningún servicio de pago ni de una clave de API — lo que significa costo cero por video y ningún dato sale de la máquina.
Node 22+ y FFmpeg; el Chrome de HyperFrames (npx hyperframes browser ensure); el TTS Kokoro (pip install kokoro-onnx soundfile); e o agent-browser en el PATH. Todo es software local — sin credenciales en la nube.
Trae sus propias fuentes (Sora/Inter/JetBrains Mono en assets/fonts/) y el house style. No depende de ningún otro proyecto, repositorio o servicio para funcionar.
📥 Instalar la skill
Como una skill es solo una carpeta, instalarla es sencillo. Hay tres opciones: clonar el repo da skill, copiar la carpeta o crear un symlink para desarrollar.
Con cualquiera de las tres opciones, reinicia la sesión para que Claude Code reconozca la skill recién instalada.
📂 Dónde se encuentra la skill
Las skills están en .claude/skills. La elección del lugar define el alcance: global (cualquier proyecto) o de proyecto (solo en ese repositorio).
Disponible en cualquier proyecto. Ideal para una skill que usas todo el tiempo, en varios repositorios.
Disponible solo en ese proyecto y versionable junto con el código: es una buena opción para equipos.
Skill personal de uso constante → global. Skill específica de un producto y compartida con el equipo → en .claude/skills del repositorio.
⚡ Cómo activar la skill
Una vez instalada, la skill se activa con frases cotidianas. Conocer estas frases garantiza que se ponga en marcha el demostrativo (y no el explicativo).
- • "video de demostración"
- • "demo de la app / del sistema"
- • "walkthrough"
- • "mostrar paso a paso usando la app"
- • Dar una URL y pedir un video de uso
- • Dar un
localhost:8000 - • "grabar la pantalla del sistema"
- • "video que muestra cómo usar X"
"Haz un video sobre X" (sin app) suele activar el video-explicativo. Para la demostración, deja claro que hay una app para mostrar — o da el enlace.
Como la entrada de la skill es el enlace de la app, ofrecer la URL desde el inicio ya comunica la intención y activa el flujo correcto.
📋 Resumen del Módulo 1.3
- ✓ agent-browser (Playwright) captura las capturas + los boxes
- ✓ HyperFrames renderiza HTML→MP4 (Chrome headless + FFmpeg)
- ✓ Kokoro TTS local narra (voz pf_dora, --speed 0.98)
- ✓ Todo funciona en la máquina — sin clave de API, costo cero
- ✓ Instalar: zip, copiar carpeta o symlink; global vs. proyecto
- ✓ Disparador: "demo", "walkthrough" o compartir el enlace