feat(dev-tools): adiciona plugin dev-tools (agents, skills, knowledge e metadados do projeto)

2026-10-28 16:08:45 +00:00
parent ce6030ee00
commit 7b2162ff29
180 changed files with 52164 additions and 0 deletions
@@ -0,0 +1,158 @@
+---
+name: chrome
+description: Integração com Chrome para automação browser — navegar páginas, preencher formulários, debug de consola, extracção de dados, testes e screenshots.
+allowed-tools: Bash, Read, Write, Glob
+layer: wiki
+---
+
+# /chrome - Chrome Browser Integration
+
+Integra Claude Code com o Chrome para automacao browser, testes, debug, performance e extraccao de dados. Suporta dois backends: **Claude in Chrome** (extensao) e **Chrome DevTools MCP** (npm).
+
+## Backends Disponiveis
+
+### Backend A: Claude in Chrome (Extensao)
+
+Extensao oficial Anthropic. Requer instalacao manual no browser.
+
+| Requisito | Minimo | Verificar |
+|-----------|--------|-----------|
+| Google Chrome | Instalado | `google-chrome --version` |
+| Extensao Claude in Chrome | v1.0.36+ | `chrome://extensions` |
+| Claude Code | v2.0.73+ | `claude --version` |
+| Plano Claude | Pro/Max/Team/Enterprise | - |
+| Native Host | Configurado | `~/.config/google-chrome/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json` |
+
+**Limitacoes:** Apenas Google Chrome (nao Brave/Arc). Nao suportado em WSL.
+
+**Activacao:**
+```bash
+# Por sessao
+claude --chrome
+
+# Por defeito (alias .bashrc)
+alias cc="claude --permission-mode bypassPermissions --chrome"
+
+# Dentro de sessao activa
+/chrome -> "Enabled by default"
+
+# Ver ferramentas
+/mcp -> seleccionar claude-in-chrome
+```
+
+### Backend B: Chrome DevTools MCP (npm)
+
+Pacote oficial Google (`chrome-devtools-mcp`). Controla Chrome via DevTools Protocol. Nao requer extensao.
+
+| Requisito | Minimo | Verificar |
+|-----------|--------|-----------|
+| Google Chrome | Instalado | `google-chrome --version` |
+| Node.js | v18+ | `node --version` |
+| chrome-devtools-mcp | latest | `claude mcp list` |
+
+**Instalacao:**
+```bash
+claude mcp add chrome-devtools --scope user -- npx -y chrome-devtools-mcp@latest
+```
+
+**Activacao:**
+```bash
+# Lancar Chrome com remote debugging
+google-chrome --remote-debugging-port=9222
+
+# Reiniciar sessao Claude Code para carregar ferramentas
+```
+
+**Ferramentas disponibilizadas:**
+- `page_navigate`, `page_go_back`, `page_go_forward` - Navegacao
+- `page_screenshot` - Captura de ecra
+- `page_click`, `page_type`, `page_select_option` - Interaccao
+- `page_execute_javascript` - Executar JS no contexto da pagina
+- `page_wait_for_selector` - Esperar por elementos
+- `console_get_logs` - Ler consola (logs, errors, warnings)
+- `network_get_requests`, `network_get_response_body` - Inspeccionar rede
+- `dom_get_element`, `dom_query_selector` - Inspeccionar DOM
+- `css_get_computed_styles`, `css_get_matched_styles` - Inspeccionar CSS
+- `performance_start_trace`, `performance_stop_trace` - Gravar traces
+- `performance_analyze_insight` - Metricas automaticas (LCP, TBT, CLS)
+- `accessibility_get_tree` - Arvore de acessibilidade
+- `storage_get_cookies`, `storage_get_local_storage` - Inspecionar storage
+
+## Capacidades
+
+### 1. Navegacao e Interaccao
+- Abrir URLs em novas tabs
+- Clicar botoes, links, elementos
+- Preencher formularios (input, select, textarea)
+- Submeter forms
+- Scroll e hover
+
+### 2. Debug e Diagnostico
+- Ler console logs, errors, warnings
+- Inspeccionar DOM state e CSS computado
+- Verificar network requests e response bodies
+- Ler JavaScript errors em tempo real
+- Inspeccionar cookies, localStorage, sessionStorage
+
+### 3. Performance (DevTools MCP)
+- Gravar performance traces completos
+- Metricas automaticas: LCP, TBT, CLS, FCP, TTFB
+- Identificar JavaScript nao utilizado
+- Analise de recursos (tamanho, tempo de carga)
+- Equivalente a Lighthouse audit on-demand
+
+### 4. Acessibilidade (DevTools MCP)
+- Arvore de acessibilidade completa
+- Verificar roles ARIA, labels, estados
+- Identificar elementos sem texto alternativo
+
+### 5. Extraccao de Dados
+- Extrair texto estruturado de paginas
+- Scraping de tabelas, listas, precos
+- Guardar dados como CSV/JSON local
+- Ler conteudo de paginas autenticadas (Chrome extensao)
+- Query DOM com selectores CSS/XPath
+
+### 6. Testes Web
+- Testar forms com dados invalidos
+- Verificar UI contra mocks
+- Validar user flows completos
+- Testar responsividade
+- Monitorizar network requests durante testes
+
+### 7. Sites Autenticados (Chrome extensao)
+- Google Docs, Gmail, Sheets
+- Notion, Slack web
+- CRMs, dashboards
+- Qualquer site com sessao activa no Chrome
+
+### 8. Automacao
+- Data entry repetitivo
+- Multi-site workflows
+- Gravar demos como GIF (Chrome extensao)
+- Preencher CRMs a partir de CSV
+
+## Workflows Comuns
+
+### Testar aplicacao local
+```
+Abre localhost:3000, tenta submeter o formulario com dados invalidos
+e verifica se as mensagens de erro aparecem correctamente.
+```
+
+### Debug com console
+```
+Abre a pagina do dashboard e verifica o console por erros
+quando a pagina carrega.
+```
+
+### Preencher formularios em massa
+```
+Tenho um ficheiro contacts.csv. Para cada linha, vai ao CRM em
+crm.example.com, clica "Adicionar Contacto" e preenche nome, email e telefone.
+```
+
+### Escrever em Google Docs
+```
+Escreve um resumo do projecto baseado nos commits recentes
+no Google D