jarvis-ai-framework 2.1.1 → 3.2.0

package/skills/eng-frontend-design-system/references/3-componentes.md

@@ -1,165 +0,0 @@
-# Criando um Componente e Acessibilidade
-
-> Parte do skill `eng-frontend-design-system`. Leia este arquivo quando a tarefa criar ou alterar um componente (CVA, API pública, acessibilidade, Radix UI).
-
-## Criando um Componente
-
-### Checklist antes de criar
-
-- [ ] Verificar se já existe componente similar (`ls src/components/`)
-- [ ] Verificar se o Radix UI tem primitive para este componente
-- [ ] Confirmar variantes necessárias com design
-- [ ] Definir API de props antes de implementar
-
-### Padrão com CVA (class-variance-authority)
-
-```typescript
-// src/components/Button/Button.tsx
-import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from '../../utils/cn'
-import type { ButtonHTMLAttributes } from 'react'
-
-const buttonVariants = cva(
-  // Base — aplicado a todas as variantes
-  [
-    'inline-flex items-center justify-center gap-2',
-    'rounded font-medium transition-colors',
-    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
-    'disabled:opacity-50 disabled:pointer-events-none',
-  ],
-  {
-    variants: {
-      variant: {
-        primary:     'bg-interactive-primary text-white hover:bg-interactive-primary-hover',
-        secondary:   'border border-gray-300 bg-white text-content-primary hover:bg-gray-50',
-        ghost:       'text-content-primary hover:bg-gray-100',
-        destructive: 'bg-feedback-error text-white hover:bg-red-600',
-        link:        'text-interactive-primary underline-offset-4 hover:underline p-0 h-auto',
-      },
-      size: {
-        sm: 'h-8 px-3 text-sm',
-        md: 'h-10 px-4 text-base',
-        lg: 'h-12 px-6 text-lg',
-        icon: 'h-10 w-10',
-      },
-    },
-    defaultVariants: {
-      variant: 'primary',
-      size: 'md',
-    },
-  }
-)
-
-export interface ButtonProps
-  extends ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  loading?: boolean
-}
-
-export function Button({
-  className,
-  variant,
-  size,
-  loading,
-  disabled,
-  children,
-  ...props
-}: ButtonProps) {
-  return (
-    <button
-      className={cn(buttonVariants({ variant, size }), className)}
-      disabled={disabled || loading}
-      aria-busy={loading}
-      {...props}
-    >
-      {loading && <span className="sr-only">Carregando...</span>}
-      {children}
-    </button>
-  )
-}
-
-// Exportar variantes para uso externo (ex: estender em outro componente)
-export { buttonVariants }
-```
-
-### Utilitário `cn` (obrigatório)
-
-```typescript
-// src/utils/cn.ts
-import { clsx, type ClassValue } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
-```
-
-### Ponto de entrada do componente
-
-```typescript
-// src/components/Button/index.ts
-export { Button, buttonVariants } from './Button'
-export type { ButtonProps } from './Button'
-```
-
-### Regras de API pública
-
-- Props que o consumidor pode precisar sobrescrever: exportar o tipo
-- Nunca expor detalhes de implementação interna nas props
-- `className` sempre aceito para extensibilidade
-- `ref` sempre passado via `forwardRef` em elementos DOM
-
-```typescript
-// Padrão com forwardRef (obrigatório para componentes com elemento DOM)
-import { forwardRef } from 'react'
-
-export const Input = forwardRef<HTMLInputElement, InputProps>(
-  function Input({ className, ...props }, ref) {
-    return (
-      <input
-        ref={ref}
-        className={cn(inputVariants(), className)}
-        {...props}
-      />
-    )
-  }
-)
-Input.displayName = 'Input'
-```
-
----
-
-## Acessibilidade em Componentes
-
-### Componentes compostos com Radix UI
-
-```typescript
-// ✅ Dialog com Radix — acessibilidade built-in
-import * as Dialog from '@radix-ui/react-dialog'
-
-export function Modal({ title, description, trigger, children }: ModalProps) {
-  return (
-    <Dialog.Root>
-      <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>
-      <Dialog.Portal>
-        <Dialog.Overlay className="fixed inset-0 bg-background-overlay" />
-        <Dialog.Content
-          className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 ..."
-          aria-describedby={description ? 'modal-description' : undefined}
-        >
-          <Dialog.Title>{title}</Dialog.Title>
-          {description && (
-            <Dialog.Description id="modal-description">{description}</Dialog.Description>
-          )}
-          {children}
-          <Dialog.Close asChild>
-            <button aria-label="Fechar">✕</button>
-          </Dialog.Close>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  )
-}
-```
-
----

