izanagi-ai 2.0.0

package/skills/frontend/SKILL.md

@@ -0,0 +1,327 @@
+---
+name: frontend
+description: |
+  Skill de frontend para o Portal. Contém todos os design tokens do Tailwind CSS,
+  padrões de design identificados nas páginas existentes, e boas práticas de Next.js + Tailwind.
+  Use esta skill para criar ou editar componentes visuais, garantindo consistência com o design system existente.
+  Antes de criar novas classes ou variáveis, consulte a lista de tokens existentes abaixo.
+---
+
+# Skill Frontend — Portal
+
+## 🎨 Design Tokens Existentes (`tailwind.config.js`)
+
+Antes de criar qualquer estilização, **consulte os tokens abaixo**. Priorize SEMPRE o uso de tokens existentes.
+
+### Cores Customizadas
+
+| Token Tailwind | Valor | Uso |
+|----------------|-------|-----|
+| `brand-blue` | `#1e40af` | Cor primária da marca. Botões, links, headers |
+| `brand-light-blue` | `#3b82f6` | Variante clara do azul. Hovers, destaques |
+| `brand-dark-blue` | `#1e3a8a` | Variante escura. Hover de botões, textos de destaque |
+| `brand-green` | `#059669` | Cor secundária. Badges de sucesso, benefícios |
+| `modal-cancel-bg` | `#f1f5f9` | Background do botão cancelar em modais |
+| `modal-cancel-bg-hover` | `#e2e8f0` | Hover do botão cancelar |
+| `modal-cancel-border` | `#e2e8f0` | Borda do botão cancelar |
+| `modal-cancel-text` | `#4b5563` | Texto do botão cancelar |
+| `modal-divider` | `rgba(0,0,0,0.06)` | Divider sutil dentro de modais |
+
+**Como usar:**
+```tsx
+<button className="bg-brand-blue text-white hover:bg-brand-dark-blue">
+  Enviar
+</button>
+
+<div className="text-brand-blue">Link azul da marca</div>
+```
+
+### Gradientes (Background Image)
+
+| Token | Valor | Uso |
+|-------|-------|-----|
+| `bg-brand-gradient` | `linear-gradient(90deg, #1e40af, #3b82f6)` | Gradiente horizontal da marca |
+| `bg-brand-gradient-2` | `linear-gradient(120deg, #1a3fad 0%, #0f2680 55%, #163ba0 100%)` | Gradiente de ângulo da marca |
+| `bg-modal-card` | `linear-gradient(145deg, #ffffff 0%, #f8faff 100%)` | Background de cards de modal |
+| `bg-modal-header` | `linear-gradient(90deg, #1d4ed8 0%, #2563eb 60%, #3b82f6 100%)` | Header de modal |
+| `bg-modal-btn` | `linear-gradient(90deg, #1d4ed8 0%, #2563eb 100%)` | Botão de modal |
+| `bg-modal-btn-hover` | `linear-gradient(90deg, #1e40af 0%, #1d4ed8 100%)` | Hover do botão de modal |
+
+**Como usar:**
+```tsx
+<div className="bg-brand-gradient text-white">
+  Banner com gradiente
+</div>
+```
+
+### Sombras (Box Shadow)
+
+| Token | Valor | Uso |
+|-------|-------|-----|
+| `shadow-modal-card` | `0 25px 60px rgba(0,0,0,0.25), 0 8px 24px rgba(59,130,246,0.12)` | Sombra elevada para modais |
+| `shadow-modal-img` | `0 4px 16px rgba(0,0,0,0.10)` | Sombra suave para imagens |
+| `shadow-modal-btn` | `0 2px 10px rgba(37,99,235,0.35)` | Sombra de botão azul |
+| `shadow-modal-btn-hover` | `0 4px 16px rgba(37,99,235,0.45)` | Sombra de botão azul em hover |
+
+### Backdrop Blur
+
+| Token | Valor | Uso |
+|-------|-------|-----|
+| `backdrop-blur-modal` | `4px` | Blur de fundo em overlays de modal |
+
+### Animações
+
+| Token | Keyframe | Efeito |
+|-------|----------|--------|
+| `animate-modal-in` | `modalIn 0.22s ease-out` | Entrada suave do modal (translateY + scale) |
+
+### Plugin Ativo
+
+- **`@tailwindcss/typography`** — Classe `.prose` para conteúdo rico (posts, artigos)
+
+---
+
+## 📐 Padrões de Design Identificados
+
+### Layout de Página Pública
+
+Toda page pública segue exatamente esta estrutura:
+
+```tsx
+<main>
+  <Header />
+  <PageHeader title="..." subtitle="..." breadcrumb={[...]} />
+  
+  <section className="py-16 bg-gray-50">
+    <div className="container mx-auto px-4">
+      {/* conteúdo */}
+    </div>
+  </section>
+
+  <Footer />
+</main>
+```
+
+### Cards e Containers
+
+```tsx
+// Card principal
+<div className="bg-white rounded-lg shadow-lg p-8">
+
+// Card compacto
+<div className="bg-white shadow-lg rounded-2xl p-6">
+
+// Container de seção
+<div className="container mx-auto px-4">
+```
+
+### Formulários
+
+```tsx
+// Wrapper do formulário
+<form className="space-y-4">
+  {/* ou space-y-6 para formulários maiores */}
+</form>
+
+// Label padrão
+<label className="block text-sm font-medium text-gray-700 mb-2">
+  Nome <span className="text-red-600">*</span>
+</label>
+
+// Input padrão
+<input className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-blue focus:border-transparent" />
+
+// Select padrão
+<select className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-blue focus:border-transparent">
+
+// Textarea padrão
+<textarea rows={6} className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-blue focus:border-transparent" />
+
+// Erro de validação
+<p className="text-red-500 text-sm mt-1">{errors.campo.message}</p>
+```
+
+### Botões
+
+```tsx
+// Botão primário (azul)
+<button className="w-full bg-brand-blue text-white px-6 py-3 rounded-lg font-semibold hover:bg-brand-dark-blue transition-colors duration-300 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2">
+
+// Botão simples
+<button className="w-full bg-blue-500 text-white font-semibold py-2 rounded-lg hover:bg-blue-600 transition-colors">
+
+// Botão com loading
+{loading ? (
+  <>
+    <Loader className="w-5 h-5 animate-spin" />
+    Enviando...
+  </>
+) : (
+  <>
+    <Send className="w-5 h-5" />
+    Enviar
+  </>
+)}
+```
+
+### Grids Responsivos
+
+```tsx
+// 2 colunas (mobile: 1)
+<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+
+// 3 colunas com sidebar (mobile: 1)
+<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+
+// 2 colunas + sidebar
+<div className="lg:col-span-2"> {/* conteúdo principal */}
+<div> {/* sidebar */}
+```
+
+### Feedbacks
+
+```tsx
+// Sucesso
+<div className="bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-lg mb-6">
+
+// Erro
+<div className="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg mb-6">
+```
+
+### Informações de Contato / Sidebar
+
+```tsx
+<div className="flex items-start gap-3">
+  <Icon className="w-5 h-5 text-brand-blue mt-1 flex-shrink-0" />
+  <div>
+    <p className="font-semibold text-gray-800">Título</p>
+    <p className="text-gray-600 text-sm">Conteúdo</p>
+  </div>
+</div>
+```
+
+### Tipografia
+
+| Uso | Classes |
+|-----|---------|
+| Título de página | `text-2xl font-bold text-gray-800` |
+| Subtítulo | `text-gray-600` |
+| Título de card | `text-xl font-bold text-gray-800` |
+| Título de formulário | `text-xl font-semibold mb-4 text-center` |
+| Label | `block text-sm font-medium text-gray-700` |
+| Texto secundário | `text-gray-600 text-sm` |
+
+---
+
+## 🆕 Adicionando Novos Design Tokens
+
+Quando precisar criar um **novo token**, adicione-o no `tailwind.config.js`:
+
+### Passo a passo:
+
+1. **Verifique** se já existe um token que atende sua necessidade (consulte tabelas acima)
+2. Se não existe, **crie com prefixo semântico** do componente/contexto:
+
+```js
+// tailwind.config.js → theme.extend
+colors: {
+  // Prefixo do contexto + propósito
+  "card-border": "#e5e7eb",
+  "sidebar-bg": "#f8fafc",
+  "alert-success": "#059669",
+}
+```
+
+3. **Nunca** use cores hardcoded inline quando o token existir:
+
+```tsx
+// ✅ BOM
+<div className="bg-brand-blue">
+
+// ❌ RUIM
+<div className="bg-[#1e40af]">
+// ou pior:
+<div style={{ backgroundColor: '#1e40af' }}>
+```
+
+---
+
+## ⚡ Boas Práticas Next.js
+
+### `"use client"` — Quando usar
+- ✅ Componentes com `useState`, `useEffect`, `useRef`
+- ✅ Event handlers (`onClick`, `onChange`, `onSubmit`)
+- ✅ Hooks customizados
+- ❌ **NÃO** usar em pages que são puramente estáticas
+
+### Importações
+- Usar `@/` para imports absolutos (configurado no `tsconfig.json`)
+- Agrupar imports: React → Next.js → libs externas → componentes → utils → types
+
+```tsx
+// 1. React
+import { useState, useEffect } from "react";
+
+// 2. Next.js
+import { useRouter } from "next/navigation";
+
+// 3. Libs externas
+import { z } from "zod";
+import axios from "axios";
+
+// 4. Componentes
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+
+// 5. Utils/Services
+import { formatCPF } from "@/utils/validCPF";
+
+// 6. Types
+import type { Post } from "@/types";
+```
+
+### Imagens
+- Usar `OptimizedImage` (componente do projeto) para lazy loading
+- Imagens estáticas em `public/images/`
+- Imagens dinâmicas via Supabase Storage
+
+---
+
+## ⚡ Boas Práticas Tailwind
+
+### Mobile-first
+- Sempre estilizar para **mobile primeiro**, depois adicionar breakpoints
+- Breakpoints: `sm:` (640px), `md:` (768px), `lg:` (1024px), `xl:` (1280px)
+
+```tsx
+// ✅ Mobile-first
+<div className="px-4 md:px-8 lg:px-16">
+
+// ❌ Desktop-first
+<div className="px-16 sm:px-4">
+```
+
+### Responsividade de Grid
+```tsx
+// Padrão do projeto: 1 col mobile → 2 col tablet → 3 col desktop
+<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+```
+
+### Hover e Transições
+- Sempre incluir `transition-colors` em botões e links
+- Usar `duration-300` para transições suaves
+- Padrão de desabilitado: `disabled:opacity-50 disabled:cursor-not-allowed`
+
+### Organização de Classes
+Ordenar classes Tailwind por:
+1. Layout (display, position, grid, flex)
+2. Sizing (width, height, padding, margin)
+3. Typography (font, text)
+4. Visual (background, border, shadow)
+5. States (hover, focus, disabled)
+6. Animation (transition, animate)
+
+```tsx
+// Exemplo ordenado
+<button className="flex items-center justify-center gap-2 w-full px-6 py-3 text-white font-semibold bg-brand-blue rounded-lg shadow-lg hover:bg-brand-dark-blue focus:ring-2 transition-colors duration-300">
+```

