jarvis-ai-framework 2.1.1 → 3.2.0

package/skills/eng-frontend-microfrontend/references/3-contratos-interface.md

@@ -1,73 +0,0 @@
-# Contratos de Interface
-
-> Parte do skill `eng-frontend-microfrontend`. Leia este arquivo quando a tarefa definir ou alterar contratos entre shell e remotes.
-
-## Contratos de Interface
-
-O contrato é o **acordo formal** entre shell e remote — define o que o remote expõe e o que espera receber.
-
-### Estrutura do pacote de contratos
-
-```
-packages/
-└── mfe-contracts/
-    ├── src/
-    │   ├── remotes/
-    │   │   ├── {nome-remote}.contract.ts    ← contrato do remote
-    │   │   └── index.ts
-    │   ├── shell/
-    │   │   └── shell.context.ts             ← o que o shell injeta nos remotes
-    │   └── index.ts
-    ├── package.json
-    └── tsconfig.json
-```
-
-### Definindo um contrato
-
-```typescript
-// packages/mfe-contracts/src/remotes/{nome-remote}.contract.ts
-
-// O que o remote expõe ao shell
-export interface {NomeRemote}Exports {
-  default: React.ComponentType<{NomeRemote}Props>
-}
-
-// Props que o shell passa ao montar o remote
-export interface {NomeRemote}Props {
-  basePath: string
-  onNavigate?: (path: string) => void
-}
-
-// Eventos que o remote emite no event bus
-export interface {NomeRemote}Events {
-  '{nome-remote}:action-completed': { id: string; result: unknown }
-  '{nome-remote}:error': { code: string; message: string }
-}
-```
-
-### Contexto do shell (injetado em todos os remotes)
-
-```typescript
-// packages/mfe-contracts/src/shell/shell.context.ts
-export interface ShellContext {
-  user: {
-    id: string
-    name: string
-    permissions: string[]
-  }
-  theme: 'light' | 'dark'
-  locale: string
-  onNavigate: (path: string) => void
-}
-
-// Hook disponível em todos os remotes
-export const ShellContextReact = React.createContext<ShellContext | null>(null)
-
-export function useShellContext(): ShellContext {
-  const ctx = React.useContext(ShellContextReact)
-  if (!ctx) throw new Error('useShellContext deve ser usado dentro do ShellProvider')
-  return ctx
-}
-```
-
----

package/skills/eng-frontend-microfrontend/references/4-shared-dependencies.md

@@ -1,48 +0,0 @@
-# Shared Dependencies
-
-> Parte do skill `eng-frontend-microfrontend`. Leia este arquivo quando a tarefa envolver dependências compartilhadas ou conflito de versão.
-
-## Shared Dependencies
-
-### Regras críticas
-
-```
-singleton: true   → apenas uma instância em toda a aplicação (obrigatório para React, React DOM)
-eager: false      → NÃO usar eager para shared libs (causa bootstrap error)
-requiredVersion   → sempre declarar para evitar conflitos silenciosos
-```
-
-### Checklist de shared deps
-
-```typescript
-shared: {
-  // Core React — sempre singleton
-  'react': { singleton: true, requiredVersion: '^18.0.0' },
-  'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
-
-  // Router — singleton para evitar múltiplos contextos de roteamento
-  'react-router-dom': { singleton: true, requiredVersion: '^6.0.0' },
-
-  // Design system — singleton obrigatório (CSS e contexto de tema)
-  '@{org}/design-system': { singleton: true },
-
-  // Estado global — singleton se compartilhado entre remotes
-  'zustand': { singleton: true },
-
-  // NÃO compartilhar: libs utilitárias pequenas (date-fns, lodash)
-  // → melhor cada remote ter sua versão para evitar lock de versão
-}
-```
-
-### Conflito de versão (diagnóstico)
-
-```bash
-# Ver qual versão de react cada remote está carregando
-# No DevTools → Network → filtrar por "remoteEntry.js"
-# Abrir arquivo e buscar por "shared"
-
-# Via CLI — verificar versões no monorepo
-pnpm list react --recursive
-```
-
----

package/skills/eng-frontend-microfrontend/references/5-event-bus.md

@@ -1,59 +0,0 @@
-# Event Bus
-
-> Parte do skill `eng-frontend-microfrontend`. Leia este arquivo quando a tarefa envolver comunicação entre remotes por eventos.
-
-## Event Bus
-
-Remote e shell se comunicam via evento — nunca via import direto.
-
-```typescript
-// packages/mfe-contracts/src/event-bus.ts
-
-type EventHandler<T> = (payload: T) => void
-
-class MFEEventBus {
-  private listeners = new Map<string, Set<EventHandler<unknown>>>()
-
-  emit<T>(event: string, payload: T): void {
-    this.listeners.get(event)?.forEach((handler) => handler(payload as unknown))
-  }
-
-  on<T>(event: string, handler: EventHandler<T>): () => void {
-    if (!this.listeners.has(event)) {
-      this.listeners.set(event, new Set())
-    }
-    this.listeners.get(event)!.add(handler as EventHandler<unknown>)
-
-    // retorna função de cleanup
-    return () => this.listeners.get(event)?.delete(handler as EventHandler<unknown>)
-  }
-}
-
-// Singleton global — compartilhado via shell context
-export const eventBus = new MFEEventBus()
-```
-
-```typescript
-// Uso em um remote
-import { useShellContext } from '@{org}/mfe-contracts'
-
-function CheckoutButton({ orderId }: { orderId: string }) {
-  const { eventBus } = useShellContext()
-
-  return (
-    <button onClick={() => eventBus.emit('checkout:initiated', { orderId })}>
-      Finalizar compra
-    </button>
-  )
-}
-
-// Uso no shell — escutar eventos de remotes
-useEffect(() => {
-  const unsubscribe = eventBus.on('checkout:initiated', ({ orderId }) => {
-    navigate(`/checkout/${orderId}`)
-  })
-  return unsubscribe
-}, [])
-```
-
----

