jarvis-ai-framework 2.1.0 → 3.0.0

package/skills/eng-global-browser-extension-builder/SKILL.md

@@ -1,386 +0,0 @@
----
-name: eng-global-browser-extension-builder
-description: >
-  Especialista em criar extensões de navegador (Chrome, Firefox, cross-browser) que resolvem problemas reais.
-  Cobre arquitetura de extensão, manifest v3, content scripts, popup UIs, monetização e publicação na Chrome Web Store.
-  Trigger: Use quando precisar criar extensão de navegador, chrome extension, firefox addon, manifest v3.
-argument-hint: "[nome-da-extensao]"
-disable-model-invocation: false
-allowed-tools: Read Edit Write Glob Grep Bash WebFetch WebSearch Task
-license: AGPL-3.0
-metadata:
-  author: jarvis-team
-  version: "1.0"
-  area: global
----
-
-# Browser Extension Builder - Construtor de Extensões de Navegador
-
-Você é um **Arquiteto de Extensões de Navegador**.
-
-Você expande as capacidades do navegador para dar superpoderes aos usuários. Entende as restrições únicas do desenvolvimento de extensões — permissões, segurança, políticas da loja. Constrói extensões que as pessoas instalam e de fato usam no dia a dia. Sabe a diferença entre um brinquedo e uma ferramenta.
-
-## Objetivo
-
-Criar extensões de navegador modernas, seguras e publicáveis, seguindo as melhores práticas do Manifest V3, com suporte a Chrome, Firefox e múltiplos navegadores.
-
-## Entrada
-
-- `$ARGUMENTS` - Nome ou descrição da extensão a ser criada
-
-## Quando Usar
-
-Use este skill quando:
-- Precisar criar uma extensão para Chrome, Firefox ou outros navegadores
-- Quiser modificar ou interagir com o conteúdo de páginas web
-- Precisar de uma interface popup ou painel de opções
-- Quiser automatizar ações repetitivas no navegador
-- Precisar capturar, modificar ou injetar conteúdo em páginas
-
-**NÃO usar quando:**
-- A tarefa puder ser feita por um script de página simples
-- Não houver necessidade de integração com o navegador
-- O uso for único e não recorrente
-
----
-
-## Padrões Críticos
-
-### Padrão 1: Estrutura de Projeto
-
-Sempre usar esta estrutura base para extensões modernas:
-
-```
-extension/
-├── manifest.json          # Config da extensão
-├── popup/
-│   ├── popup.html         # Interface popup
-│   ├── popup.css
-│   └── popup.js
-├── content/
-│   └── content.js         # Executa nas páginas web
-├── background/
-│   └── service-worker.js  # Lógica em background
-├── options/
-│   ├── options.html        # Página de configurações
-│   └── options.js
-└── icons/
-    ├── icon16.png
-    ├── icon48.png
-    └── icon128.png
-```
-
-### Padrão 2: Template Manifest V3 (MV3)
-
-Base obrigatória para toda extensão moderna:
-
-```json
-{
-  "manifest_version": 3,
-  "name": "Minha Extensão",
-  "version": "1.0.0",
-  "description": "O que ela faz",
-  "permissions": ["storage", "activeTab"],
-  "action": {
-    "default_popup": "popup/popup.html",
-    "default_icon": {
-      "16": "icons/icon16.png",
-      "48": "icons/icon48.png",
-      "128": "icons/icon128.png"
-    }
-  },
-  "content_scripts": [{
-    "matches": ["<all_urls>"],
-    "js": ["content/content.js"]
-  }],
-  "background": {
-    "service_worker": "background/service-worker.js"
-  },
-  "options_page": "options/options.html"
-}
-```
-
-### Padrão 3: Comunicação entre Componentes
-
-```
-Popup ←→ Background (Service Worker) ←→ Content Script
-              ↓
-        chrome.storage
-```
-
-### Padrão 4: Solicitar Mínimo de Permissões
-
-Nunca solicitar mais permissões do que o necessário. Usar permissões opcionais e explicar o motivo na descrição. Solicitar no momento de uso.
-
----
-
-## Padrões de Implementação
-
-### Content Scripts
-
-Código executado diretamente nas páginas web.
-
-**Quando usar**: Ao modificar ou ler conteúdo de páginas.
-
-```javascript
-// content.js - Executa em cada página correspondente
-
-// Aguardar carregamento da página
-document.addEventListener('DOMContentLoaded', () => {
-  const elemento = document.querySelector('.alvo');
-  if (elemento) {
-    elemento.style.backgroundColor = 'yellow';
-  }
-});
-
-// Receber mensagens do popup/background
-chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
-  if (message.action === 'getData') {
-    const data = document.querySelector('.data')?.textContent;
-    sendResponse({ data });
-  }
-  return true; // Manter canal aberto para async
-});
-```
-
-**Injetar UI na página:**
-
-```javascript
-function injetarUI() {
-  const container = document.createElement('div');
-  container.id = 'minha-extensao-ui';
-  container.innerHTML = `
-    <div style="position: fixed; bottom: 20px; right: 20px;
-                background: white; padding: 16px; border-radius: 8px;
-                box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 10000;">
-      <h3>Minha Extensão</h3>
-      <button id="minha-extensao-btn">Clique aqui</button>
-    </div>
-  `;
-  document.body.appendChild(container);
-
-  document.getElementById('minha-extensao-btn').addEventListener('click', () => {
-    // Tratar clique
-  });
-}
-
-injetarUI();
-```
-
-**Permissões para content scripts:**
-
-```json
-{
-  "content_scripts": [{
-    "matches": ["https://site-especifico.com/*"],
-    "js": ["content.js"],
-    "run_at": "document_end"
-  }]
-}
-```
-
-### Storage e Estado
-
-Persistir dados da extensão usando a Chrome Storage API.
-
-**Quando usar**: Ao salvar configurações ou dados do usuário.
-
-```javascript
-// Salvar dados
-chrome.storage.local.set({ chave: 'valor' }, () => {
-  console.log('Salvo');
-});
-
-// Ler dados
-chrome.storage.local.get(['chave'], (resultado) => {
-  console.log(resultado.chave);
-});
-
-// Storage sincronizado (sincroniza entre dispositivos)
-chrome.storage.sync.set({ configuracao: true });
-
-// Monitorar mudanças
-chrome.storage.onChanged.addListener((changes, area) => {
-  if (changes.chave) {
-    console.log('chave alterada:', changes.chave.newValue);
-  }
-});
-```
-
-**Limites de storage:**
-
-| Tipo | Limite |
-|------|--------|
-| local | 5MB |
-| sync | 100KB total, 8KB por item |
-
-**Padrão async/await:**
-
-```javascript
-async function lerStorage(chaves) {
-  return new Promise((resolve) => {
-    chrome.storage.local.get(chaves, resolve);
-  });
-}
-
-async function salvarStorage(data) {
-  return new Promise((resolve) => {
-    chrome.storage.local.set(data, resolve);
-  });
-}
-
-// Uso
-const { configuracoes } = await lerStorage(['configuracoes']);
-await salvarStorage({ configuracoes: { ...configuracoes, tema: 'escuro' } });
-```
-
----
-
-## Fluxo de Trabalho
-
-### 1. Definir Escopo da Extensão
-
-Responder antes de criar:
-- Qual problema resolve?
-- Em quais páginas atua (todas ou específicas)?
-- Precisa de popup? Opções? Background persistente?
-- Quais permissões mínimas necessárias?
-
-### 2. Criar Estrutura de Arquivos
-
-```bash
-mkdir -p extensao/{popup,content,background,options,icons}
-```
-
-### 3. Criar manifest.json
-
-Usar template do Padrão 2, ajustando:
-- `permissions` - apenas o necessário
-- `content_scripts.matches` - restringir ao máximo
-- `action` - apenas se tiver popup
-
-### 4. Implementar Componentes
-
-Ordem recomendada:
-1. `background/service-worker.js` — lógica central
-2. `content/content.js` — interação com páginas
-3. `popup/popup.html` + `popup.js` — interface do usuário
-4. `options/options.html` + `options.js` — configurações
-
-### 5. Testar Localmente
-
-```
-Chrome:
-1. Abrir chrome://extensions/
-2. Ativar "Modo do desenvolvedor"
-3. Clicar "Carregar sem compactação"
-4. Selecionar pasta da extensão
-
-Firefox:
-1. Abrir about:debugging
-2. Clicar "Este Firefox"
-3. Clicar "Carregar Add-on Temporário"
-4. Selecionar manifest.json
-```
-
-### 6. Publicar na Chrome Web Store
-
-```
-1. Criar conta de desenvolvedor: $5 taxa única
-2. Empacotar extensão: zip de todos os arquivos
-3. Acessar: https://chrome.google.com/webstore/devconsole
-4. Criar novo item e fazer upload do zip
-5. Preencher: descrição, screenshots, categoria
-6. Enviar para revisão (1-3 dias úteis)
-```
-
----
-
-## Anti-Padrões
-
-### Solicitar todas as permissões
-
-**Por que é ruim**: Usuários não instalam. A loja pode rejeitar. Risco de segurança. Avaliações negativas.
-
-**Alternativa**: Solicitar o mínimo necessário. Usar permissões opcionais. Explicar o motivo na descrição. Solicitar no momento de uso.
-
-### Processamento pesado em background
-
-**Por que é ruim**: MV3 encerra workers ociosos. Consome bateria. Deixa o navegador lento. Usuários desinstalam.
-
-**Alternativa**: Manter background mínimo. Usar `alarms` para tarefas periódicas. Delegar para content scripts. Usar cache agressivamente.
-
-### Quebrar em atualizações
-
-**Por que é ruim**: Seletores mudam. APIs mudam. Usuários reclamam. Avaliações negativas.
-
-**Alternativa**: Usar seletores estáveis. Adicionar tratamento de erros. Monitorar quebras. Corrigir rapidamente quando quebrar.
-
----
-
-## Regras
-
-### Nunca
-- Solicitar permissões além do necessário
-- Usar `manifest_version: 2` em projetos novos (MV3 obrigatório)
-- Processar dados sensíveis sem criptografia
-- Ignorar políticas da Chrome Web Store
-- Usar `eval()` ou injeção dinâmica de scripts remotos
-- Armazenar credenciais no `chrome.storage` sem proteção
-
-### Sempre
-- Usar Manifest V3 (MV3)
-- Validar permissões contra o mínimo necessário
-- Tratar erros em todas as chamadas de API do Chrome
-- Testar em Chrome e Firefox quando possível
-- Incluir ícones em todos os tamanhos (16, 48, 128)
-- Documentar finalidade de cada permissão solicitada
-
----
-
-## Checklist de Conclusão
-
-- [ ] Estrutura de pastas criada corretamente
-- [ ] `manifest.json` com MV3 e permissões mínimas
-- [ ] Content script implementado (se necessário)
-- [ ] Service worker implementado (se necessário)
-- [ ] Popup implementado (se necessário)
-- [ ] Página de opções implementada (se necessário)
-- [ ] Ícones em todos os tamanhos (16, 48, 128px)
-- [ ] Testado localmente em modo desenvolvedor
-- [ ] Sem uso de `eval()` ou scripts remotos
-- [ ] Tratamento de erros implementado
-
----
-
-## Output
-
-| Artefato | Descrição |
-|----------|-----------|
-| `extension/manifest.json` | Configuração principal da extensão |
-| `extension/popup/` | Interface popup (se aplicável) |
-| `extension/content/` | Scripts executados nas páginas |
-| `extension/background/` | Service worker de background |
-| `extension/options/` | Página de configurações (se aplicável) |
-| `extension/icons/` | Ícones em todos os tamanhos |
-
----
-
-## Mensagem de Conclusão
-
-```
-Extensão criada com sucesso!
-
-Nome: {nome-da-extensao}
-Manifest Version: 3
-Navegadores: Chrome, Firefox (cross-browser)
-
-Estrutura:
-- [x] manifest.json
-- [x] content scripts
-- [x] service worker
-- [x] popup UI
-- [x] ícones
-
-Próximo passo: Carregar em chrome://extensions/ para testar
-```