package/skills/eng-frontend-design-system/references/4-storybook.md

@@ -1,85 +0,0 @@
-# Storybook
-
-> Parte do skill `eng-frontend-design-system`. Leia este arquivo quando a tarefa envolver stories ou a configuração do Storybook.
-
-## Storybook
-
-### Configuração base
-
-```typescript
-// .storybook/main.ts
-import type { StorybookConfig } from '@storybook/react-vite'
-
-const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.@(ts|tsx)'],
-  addons: [
-    '@storybook/addon-essentials',
-    '@storybook/addon-a11y',        // auditoria de acessibilidade
-    '@storybook/addon-interactions', // testes interativos
-  ],
-  framework: '@storybook/react-vite',
-}
-export default config
-```
-
-### Story padrão
-
-```typescript
-// src/components/Button/Button.stories.tsx
-import type { Meta, StoryObj } from '@storybook/react'
-import { Button } from './Button'
-
-const meta: Meta<typeof Button> = {
-  title: 'Components/Button',
-  component: Button,
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['primary', 'secondary', 'ghost', 'destructive', 'link'],
-    },
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg', 'icon'],
-    },
-    loading: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-  },
-}
-export default meta
-type Story = StoryObj<typeof Button>
-
-// Story principal — estado padrão
-export const Default: Story = {
-  args: {
-    children: 'Botão',
-    variant: 'primary',
-    size: 'md',
-  },
-}
-
-// Todas as variantes juntas
-export const AllVariants: Story = {
-  render: () => (
-    <div className="flex flex-wrap gap-3">
-      <Button variant="primary">Primary</Button>
-      <Button variant="secondary">Secondary</Button>
-      <Button variant="ghost">Ghost</Button>
-      <Button variant="destructive">Destructive</Button>
-    </div>
-  ),
-}
-
-// Estados especiais
-export const Loading: Story = { args: { children: 'Salvando...', loading: true } }
-export const Disabled: Story = { args: { children: 'Desabilitado', disabled: true } }
-```
-
-### Checklist de story
-- [ ] Autodocs ativo (`tags: ['autodocs']`)
-- [ ] ArgTypes com `control` para cada prop variável
-- [ ] Story para cada estado relevante (loading, disabled, erro)
-- [ ] Story `AllVariants` para overview visual
-- [ ] Addon `a11y` habilitado (verificar violations na aba Accessibility)
-
----

package/skills/eng-frontend-design-system/references/5-auditoria-versionamento.md

@@ -1,76 +0,0 @@
-# Auditoria de Consistência e Versionamento
-
-> Parte do skill `eng-frontend-design-system`. Leia este arquivo quando a tarefa auditar tokens e componentes ou tratar breaking changes e versionamento.
-
-## Auditoria de Consistência
-
-### Detectar tokens hardcodados (proibido)
-
-```bash
-# Cores hardcodadas no código (deve retornar zero resultados)
-grep -r "#[0-9a-fA-F]\{3,6\}\b" src/components/ --include="*.tsx" --include="*.ts"
-grep -r "rgb(\|rgba(\|hsl(" src/components/ --include="*.tsx"
-
-# Valores de espaçamento hardcodados
-grep -r "style={{" src/components/ --include="*.tsx" | grep -v "className"
-
-# Fontes hardcodadas
-grep -r "fontFamily\|fontSize" src/components/ --include="*.tsx" | grep -v "var(--font"
-```
-
-### Verificar componentes sem story
-
-```bash
-# Componentes sem arquivo de story correspondente
-for f in src/components/**/*.tsx; do
-  base="${f%.tsx}"
-  [ ! -f "${base}.stories.tsx" ] && echo "SEM STORY: $f"
-done
-```
-
-### Verificar componentes sem teste
-
-```bash
-for f in src/components/**/*.tsx; do
-  base="${f%.tsx}"
-  [ ! -f "${base}.test.tsx" ] && echo "SEM TESTE: $f"
-done
-```
-
----
-
-## Versionamento e Breaking Changes
-
-### O que é uma breaking change?
-
-```
-Breaking change (bump MAJOR):
-- Remover uma prop
-- Renomear uma prop sem alias de retrocompatibilidade
-- Alterar o tipo de uma prop (ex: string → enum)
-- Remover uma variante existente
-- Alterar comportamento padrão visível
-
-Non-breaking (bump MINOR ou PATCH):
-- Adicionar nova prop opcional
-- Adicionar nova variante
-- Corrigir bug visual
-- Melhorar acessibilidade
-- Atualizar documentação
-```
-
-### Processo para breaking change
-
-```markdown
-1. Criar deprecation notice na versão atual (adicionar `@deprecated` no JSDoc)
-2. Documentar no CHANGELOG.md com seção "Migration Guide"
-3. Dar prazo de 1 sprint para os consumidores migrarem (comunicar no canal do time)
-4. Lançar major version com a mudança
-5. Atualizar todos os remotes que consomem o componente
-```
-
-```typescript
-// Deprecation notice
-/** @deprecated Use `variant="destructive"` em vez de `danger`. Será removido em v2.0. */
-export type LegacyButtonVariant = 'danger'
-```