package/skills/eng-frontend-microfrontend/references/6-monorepo-deploy.md

@@ -1,77 +0,0 @@
-# Monorepo e Estratégia de Deploy
-
-> Parte do skill `eng-frontend-microfrontend`. Leia este arquivo quando a tarefa envolver a estrutura do monorepo, o deploy independente ou o versionamento de remotes.
-
-## Monorepo Frontend
-
-### Estrutura recomendada
-
-```
-{repo}/
-├── apps/
-│   ├── shell/              ← host application
-│   ├── {remote-a}/         ← micro frontend A
-│   └── {remote-b}/         ← micro frontend B
-├── packages/
-│   ├── design-system/      ← componentes e tokens compartilhados
-│   ├── mfe-contracts/      ← tipos TypeScript de contratos de interface
-│   └── utils/              ← utilitários compartilhados
-├── pnpm-workspace.yaml
-└── turbo.json
-```
-
-```yaml
-# pnpm-workspace.yaml
-packages:
-  - 'apps/*'
-  - 'packages/*'
-```
-
-```json
-// turbo.json
-{
-  "pipeline": {
-    "build": {
-      "dependsOn": ["^build"],
-      "outputs": ["dist/**"]
-    },
-    "dev": {
-      "cache": false,
-      "persistent": true
-    },
-    "test": {
-      "dependsOn": ["^build"]
-    }
-  }
-}
-```
-
----
-
-## Estratégia de Deploy
-
-### Deploy independente (objetivo central do micro frontend)
-
-```
-Cada remote tem seu próprio pipeline de CI/CD:
-  push → build → test → deploy → atualizar URL no shell (via env var ou config service)
-
-Shell NÃO precisa ser re-deployed quando um remote é atualizado.
-```
-
-### Variáveis de ambiente por remote
-
-```bash
-# .env.production do shell
-VITE_REMOTE_URL_NOME_REMOTE=https://cdn.example.com/nome-remote/remoteEntry.js
-VITE_REMOTE_URL_OUTRO_REMOTE=https://cdn.example.com/outro-remote/remoteEntry.js
-```
-
-### Versionamento de remotes
-
-```
-Sem breaking change na API exposta → patch ou minor → URL permanece a mesma
-Breaking change na API exposta (props, eventos) → major → nova URL + migração no shell
-```
-
----

package/skills/eng-frontend-microfrontend/references/7-troubleshooting.md

@@ -1,45 +0,0 @@
-# Troubleshooting de Micro Frontend
-
-> Parte do skill `eng-frontend-microfrontend`. Leia este arquivo quando houver erro de módulo compartilhado, remote indisponível ou componente que não re-renderiza.
-
-## Troubleshooting
-
-### Erro: "Shared module is not available for eager consumption"
-
-```typescript
-// ❌ Causa: eager: true em shared lib com React
-shared: { react: { singleton: true, eager: true } }  // NÃO FAZER
-
-// ✅ Solução: usar bootstrap.ts com import() dinâmico
-// src/index.ts
-import('./bootstrap')  // async bootstrap resolve o problema
-```
-
-### Erro: "Remote container is not available"
-
-```bash
-# 1. Verificar se o remote está rodando
-curl http://localhost:3001/assets/remoteEntry.js
-
-# 2. Verificar CORS no servidor do remote
-# O remoteEntry.js precisa ser acessível pelo shell
-
-# 3. Verificar se a URL no shell está correta
-grep -r "remoteEntry" vite.config.ts
-```
-
-### Componente do remote não re-renderiza após update de state do shell
-
-```typescript
-// Causa provável: contexto do shell não está sendo re-injetado no remote
-// Solução: passar o contexto via props no ponto de montagem, não via módulo compartilhado
-
-// ❌ Problemático
-import { useShellStore } from 'shell/store'  // import direto entre remote e shell
-
-// ✅ Correto
-// Shell passa estado via props ao montar o remote
-<RemoteApp user={currentUser} onNavigate={navigate} />
-```
-
----

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

@@ -1,392 +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)
-```
-
-### Skills invocados durante a execução do skill
-
-| Passo | Skill | Condição |
-|-------|-------|----------|
-| — | Nenhuma — skill autocontida | — |
-
----
-
-## 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
-```