🕹️ agent-browser (Playwright)
El «ojo» del ciclo de diseño. Automatiza interacciones del navegador —navegar, completar formularios, tomar screenshots, probar apps web y extraer datos— y es el eslabón crítico que cierra el ciclo entre generar una página y validar visualmente el resultado.
🧩 Qué es / qué hace
Definición precisa
agent-browser es un skill de Claude Code que automatiza las interacciones con el navegador mediante Playwright. Expone la herramienta Bash(agent-browser:*) permitiendo a Claude navegar por URLs, tomar capturas de pantalla, completar formularios, probar aplicaciones web y extraer datos de páginas, todo desde la terminal, sin intervención humana.
El skill funciona como una CLI completa de automatización. Cada subcomando (open, snapshot, screenshot, fill, click…) se asigna a una acción real en el browser. El flujo central es: navegar → snapshot → interactuar → volver a tomar un snapshot. Referencias de elementos (@e1, @e2…) se extraen del snapshot y se usan en los comandos siguientes.
✓ USAR CUANDO
- ✓ Validar visualmente una página recién creada
- ✓ Probar formularios y flujos de autenticación
- ✓ Extraer datos de sitios sin API
- ✓ Tomar capturas de pantalla para documentación o revisión
- ✓ Grabar un video de las interacciones para una demostración
✗ NO USAR CUANDO
- ✗ La tarea consiste solo en análisis de código estático
- ✗ Hay una API REST disponible para los mismos datos
- ✗ El sitio bloquea los navegadores headless (protección contra bots)
- ✗ Quieres hacer scraping masivo (usa scrapers dedicados)
🎣 Cuándo se activa
Disparador de la description
Claude activa agent-browser cuando el pedido implica "navegar por sitios web", "interactuar con páginas web", "completar formularios", "tomar capturas de pantalla", "probar aplicaciones web" o "extraer información de páginas web" — exactamente los verbos de la description del skill.
Escenarios que activan la skill
"Abre la página que acabo de crear y toma una captura de pantalla" → abre localhost, captura y devuelve la imagen.
"Completa el formulario de contacto con datos de prueba y comprueba si se envía" → fill + click + wait.
"Accede a esta página y dime cuáles son los títulos de los artículos" → snapshot + get text.
"Crea la página, ábrela y comprueba si el diseño quedó bien; ajusta lo que esté mal" → frontend-design genera + agent-browser abre + impeccable itera.
🚀 Cómo mejora tus páginas
agent-browser es el ojo que cierra el ciclo de diseño. Sin él, Claude genera HTML a ciegas: entrega código que podría estar roto en el browser real. Con él, la verificación visual forma parte del propio ciclo de trabajo.
📊 El ciclo cerrado con agent-browser
frontend-design / web-artifacts-builder crea la página HTML
agent-browser abre y toma un screenshot — Claude «ve» el resultado real
impeccable itera sobre lo que el screenshot reveló que estaba mal
Por qué esto importa en el diseño
HTML es texto: los errores visuales (superposición, texto cortado, color incorrecto) son invisibles en el código. La captura de pantalla devuelve información que solo existe en el navegador renderizado. Esto transforma a Claude de «escritor de HTML» en «diseñador con ojo para el resultado».
✓ CON agent-browser
- ✓ Diseño validado píxel a píxel
- ✓ Interacciones probadas antes de entregar
- ✓ Errores de diseño responsivo detectados al instante
- ✓ Captura de pantalla como evidencia para la revisión
✗ SIN agent-browser
- ✗ Errores visuales que solo descubre el usuario
- ✗ Formularios entregados sin probar
- ✗ Diseño mobile-first nunca verificado
- ✗ El ciclo de revisión es humano y lento
⚙️ Cómo funciona por dentro
Stack real del skill
Bash(agent-browser:*)
allowed-tools: solo comandos de agent-browser
Playwright
Microsoft — automatización entre navegadores
--json / imagem
legible por máquinas o PNG/PDF
# Navegação
agent-browser open <url> # Abrir URL
agent-browser back # Voltar
agent-browser reload # Recarregar
# Snapshot (análise da página)
agent-browser snapshot # Árvore de acessibilidade completa
agent-browser snapshot -i # Apenas elementos interativos (recomendado)
agent-browser snapshot -c # Saída compacta
agent-browser snapshot -s "#main" # Escopo por seletor CSS
# Interações (usar @refs do snapshot)
agent-browser click @e1 # Clique
agent-browser fill @e2 "texto" # Limpar e digitar
agent-browser type @e2 "texto" # Digitar sem limpar
agent-browser press Enter # Teclar
agent-browser select @e1 "valor" # Dropdown
agent-browser scroll down 500 # Scroll
agent-browser drag @e1 @e2 # Drag & drop
agent-browser upload @e1 file.pdf # Upload
# Screenshots e PDF
agent-browser screenshot # Captura full page
agent-browser pdf # Exportar PDF
# Gravação de vídeo
agent-browser video start # Iniciar gravação
agent-browser video stop # Parar e salvar
# Wait / sincronização
agent-browser wait --url "**/done" # Aguardar URL
agent-browser wait --text "Sucesso" # Aguardar texto
# Sessões paralelas
agent-browser --session test1 open site-a.com
agent-browser --session test2 open site-b.com
agent-browser session list
# JSON machine-readable
agent-browser snapshot -i --json
agent-browser get text @e1 --json
# Estado salvo (autenticação)
agent-browser state save auth.json
agent-browser state load auth.json⚠️ Atención: nuevo snapshot obligatorio
Después de cualquier navegación o cambio significativo en el DOM, los @refs quedan inválidos. Ejecuta agent-browser snapshot -i de nuevo antes de interactuar con elementos nuevos.
💬 Ejemplo práctico + PROMPT listo
Escenario: crear una landing y validarla visualmente
Flujo completo: frontend-design crea el HTML → agent-browser lo abre y toma una captura de pantalla → Claude ve el resultado → impeccable corrige lo que no cumple con lo esperado.
Crie uma landing page para o produto "DesignBot" usando frontend-design.
Depois abra a página no browser com agent-browser, tire um screenshot
e me diga se o layout está correto — verifica se hero, CTA e footer
aparecem sem sobreposição. Se tiver algo errado, corrija com impeccable
e tire outro screenshot para confirmar.Ejemplo real: envío de formulario (del SKILL.md)
# 1. Abrir a página
agent-browser open https://app.exemplo.com/contato
# 2. Snapshot dos elementos interativos
agent-browser snapshot -i
# retorna: @e1 (input nome), @e2 (input email), @e3 (btn enviar)
# 3. Preencher e enviar
agent-browser fill @e1 "Maria Silva"
agent-browser fill @e2 "maria@exemplo.com"
agent-browser click @e3
# 4. Aguardar confirmação
agent-browser wait --text "Mensagem enviada"
# 5. Screenshot como evidência
agent-browser screenshotEjemplo real: autenticación guardada (del SKILL.md)
# Login uma vez
agent-browser open https://app.exemplo.com/login
agent-browser snapshot -i
agent-browser fill @e1 "usuario"
agent-browser fill @e2 "senha"
agent-browser click @e3
agent-browser wait --url "**/dashboard"
agent-browser state save auth.json
# Sessões futuras: carregar estado salvo
agent-browser state load auth.json
agent-browser open https://app.exemplo.com/dashboard🧬 Combina con / límites
El triángulo del loop de diseño
El skill que itera sobre el diseño con foco en la calidad visual. Usa agent-browser para ver el estado actual, identificar fallas y corregirlas, formando el ojo + mano del bucle.
Genera la página React/HTML con Tailwind y shadcn. Después de generarla, agent-browser abre y valida lo que se creó, cerrando el ciclo sin salir de la terminal.
El próximo módulo. Usa Firecrawl para analizar a fondo sitios externos. Se combina con agent-browser para lo que Firecrawl no alcanza: páginas que necesitan interacción (login, SPA, lazy-load).
Otras combinaciones útiles
Genera un diagrama → lo abre en el navegador → toma una captura de pantalla para insertarla en la documentación.
Sistema de diseño generado → agent-browser valida la capacidad de respuesta en diferentes viewports.
animation-designer crea las animaciones CSS → agent-browser graba el video de la animación mientras se ejecuta en el navegador.
⚠️ Límites reales
localhost:PORT).📋 Resumen del Módulo 4.3
Bash(agent-browser:*)