package/skills/frontend-dev/SKILL.md

@@ -0,0 +1,178 @@
+---
+name: frontend-dev
+description: |
+  Agente Dev Frontend Sênior para o Portal. Responsável por toda edição visual,
+  criação de componentes, estilização com Tailwind CSS e implementação de páginas.
+  Atua como um dev React/Next.js/TypeScript sênior com foco em qualidade visual,
+  performance e consistência com o design system existente.
+  Ative este agente para qualquer tarefa de criação, edição ou refatoração de componentes visuais.
+---
+
+# Agente: Dev Frontend Sênior
+
+## 🧑‍💻 Perfil
+
+Você é um **Desenvolvedor Frontend Sênior** com 8+ anos de experiência em React, Next.js e Tailwind CSS. Você trabalha no Portal, um site institucional da Associação Nacional dos Servidores da Previdência.
+
+### Sua Expertise:
+- React 18 com Server Components e Client Components
+- Next.js 14 App Router (pages, layouts, API routes)
+- TypeScript strict (tipagem rigorosa)
+- Tailwind CSS com design tokens customizados
+- Supabase (Auth, Database, Storage)
+- Acessibilidade (WCAG 2.1)
+- Performance e otimização de renders
+
+---
+
+## 📋 Antes de Começar Qualquer Tarefa
+
+### 1. Leia a Skill `frontend`
+Antes de criar ou editar qualquer componente, **leia obrigatoriamente** a skill `frontend` em `.agents/skills/frontend/SKILL.md`. Ela contém:
+- Todos os **design tokens** do `tailwind.config.js`
+- **Padrões de design** identificados nas pages existentes
+- Boas práticas de **Next.js** e **Tailwind**
+
+### 2. Consulte a Arquitetura
+Leia `.agents/ARCHITECTURE.md` para entender onde cada arquivo deve ser colocado.
+
+### 3. Consulte as Regras
+Leia `.agents/AGENTS.md` para seguir as boas práticas de SOLID, DDD e Clean Code.
+
+---
+
+## 🎯 Responsabilidades
+
+### O que você FAZ:
+- ✅ Criar e editar componentes React (`.tsx`)
+- ✅ Estilizar com Tailwind CSS usando os tokens existentes
+- ✅ Criar novas pages seguindo o padrão do projeto
+- ✅ Adicionar novos design tokens no `tailwind.config.js` quando necessário
+- ✅ Implementar formulários com React Hook Form + Zod
+- ✅ Garantir responsividade mobile-first
+- ✅ Refatorar componentes para melhor legibilidade e reutilização
+- ✅ Implementar animações e transições suaves
+
+### O que você NÃO FAZ:
+- ❌ Alterar lógica de backend (API routes, Supabase queries)
+- ❌ Modificar configurações de deploy
+- ❌ Alterar estrutura do banco de dados
+- ❌ Modificar autenticação ou RLS policies
+
+---
+
+## 🔧 Workflow de Edição Visual
+
+### Ao receber uma tarefa de criação/edição:
+
+1. **Identificar o escopo**
+   - É um componente novo ou edição de existente?
+   - Quais páginas são afetadas?
+   - Precisa de novo design token?
+
+2. **Consultar tokens existentes**
+   - Verificar `tailwind.config.js` para cores, gradientes, sombras
+   - Verificar `_variables.scss` para variáveis CSS globais
+   - Verificar `globals.css` para classes utilitárias customizadas
+
+3. **Implementar seguindo os padrões**
+   - Usar a estrutura de página padrão: `Header → PageHeader → content → Footer`
+   - Reutilizar componentes existentes sempre que possível
+   - Manter consistência visual com outras páginas
+
+4. **Se precisar de novo token**
+   - Adicionar no `tailwind.config.js` com prefixo semântico
+   - Documentar na skill `frontend` o novo token
+   - Nunca usar valor hardcoded quando um token resolve
+
+5. **Verificar resultado**
+   - Testar em mobile (375px)
+   - Testar em tablet (768px)
+   - Testar em desktop (1280px)
+   - Verificar loading states e error states
+
+---
+
+## 📦 Template de Novo Componente
+
+```tsx
+"use client";
+
+import { useState } from "react";
+
+interface NomeComponenteProps {
+  /** Descrição da prop obrigatória */
+  title: string;
+  /** Descrição da prop opcional */
+  subtitle?: string;
+  /** Callback de ação */
+  onAction?: () => void;
+  /** Conteúdo filho */
+  children?: React.ReactNode;
+}
+
+export default function NomeComponente({
+  title,
+  subtitle,
+  onAction,
+  children,
+}: NomeComponenteProps) {
+  const [isActive, setIsActive] = useState(false);
+
+  return (
+    <div className="bg-white rounded-lg shadow-lg p-6">
+      <h2 className="text-xl font-bold text-gray-800">{title}</h2>
+      {subtitle && <p className="text-gray-600 mt-1">{subtitle}</p>}
+      <div className="mt-4">{children}</div>
+    </div>
+  );
+}
+```
+
+## 📄 Template de Nova Page
+
+```tsx
+"use client";
+
+import Header from "@/components/Header";
+import PageHeader from "@/components/PageHeader";
+import Footer from "@/components/Footer";
+
+export default function NomeDaPagina() {
+  return (
+    <main>
+      <Header />
+      <PageHeader
+        title="Título da Página"
+        subtitle="Subtítulo descritivo"
+        breadcrumb={[
+          { label: "Home", href: "/" },
+          { label: "Seção", href: "/secao" },
+          { label: "Página Atual" },
+        ]}
+      />
+
+      <section className="py-16 bg-gray-50">
+        <div className="container mx-auto px-4">
+          {/* Conteúdo da página */}
+        </div>
+      </section>
+
+      <Footer />
+    </main>
+  );
+}
+```
+
+---
+
+## ⚠️ Regras Invioláveis
+
+1. **SEMPRE** usar tokens do `tailwind.config.js` antes de criar novos
+2. **NUNCA** usar `style={{}}` inline — sempre Tailwind classes
+3. **NUNCA** usar `any` — tipar todas as props e variáveis
+4. **SEMPRE** mobile-first — base classes para mobile, breakpoints para desktop
+5. **SEMPRE** incluir `transition-colors` em botões e links interativos
+6. **NUNCA** criar componente acima de 200 linhas — extrair sub-componentes
+7. **SEMPRE** usar `@/` para imports (nunca caminhos relativos `../../`)
+8. **SEMPRE** manter a estrutura de page: `Header → PageHeader → content → Footer`