package/skills/eng-frontend-microfrontend/SKILL.md

@@ -1,164 +0,0 @@
----
-name: eng-frontend-microfrontend
-description: >
-  Especialista em arquitetura micro frontend com Module Federation.
-  Cobre shell/remote apps, contratos de interface, shared dependencies, event bus,
-  monorepo frontend, desenvolvimento local standalone e estratégias de deploy independente.
-  Trigger: Use para criar novo remote, configurar Module Federation, integrar ao shell,
-  definir contrato de interface entre apps, resolver conflitos de shared libs ou planejar
-  migração para arquitetura micro frontend.
-license: AGPL-3.0
-compatibility: Designed for Claude Code (or similar products)
-allowed-tools: Read Write Edit Glob Grep Bash
-metadata:
-  author: jarvis-team
-  version: "1.0"
-  area: frontend
-  stack: microfrontend
-argument-hint: "[novo-remote|shell|contrato|shared-deps|monorepo|debug] [contexto]"
-disable-model-invocation: false
----
-
-# Eng Micro Frontend — Especialista em Arquitetura Distribuída de Frontend
-
-Você é um **especialista em micro frontend com Module Federation** — arquitetura onde múltiplas
-aplicações frontend independentes colaboram para formar um produto coeso.
-
-## Objetivo
-
-Projetar, implementar e manter micro frontends corretos, isolados e evoluíveis — com contratos
-claros entre shell e remotes, shared dependencies controladas e deploys verdadeiramente independentes.
-
-## Conceitos Centrais
-
-```
-Shell (Host)        — orquestra a composição; monta os remotes nas rotas certas
-Remote (MFE)        — feature isolada; expõe componentes/rotas para o shell consumir
-Design System       — pacote compartilhado de componentes e tokens (não é um remote)
-Event Bus           — canal de comunicação desacoplado entre shell e remotes
-Contrato de Interface — tipos TypeScript que definem o que o remote expõe e o que espera do shell
-```
-
-## Entrada
-
-- `$ARGUMENTS` — o que será feito: `novo-remote`, `shell`, `contrato`, `shared-deps`, `monorepo`, `debug`
-
-## Recursos
-
-- **ENV**: `$IDE/ENV.md`
-- **Skill complementar**: `eng-frontend` (componentes), `eng-frontend-design-system` (tokens e componentes compartilhados)
-
----
-
-## Pré-requisito
-
-Verificar `ENV.md` antes de executar. Confirmar bundler em uso:
-
-```bash
-# Vite com @originjs/vite-plugin-federation
-grep -r "vite-plugin-federation\|@module-federation" package.json
-
-# Webpack com ModuleFederationPlugin
-grep -r "ModuleFederationPlugin\|webpack" package.json
-```
-
-> **Nota de stack:** Os exemplos de código neste skill usam **Vite + @originjs/vite-plugin-federation**
-> por ser a configuração mais comum em projetos novos. Se o projeto usa **Webpack**, os conceitos
-> são idênticos — apenas a configuração do `ModuleFederationPlugin` muda.
-> A seção "Criando um Remote" inclui referência para ambos os bundlers onde relevante.
-
----
-
-## Árvore de Decisão
-
-```
-O que será feito?
-├── Criar novo remote              → Seção: Criando um Remote
-├── Configurar o shell             → Seção: Configurando o Shell
-├── Definir contrato de interface  → Seção: Contratos de Interface
-├── Gerenciar shared dependencies  → Seção: Shared Dependencies
-├── Configurar monorepo            → Seção: Monorepo Frontend
-├── Comunicação entre apps         → Seção: Event Bus
-├── Deploy independente            → Seção: Estratégia de Deploy
-└── Debug de problema              → Seção: Troubleshooting
-```
-
----
-
-## Referências (leia só o tema que a tarefa pedir)
-
-Leia **só** o arquivo do tema que a tarefa pedir; o restante fica fora do contexto.
-
-| Tema | Quando ler | Arquivo |
-|------|-----------|---------|
-| Criando um Remote | A tarefa criar um remote novo (estrutura, bootstrap, Vite e modo standalone) | `references/1-criando-remote.md` |
-| Configurando o Shell | A tarefa configurar o shell ou o lazy loading de remotes | `references/2-configurando-shell.md` |
-| Contratos de Interface | A tarefa definir ou alterar contratos entre shell e remotes | `references/3-contratos-interface.md` |
-| Shared Dependencies | A tarefa envolver dependências compartilhadas ou conflito de versão | `references/4-shared-dependencies.md` |
-| Event Bus | A tarefa envolver comunicação entre remotes por eventos | `references/5-event-bus.md` |
-| Monorepo e Estratégia de Deploy | A tarefa envolver a estrutura do monorepo, o deploy independente ou o versionamento de remotes | `references/6-monorepo-deploy.md` |
-| Troubleshooting de Micro Frontend | Houver erro de módulo compartilhado, remote indisponível ou componente que não re-renderiza | `references/7-troubleshooting.md` |
-
-## Checklist de Novo Remote
-
-- [ ] `bootstrap.ts` com import dinâmico
-- [ ] Funciona em modo standalone (`npm run dev`)
-- [ ] `exposed/` contém apenas a API pública
-- [ ] Contrato de interface criado em `mfe-contracts`
-- [ ] Shared dependencies declaradas com `singleton: true` e `requiredVersion`
-- [ ] ErrorBoundary no ponto de montagem do shell
-- [ ] Testes de integração com shell (ao menos smoke test)
-- [ ] URL de deploy configurada via variável de ambiente
-- [ ] Breaking changes documentadas e comunicadas ao time do shell
-
-### Skills invocados durante a execução do skill
-
-| Passo | Skill | Condição |
-|-------|-------|----------|
-| — | Nenhuma — skill autocontida | — |
-
----
-
-## Regras
-
-### Nunca
-- Importar diretamente de outro remote (rompe isolamento e cria acoplamento)
-- Compartilhar estado via módulo — usar event bus ou props via shell
-- Deploy do shell acoplado ao deploy de um remote (derrota o propósito)
-- `eager: true` em shared libs (causa erro de bootstrap)
-- Hardcodar URL do remoteEntry (sempre via variável de ambiente)
-
-### Sempre
-- Cada remote funciona standalone para desenvolvimento local
-- Contratos de interface em TypeScript antes de integrar ao shell
-- `singleton: true` para React, React DOM, React Router e design system
-- ErrorBoundary no shell ao montar cada remote
-- Versionar breaking changes no contrato com semver
-
----
-
-## Output
-
-| Artefato | Descrição |
-|----------|-----------|
-| Configuração Module Federation | `vite.config.ts` ou `webpack.config.ts` do remote e/ou shell |
-| Contrato de interface | Types em `mfe-contracts` |
-| Ponto de montagem | Lazy import + ErrorBoundary no shell |
-| Event bus | Tipos de eventos e usage examples |
-| Pipeline CI | Configuração de build/deploy independente |
-
----
-
-## Mensagem de Conclusão
-
-```
-Micro Frontend configurado!
-
-Remote: {nome}
-Expõe: {lista do exposed}
-Contrato: {arquivo de tipos criado}
-Shared deps: {lista das dependências compartilhadas}
-Standalone: {porta de dev local}
-
-Próximo passo: {integrar ao shell | definir contrato | configurar CI}
-```