package/skills/eng-global-jira-comment/SKILL.md

@@ -1,21 +0,0 @@
----
-name: eng-global-jira-comment
-description: >
-  Alias de eng-global-task-comment. Adiciona comentário no card do TASK_MANAGER
-  (Jira, Linear, GitHub Issues ou Asana).
-argument-hint: "{TASK_MANAGER_KEY} {mensagem}"
-disable-model-invocation: false
-allowed-tools: Read Bash MCP
-metadata:
-  author: jarvis-team
-  version: "1.0"
-  area: global
----
-
-# eng-global-jira-comment (alias)
-
-Este skill foi unificado em **`eng-global-task-comment`**.
-
-Execute o playbook de `$IDE/skills/eng-global-task-comment/SKILL.md` com os mesmos argumentos `{TASK_MANAGER_KEY} {mensagem}`.
-
-`{TASK_MANAGER_KEY}` — identificador do card no `TASK_MANAGER` do ENV.md.

package/skills/eng-qa-a11y-audit/SKILL.md

@@ -1,270 +0,0 @@
----
-name: eng-qa-a11y-audit
-description: Integra jest-axe nos testes unitários existentes de componentes React para validar acessibilidade WCAG 2.1 AA automaticamente. Adiciona assertions axe em cada componente e reporta violações.
-argument-hint: "[caminho do componente ou diretório — ex: src/components/]"
-disable-model-invocation: false
-allowed-tools: Read Write Edit Grep Glob Bash AskUserQuestion
-license: AGPL-3.0
-compatibility: Designed for Claude Code (or similar products)
-metadata:
-  author: jarvis-framework
-  version: "1.0"
-  area: qa
----
-
-# qa-a11y-audit
-
-Você é um especialista em acessibilidade web (a11y). Sua função é integrar
-`jest-axe` nos testes unitários existentes de componentes para validar
-conformidade WCAG 2.1 AA automaticamente, sem exigir expertise em a11y do dev.
-
----
-
-## Objetivo
-
-Adicionar testes de acessibilidade automatizados nos testes unitários existentes
-usando jest-axe. Detectar violações WCAG reais (aria, roles, contraste, semântica)
-e gerar report com correções sugeridas.
-
----
-
-## Entrada
-
-```
-/qa-a11y-audit [caminho]
-```
-
-- `caminho` (opcional) — diretório ou arquivo de componente
-- Se omitido, detectar automaticamente a partir da estrutura do projeto (ex: `src/components/`, `app/`, `lib/`)
-
----
-
-## Recursos
-
-| Recurso | Caminho |
-|---------|---------|
-| Testes existentes | `$TEST_FOLDER` ou colocated (`*.test.tsx`, `*.spec.tsx`) |
-| Config de testes | `jest.config.*`, `vitest.config.*`, `setupTests.*` |
-
----
-
-## Pré-requisito
-
-1. **ENV.md** válido
-2. **Projeto com testes unitários existentes** (Jest ou Vitest)
-3. **Componentes renderizáveis** (React, Vue, Svelte — que produzam DOM)
-
----
-
-## Quando Usar
-
-**Usar quando:**
-- Projeto precisa de conformidade WCAG 2.1 AA
-- Code review identificou problemas de acessibilidade
-- Sprint inclui melhorias de a11y
-- Onboarding de a11y em projeto que nunca teve
-
-**NÃO usar quando:**
-- Projeto não tem testes unitários (criar testes primeiro com `qa-unit-test`)
-- Componentes não renderizam DOM (hooks, utils, serviços)
-- Objetivo é teste E2E de a11y (usar Lighthouse/axe-core no E2E)
-
----
-
-## Padrões Críticos
-
-1. **Não sobrescrever testes existentes** — adicionar assertions axe nos testes que já existem, não reescrever
-2. **Setup uma vez, test N vezes** — configurar `toHaveNoViolations` no setup global, não em cada arquivo
-3. **Cada componente com render = test axe** — todo componente que já tem teste de render recebe assertion axe
-4. **Report com fix sugerido** — não apenas reportar violação, mas sugerir a correção HTML/JSX
-
----
-
-## Fluxo de Trabalho
-
-### Fase 1 — Detecção do ambiente
-
-**1.1** Detectar framework de teste:
-```bash
-# Jest
-grep -l "jest" package.json
-# Vitest
-grep -l "vitest" package.json
-```
-
-**1.2** Detectar framework UI:
-- `react` / `react-dom` → React
-- `vue` → Vue
-- `svelte` → Svelte
-
-**1.3** Localizar config de setup:
-```bash
-# Jest
-grep -r "setupFilesAfterSetup\|setupTests" jest.config.* package.json
-# Vitest
-grep -r "setupFiles" vitest.config.*
-```
-
-### Fase 2 — Instalação de dependências
-
-**2.1** Verificar se jest-axe já está instalado:
-```bash
-grep "jest-axe" package.json
-```
-
-**2.2** Se não instalado, apresentar ao usuário:
-```
-Para testes de acessibilidade, preciso instalar:
-- jest-axe (assertions axe para Jest/Vitest)
-- @types/jest-axe (tipos TypeScript, se aplicável)
-
-Instalar? (Sim / Não)
-```
-
-**2.3** Se sim:
-```bash
-npm install --save-dev jest-axe @types/jest-axe
-```
-
-### Fase 3 — Configuração global
-
-**3.1** Adicionar `toHaveNoViolations` no arquivo de setup:
-
-```typescript
-// No setupTests.ts ou equivalente
-import 'jest-axe/extend-expect';
-```
-
-> Se o arquivo de setup não existir, criar e registrar no config do Jest/Vitest.
-
-### Fase 4 — Scan de componentes
-
-**4.1** Listar todos os arquivos de teste no escopo:
-```bash
-find {caminho} -name "*.test.tsx" -o -name "*.spec.tsx" -o -name "*.test.ts" -o -name "*.spec.ts"
-```
-
-**4.2** Para cada arquivo de teste, verificar se já tem assertion axe:
-```bash
-grep -l "toHaveNoViolations\|jest-axe\|axe" {arquivo}
-```
-
-**4.3** Filtrar apenas os que renderizam componentes (contêm `render(`) e não têm axe.
-
-**4.4** Reportar ao usuário:
-```
-Encontrados {N} arquivos de teste com render.
-{M} já têm assertions axe.
-{K} serão atualizados.
-```
-
-### Fase 5 — Adicionar assertions axe
-
-**5.1** Para cada arquivo de teste sem assertions axe:
-
-1. Adicionar import:
-   ```typescript
-   import { axe } from 'jest-axe';
-   ```
-
-2. Adicionar test case após o último `it`/`test` do describe principal:
-   ```typescript
-   it('não possui violações de acessibilidade', async () => {
-     const { container } = render(<Componente {...defaultProps} />);
-     const results = await axe(container);
-     expect(results).toHaveNoViolations();
-   });
-   ```
-
-3. Se o componente precisa de providers/contexto (detectar pelo render existente), replicar o setup.
-
-**5.2** Não alterar testes existentes — apenas adicionar o novo test case.
-
-### Fase 6 — Executar e reportar
-
-**6.1** Executar os testes modificados usando o runner detectado na Fase 1:
-```bash
-# Jest
-npx jest --testPathPattern="{padrão}" --no-coverage
-# Vitest
-npx vitest run {padrão}
-```
-> Usar o runner que o projeto já utiliza — nunca forçar um runner diferente.
-
-**6.2** Para cada violação encontrada, gerar report:
-
-```markdown
-### Violação: {rule-id} ({impact})
-
-**Componente:** `{nome}`
-**Elemento:** `{selector}`
-**Problema:** {description}
-**Correção sugerida:**
-```jsx
-// Antes
-<div aria-label="Menu">...</div>
-
-// Depois
-<nav aria-label="Menu">...</nav>
-```
-```
-
-**6.3** Apresentar resumo ao usuário:
-```
-── a11y Audit ────────────────────────────────────────────
-  Componentes testados  : {N}
-  Sem violações         : {OK}
-  Com violações         : {FAIL}
-  Total de violações    : {V} ({critical}, {serious}, {moderate}, {minor})
-──────────────────────────────────────────────────────────
-```
-
----
-
-## Regras
-
-### Nunca
-- Sobrescrever ou deletar testes existentes
-- Instalar dependências sem confirmação do usuário
-- Ignorar violações de impacto `critical` ou `serious`
-- Hardcodar paths de componentes — usar `$TEST_FOLDER` ou argumento
-
-### Sempre
-- Configurar `toHaveNoViolations` no setup global (não em cada arquivo)
-- Replicar providers/contexto do render existente no test axe
-- Sugerir fix para cada violação (não apenas reportar)
-- Executar os testes após adicionar assertions para validar
-
----
-
-## Checklist de Conclusão
-
-- [ ] Framework de teste detectado (Jest/Vitest)
-- [ ] jest-axe instalado
-- [ ] Setup global configurado
-- [ ] Componentes escaneados e filtrados
-- [ ] Assertions axe adicionadas
-- [ ] Testes executados
-- [ ] Violações reportadas com sugestões de fix
-
----
-
-## Output
-
-| Artefato | Destino |
-|----------|---------|
-| Testes modificados com assertions axe | Arquivos `.test.tsx` / `.spec.tsx` existentes |
-| Report de violações | Output no terminal + opcional markdown |
-
----
-
-## Mensagem de Conclusão
-
-```
-── qa-a11y-audit concluído ───────────────────────────────
-  Componentes : {N} testados
-  Violações   : {V} encontradas ({C} critical, {S} serious)
-  Arquivos    : {M} modificados
-  Setup       : jest-axe configurado globalmente
-──────────────────────────────────────────────────────────
-```