package/skills/graphql/SKILL.md

@@ -0,0 +1,104 @@
+---
+name: graphql
+description: |
+  Skill de GraphQL para o Portal. Contém padrões de schema design, resolver patterns,
+  Apollo Client/Server, caching, subscriptions e boas práticas de performance.
+  Use esta skill para implementar ou revisar APIs GraphQL.
+---
+
+# Skill GraphQL — Portal
+
+## Schema Design
+
+### Princípios
+- **Schema-first**: definir schema.graphql antes de implementar resolvers
+- **Node interface**: todo tipo tem `id: ID!` e implementa `Node`
+- **Connection pattern**: listas usam `Connection` type (Relay spec) para paginação
+- **Input types**: mutations recebem `Input!` types, nunca args soltos
+
+### Naming Conventions
+| Elemento | Padrão | Exemplo |
+|----------|--------|---------|
+| Types | PascalCase | `Associated`, `NewsPost` |
+| Fields | camelCase | `fullName`, `createdAt` |
+| Inputs | PascalCase + `Input` | `CreatePostInput` |
+| Payloads | PascalCase + `Payload` | `CreatePostPayload` |
+| Enums | PascalCase + `Enum` | `PostStatusEnum` |
+| Arguments | camelCase | `first, after, filter` |
+
+---
+
+## Apollo Client (Frontend)
+
+### Setup
+```tsx
+import { ApolloClient, InMemoryCache, createHttpLink } from "@apollo/client";
+
+const client = new ApolloClient({
+  link: createHttpLink({ uri: "/api/graphql" }),
+  cache: new InMemoryCache({
+    typePolicies: {
+      Query: { fields: { posts: { merge: false } } },
+    },
+  }),
+});
+```
+
+### Fragment Colocation
+```tsx
+const POST_FRAGMENT = gql`
+  fragment PostFields on Post {
+    id title excerpt publishedAt
+  }
+`;
+
+// Componente consome apenas o fragment que precisa
+function PostCard({ post }: { post: PostFieldsFragment }) { ... }
+```
+
+---
+
+## Apollo Server (Backend)
+
+### Codegen First (GraphQL Codegen)
+```yaml
+generates:
+  src/types/graphql.ts:
+    plugins:
+      - typescript
+      - typescript-resolvers
+```
+
+### Resolver Pattern
+```tsx
+const resolvers: Resolvers = {
+  Query: {
+    posts: async (_, args, { dataSources }) =>
+      dataSources.posts.findAll(args),
+  },
+  Post: {
+    author: async (parent, _, { dataSources }) =>
+      dataSources.users.findById(parent.authorId),
+  },
+};
+```
+
+---
+
+## Performance
+
+- **DataLoader**: sempre usar para N+1 problem
+- **Persisted Queries**: reduzir overhead de rede
+- **@defer / @stream**: usar para loading progressivo (quando disponível)
+- **Query complexity**: limitar profundidade máxima (3-5 níveis)
+- **Batch queries**: ApolloCache com merge policies
+
+---
+
+## Segurança
+
+- **Depth limiting**: evitar queries recursivas maliciosas
+- **Auth directives**: `@auth(requires: ADMIN)` nos campos protegidos
+- **Rate limiting**: por query complexity, não por request count
+- **Persisted queries only**: em produção, aceitar apenas queries pré-registradas
+- **Validation**: Zod schema nos inputs de mutation (além do GraphQL type system)

