🤖 Qué es el agent-browser
Una skill de navegación que controla un navegador real (con Playwright por debajo) mediante comandos de línea: es lo que abre la aplicación de verdad y captura las pantallas que se convierten en el video.
agent-browser no simula la pantalla — usa la aplicación. Cada screenshot es una captura real del DOM en el estado de ese paso, en el viewport que fijaste.
Es por eso que esta skill muestra una app real, en lugar de explicar un concepto con motion graphics.
- ✓ Abre una URL real en un navegador controlado
- ✓ Lista elementos interactivos con
snapshot -i - ✓ Completa, hace clic y toma capturas de pantalla de cada estado
- ✓ Ejecuta JS mediante
eval(p. ej., leer la bbox)
- ✗ No renderiza el video (eso lo hace HyperFrames, en T3)
- ✗ No graba video de la pantalla (ese sería el modo v3, roadmap)
- ✗ No necesita clave de API ni nube
- ✗ No anima nada — solo captura el estado real
localhost:8000.capture.mjs se ejecuta en Node y llama a agent-browser.🔗 Abrir la sesión y navegar a la URL
Fija el viewport, abre la URL y establece el estado. El orden importa: viewport antes de abrir.
Cada comando actúa en la misma pestaña abierta. Tú navegas, actúas, capturas y mides, paso a paso, sin volver a abrir la app en cada llamada.
📑 Referencias @ref y snapshot
O snapshot -i mapea los elementos y asigna refs (@e1, @e2…) — pero se desplazan cuando cambia el DOM.
Cada botón, campo y enlace recibe una referencia (@e6 = textarea, por ejemplo).
agent-browser fill @e6 "texto" llena ese elemento específico.
Después de «Generar», aparece un enlace de descarga y los refs se desplazan. Vuelve a capturar o cámbialos por un selector estable.
No confíes en @eN cuando el estado cambia entre pasos. En pantallas que cambian mucho, prefiere CSS selectors o {tag,text} — tema del módulo 2.3.
🖱️ Acciones: click, fill, scroll, screenshot
El vocabulario básico de cada paso. Cada acción cambia el estado de la pantalla y cada estado se convierte en un screenshot.
| Acción | Qué hace | Estado |
|---|---|---|
| fill | Completa input/textarea (CSS selector) | funciona |
| click | Haz clic en un elemento (CSS selector) | funciona |
| captura de pantalla | Guarda la pantalla del estado actual en PNG | funciona |
| eval | Ejecuta JS en el browser (p. ej., leer la bbox) | funciona |
| desplazamiento | Desplázate hasta el objetivo antes de la captura de pantalla | manual / roadmap |
O capture.mjs no desplaza la página por su cuenta. En páginas largas, hoy tú diriges agent-browser manualmente (scrollIntoView). Es el elemento n.º 1 del backlog — detallado en el módulo 2.4.
📸 Capturar el screenshot de la pantalla
Una captura de pantalla por estado, grabada en assets/shots/NN-id.png. Es la base de la regla de oro: capturar primero, animar después.
El render de HyperFrames es determinista (sin red durante el render). Por eso nunca se carga el sitio en vivo en el video: primero capturamos screenshots reales y luego animamos encima.
📐 Medir el bounding box de un elemento
Mediante eval, leer el getBoundingClientRect() del objetivo. Es el cuadro exacto al que apunta el cursor en el video.
El resultado queda en data.result (no en result). O capture.mjs ya se encarga de eso, pero conviene saber si hay que manejarlo manualmente.
La bbox real (no "a ojo") es lo que hace que el cursor caiga exactamente sobre el botón/campo. El mapeo de la bbox al canvas del video es el tema del módulo 2.3.
🖼️ El viewport fijo y por qué importa
El viewport de captura es el espacio de coordenadas de todo. Mantenlo igual para los bboxes y los screenshots; de lo contrario, el cursor fallará el objetivo.
- ✓ El mismo viewport para el bbox y la captura de pantalla
- ✓ Ancho ≤ ~1280 para caber en el canvas 16:9
- ✓ Si vuelves a capturar, captura todo en el mismo viewport
- ✓
set viewportantes deopen
- ✗ Capturar el bbox y el shot en viewports diferentes
- ✗ Las pantallas demasiado anchas quedan comprimidas o se desbordan
- ✗ Volver a capturar solo una pantalla y mezclarla con las antiguas
- ✗ Abrir la app y fijar el viewport después
Con viewport 1280×800 y la ventana centrada, la captura va de x320..1600 y y148..948 — dentro del canvas 1920×1080. Cambia el viewport y comprueba que no sobrepase los bordes.
🎯 Resumen del módulo
- ✓ agent-browser = Playwright en la línea de comandos; usa la app real
- ✓ viewport ANTES de open;
snapshot -ida refs @eN volátiles - ✓ acciones: fill, click, screenshot, eval (scroll aún es manual/roadmap)
- ✓ 1 toma por estado en
assets/shots/NN-id.png - ✓ bbox vía
getBoundingClientRect; viewport fijo = espacio de coordenadas
capture.mjs generar los shots y el steps.json.