package/skills/eng-frontend-microfrontend/references/1-criando-remote.md

@@ -1,109 +0,0 @@
-# Criando um Remote
-
-> Parte do skill `eng-frontend-microfrontend`. Leia este arquivo quando a tarefa criar um remote novo (estrutura, bootstrap, Vite e modo standalone).
-
-## Criando um Remote
-
-### Estrutura de um remote
-
-```
-apps/
-└── {nome-remote}/
-    ├── src/
-    │   ├── bootstrap.ts        ← entry point async (necessário para Module Federation)
-    │   ├── index.ts            ← importa e executa bootstrap
-    │   ├── App.tsx             ← root do remote (para modo standalone)
-    │   ├── routes/             ← rotas do remote
-    │   ├── components/         ← componentes locais do remote
-    │   └── exposed/            ← o que será exposto via Module Federation
-    │       ├── index.ts        ← re-exporta tudo que é público
-    │       └── RemoteApp.tsx   ← componente raiz exposto ao shell
-    ├── vite.config.ts          ← ou webpack.config.ts
-    ├── package.json
-    └── tsconfig.json
-```
-
-### Por que `bootstrap.ts` é obrigatório?
-
-```typescript
-// src/index.ts — entry point síncrono
-import('./bootstrap')  // import() dinâmico é necessário para Module Federation funcionar
-
-// src/bootstrap.ts — inicialização real
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-)
-```
-
-> Sem o `bootstrap.ts`, o eager consumption de shared libs causa erro em runtime.
-
-### Configuração Vite (vite-plugin-federation)
-
-```typescript
-// vite.config.ts do remote
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import federation from '@originjs/vite-plugin-federation'
-
-export default defineConfig({
-  plugins: [
-    react(),
-    federation({
-      name: '{nome-remote}',        // identificador único do remote
-      filename: 'remoteEntry.js',   // arquivo gerado
-      exposes: {
-        './App': './src/exposed/RemoteApp',   // o que o shell pode importar
-        './routes': './src/exposed/routes',   // rotas para shell carregar
-      },
-      shared: {
-        react: { singleton: true, requiredVersion: '^18.0.0' },
-        'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
-        'react-router-dom': { singleton: true },
-        // design system — sempre singleton para evitar instâncias duplicadas
-        '@{org}/design-system': { singleton: true },
-      },
-    }),
-  ],
-  build: {
-    target: 'esnext',
-    minify: false,       // facilita debug; ativar em prod via CI flag
-    cssCodeSplit: false, // evita problemas com CSS em remotes
-  },
-})
-```
-
-### Modo standalone (obrigatório para dev local)
-
-```typescript
-// src/App.tsx — funciona sem shell
-import { BrowserRouter } from 'react-router-dom'
-import { AppRoutes } from './routes'
-
-export default function App() {
-  return (
-    <BrowserRouter>
-      <AppRoutes />
-    </BrowserRouter>
-  )
-}
-```
-
-```json
-// package.json do remote
-{
-  "scripts": {
-    "dev": "vite --port 3001",          // standalone
-    "dev:federated": "vite --port 3001 --mode federated",  // com Module Federation ativo
-    "build": "vite build",
-    "preview": "vite preview --port 3001"
-  }
-}
-```
-
----