package/skills/hallucination-detection.md

@@ -0,0 +1,49 @@
+# Skill: Hallucination Detection
+
+> Version 1.0.0 | Priority: High (Future)
+> Dependencies: Reflection Engine
+> Compatibility: ">=1.0.0"
+
+---
+
+## Identity
+
+Hallucination Detection estimates confidence in statements the agent makes. Flags low-confidence statements and qualifies them. Detects contradictions and unverifiable claims.
+
+---
+
+## Confidence Levels
+
+```yaml
+high (90%+): 
+  - "Laravel is a PHP framework" (established fact)
+  - Code from project context (verifiable)
+
+medium (70-90%): 
+  - "This pattern is commonly used for..." (general knowledge)
+  - Recommendations based on best practices
+
+low (50-70%): 
+  - "This might be the best approach for your case" (opinion)
+  - Estimating effort without full context
+
+flag (< 50%): 
+  - "I'm not certain, but..." (clearly uncertain)
+  - Should ask user for clarification
+```
+
+## Detection Patterns
+
+```
+- Vague or unspecific statements ("someone said", "I think")
+- Conflicting statements within same response
+- Claims without evidence or reasoning
+- Made-up libraries, methods, or versions
+- Incorrect API usage
+```
+
+---
+
+## Changelog
+
+### 1.0.0 — Initial release. Confidence levels, detection patterns.

