🕹️ agent-browser (Playwright)
O "olho" do loop de design. Automatiza interações de navegador — navegar, preencher formulários, tirar screenshots, testar apps web e extrair dados — sendo o elo crítico que fecha o ciclo entre gerar uma página e validar visualmente o resultado.
🧩 O que é / o que faz
Definição precisa
agent-browser é um skill do Claude Code que automatiza interações de navegador via Playwright. Ele expõe a ferramenta Bash(agent-browser:*) permitindo ao Claude navegar em URLs, tirar screenshots, preencher formulários, testar apps web e extrair dados de páginas — tudo a partir do terminal, sem intervenção humana.
O skill funciona como uma CLI completa de automação. Cada subcomando (open, snapshot, screenshot, fill, click…) mapeia para uma ação real no browser. O fluxo central é: navegar → snapshot → interagir → re-snapshot. Referências de elementos (@e1, @e2…) são extraídas do snapshot e usadas nos comandos seguintes.
✓ USAR QUANDO
- ✓ Validar visualmente uma página recém-criada
- ✓ Testar formulários e fluxos de autenticação
- ✓ Extrair dados de sites sem API
- ✓ Tirar screenshots para documentação ou review
- ✓ Gravar vídeo de interações para demonstração
✗ NÃO USAR QUANDO
- ✗ A tarefa é só análise de código estático
- ✗ Há uma API REST disponível para o mesmo dado
- ✗ O site bloqueia headless browsers (bot protection)
- ✗ Você quer scraping massivo (use scrapers dedicados)
🎣 Quando dispara
Gatilho da description
O Claude aciona agent-browser quando o pedido envolve "navegar websites", "interagir com páginas web", "preencher formulários", "tirar screenshots", "testar apps web" ou "extrair informações de páginas web" — exatamente os verbos da description do skill.
Cenários que ativam o skill
"Abra a página que acabei de criar e tire um screenshot" → abre localhost, captura, retorna imagem.
"Preencha o formulário de contato com dados de teste e veja se envia" → fill + click + wait.
"Acesse essa página e me diga quais são os títulos dos artigos" → snapshot + get text.
"Crie a página, abra e veja se o layout ficou certo, ajuste o que estiver errado" → frontend-design gera + agent-browser abre + impeccable itera.
🚀 Como melhora suas páginas
O agent-browser é o olho fechando o loop de design. Sem ele, o Claude gera HTML às cegas — entrega código que pode estar quebrado no browser real. Com ele, a verificação visual entra no próprio ciclo de trabalho.
📊 O ciclo fechado com agent-browser
frontend-design / web-artifacts-builder cria a página HTML
agent-browser abre e tira screenshot — Claude "vê" o resultado real
impeccable itera sobre o que o screenshot revelou de errado
Por que isso importa no design
HTML é texto — bugs visuais (sobreposição, texto cortado, cor errada) são invisíveis no código. O screenshot devolve informação que só existe no browser renderizado. Isso transforma o Claude de "escritor de HTML" em "designer com olho no resultado".
✓ COM agent-browser
- ✓ Layout validado pixel a pixel
- ✓ Interações testadas antes de entregar
- ✓ Erros de responsividade detectados no ato
- ✓ Screenshot como evidência para revisão
✗ SEM agent-browser
- ✗ Bugs visuais só descobertos pelo usuário
- ✗ Formulários entregues sem teste
- ✗ Mobile-first nunca verificado
- ✗ Loop de revisão é humano + lento
⚙️ Como funciona por dentro
Stack real do skill
Bash(agent-browser:*)
allowed-tools: apenas comandos agent-browser
Playwright
Microsoft — automação cross-browser
--json / imagem
machine-readable ou 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⚠️ Atenção: re-snapshot obrigatório
Após qualquer navegação ou mudança significativa no DOM, os @refs ficam inválidos. Execute agent-browser snapshot -i novamente antes de interagir com novos elementos.
💬 Exemplo prático + PROMPT pronto
Cenário: criar uma landing e validar visualmente
Fluxo completo: frontend-design cria o HTML → agent-browser abre e tira screenshot → Claude vê o resultado → impeccable corrige o que estiver fora do 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.Exemplo real: form submission (do 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 screenshotExemplo real: autenticação salva (do 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 com / limites
O triângulo do loop de design
O skill que itera sobre o design com foco em qualidade visual. Ele usa o agent-browser para ver o estado atual, identificar falhas e corrigir — formando o olho + mão do loop.
Gera a página React/HTML com Tailwind e shadcn. Após geração, agent-browser abre e valida o que foi criado — fechando o ciclo sem sair do terminal.
O próximo módulo. Usa Firecrawl para análise profunda de sites externos. Combina com agent-browser para o que Firecrawl não alcança: páginas que precisam de interação (login, SPA, lazy-load).
Outras combinações úteis
Gera diagrama → abre no browser → screenshot para embed em documentação.
Design system gerado → agent-browser valida responsividade em diferentes viewports.
animation-designer cria as animações CSS → agent-browser grava o video da animação rodando no browser.
⚠️ Limites reais
localhost:PORT).📋 Resumo do Módulo 4.3
Bash(agent-browser:*)