package/skills/eng-frontend-microfrontend/references/2-configurando-shell.md

@@ -1,70 +0,0 @@
-# Configurando o Shell
-
-> Parte do skill `eng-frontend-microfrontend`. Leia este arquivo quando a tarefa configurar o shell ou o lazy loading de remotes.
-
-## Configurando o Shell
-
-```typescript
-// vite.config.ts do shell
-import federation from '@originjs/vite-plugin-federation'
-
-export default defineConfig({
-  plugins: [
-    react(),
-    federation({
-      name: 'shell',
-      remotes: {
-        '{nome-remote}': 'http://localhost:3001/assets/remoteEntry.js',
-        // Em produção, usar variável de ambiente:
-        // '{nome-remote}': process.env.VITE_REMOTE_URL_NOME_REMOTE,
-      },
-      shared: {
-        react: { singleton: true },
-        'react-dom': { singleton: true },
-        'react-router-dom': { singleton: true },
-        '@{org}/design-system': { singleton: true },
-      },
-    }),
-  ],
-})
-```
-
-### Lazy loading de remotes no shell
-
-```typescript
-// src/routes/index.tsx — shell monta remotes por rota
-import { lazy, Suspense } from 'react'
-import { Routes, Route } from 'react-router-dom'
-
-// Tipagem do remote (importar do contrato de interface)
-const RemoteApp = lazy(() =>
-  import('{nome-remote}/App').then((m) => ({ default: m.default }))
-)
-
-function ErrorFallback({ error }: { error: Error }) {
-  return (
-    <div role="alert">
-      <p>Falha ao carregar módulo. <button onClick={() => window.location.reload()}>Tentar novamente</button></p>
-    </div>
-  )
-}
-
-export function ShellRoutes() {
-  return (
-    <Routes>
-      <Route
-        path="/{caminho-remote}/*"
-        element={
-          <Suspense fallback={<div>Carregando...</div>}>
-            <ErrorBoundary FallbackComponent={ErrorFallback}>
-              <RemoteApp />
-            </ErrorBoundary>
-          </Suspense>
-        }
-      />
-    </Routes>
-  )
-}
-```
-
----