package/skills/handoff-sessao/SKILL.md

@@ -0,0 +1,32 @@
+---
+name: handoff-sessao
+description: Grava um resumo curto do estado da tarefa em andamento para retomar na próxima sessão sem perder contexto e sem precisar reexplicar tudo de novo. Use quando o usuário disser "vou parar por aqui", "continuo depois", "pausa" ou quando a conversa estiver ficando muito longa e perto do limite de contexto.
+---
+
+# Handoff de sessão
+
+Complementa a skill `memoria-projeto`, mas para o "estado da tarefa em progresso" (não para conhecimento permanente do projeto).
+
+## Quando acionar
+
+- Usuário indica que vai parar/continuar depois.
+- A tarefa está pela metade (ex. feature com 3 de 5 passos feitos).
+- O contexto da conversa está grande e prestes a ser resumido/perdido.
+
+## O que gravar
+
+Escreva (ou atualize) `.agents/memoria/em-andamento.md` com no máximo estes campos, curtos:
+
+```
+## <nome da tarefa> — <data>
+- Objetivo: <1 linha>
+- Feito: <lista curta do que já foi feito>
+- Falta: <lista curta do que falta>
+- Próximo passo concreto: <1 linha — o que fazer assim que retomar>
+```
+
+## Regras
+
+- Sobrescreva a entrada da mesma tarefa em vez de acumular várias entradas desatualizadas — isso é estado atual, não histórico.
+- Quando a tarefa for concluída, apague a entrada dela deste arquivo (o que vale a pena lembrar para sempre já deve ter ido para `decisoes.md` ou `erros-corrigidos.md` via a skill `memoria-projeto`).
+- Ao retomar uma sessão, leia este arquivo primeiro se ele existir — economiza o usuário ter que reexplicar onde parou.