create-genia-os 2.0.0 → 2.1.1

package/template/.genia/skills/design/canvas-design.md

@@ -0,0 +1,109 @@
+# Skill: /canvas-design
+
+## Metadata
+- **Nome**: Canvas Design
+- **Comando**: /canvas-design
+- **Agente**: @dev
+- **Categoria**: design
+- **Versao**: 2.0
+
+## Descricao
+Criar arte visual bonita em .png e .pdf usando filosofia de design. Criar designs visuais originais para posters, pecas de arte e designs estaticos.
+
+## Quando Usar
+- Criar posters
+- Criar pecas de arte
+- Criar designs estaticos
+- Criar material visual para apresentacoes
+
+## Processo em Duas Etapas
+
+### 1. Criacao da Filosofia de Design (.md)
+### 2. Expressao no Canvas (.pdf ou .png)
+
+## Filosofia de Design
+
+### Nomear o Movimento (1-2 palavras)
+Exemplos:
+- "Brutalist Joy"
+- "Chromatic Silence"
+- "Metabolist Dreams"
+
+### Articular a Filosofia (4-6 paragrafos)
+Expressar como a filosofia se manifesta atraves de:
+- Espaco e forma
+- Cor e material
+- Escala e ritmo
+- Composicao e equilibrio
+- Hierarquia visual
+
+### Diretrizes Criticas
+- **Evitar redundancia**: Cada aspecto mencionado uma vez
+- **Enfatizar craftsmanship**: O trabalho deve parecer meticulosamente elaborado
+- **Deixar espaco criativo**: Especifico mas conciso
+
+## Exemplos de Filosofia
+
+### "Concrete Poetry"
+Comunicacao atraves de forma monumental e geometria bold. Blocos de cor massivos, tipografia escultural, divisoes espaciais brutalistas. Energia de poster polones encontra Le Corbusier.
+
+### "Chromatic Language"
+Cor como sistema primario de informacao. Precisao geometrica onde zonas de cor criam significado. Tipografia minimal - pequenas labels sans-serif.
+
+### "Analog Meditation"
+Contemplacao visual quieta atraves de textura e espaco respirando. Grao de papel, bleeds de tinta, vasto espaco negativo. Estetica de photobook japones.
+
+### "Geometric Silence"
+Ordem pura e contencao. Precisao baseada em grid, fotografia bold ou graficos stark, espaco negativo dramatico. Formalismo suico encontra honestidade material brutalista.
+
+## Criacao do Canvas
+
+### Principios
+- Trabalho de qualidade de museu ou revista
+- Padroes repetitivos e formas perfeitas
+- Tratamento como um diagrama de disciplina imaginaria
+- Tipografia esparsa e clinica
+- Paleta de cores limitada e intencional
+
+### Texto como Elemento Visual
+- Texto sempre minimal e visual-first
+- Contexto guia a escala
+- Sofisticacao nao-negociavel
+- Usar fontes do diretorio `./canvas-fonts`
+
+### Qualidade
+- Parecer que levou incontaveis horas para criar
+- Alguem no topo absoluto da sua area
+- Cuidado meticuloso em cada detalhe
+- Nada sobrepoe, formatacao impecavel
+
+## Output
+
+- Arquivo .md com a filosofia de design
+- Arquivo .pdf ou .png com o canvas final
+
+## Segunda Passagem (Refinamento)
+
+**CRITICO**: Ao refinar:
+- NAO adicionar mais graficos
+- Refinar o que ja foi criado
+- Tornar extremamente crisp
+- Respeitar filosofia de design
+- Respeitar principios de minimalismo
+
+## Multi-Paginas
+
+Quando solicitado multiplas paginas:
+- Criar paginas criativas na mesma linha da filosofia
+- Cada pagina distintamente diferente
+- Bundlar no mesmo .pdf ou multiplos .pngs
+- Tratar como um livro de mesa de cafe
+- Paginas como twists e memorias do original
+
+## Tasks Relacionadas
+- task:criar-poster
+- task:criar-arte-visual
+- task:design-grafico
+
+## Workflows
+- workflow:criacao-material-visual

package/template/.genia/skills/design/frontend-design.md

@@ -0,0 +1,140 @@
+# Skill: /frontend-design
+
+## Metadata
+- **Nome**: Frontend Design
+- **Comando**: /frontend-design
+- **Agente**: @dev
+- **Categoria**: design
+- **Versao**: 2.0
+
+## Descricao
+Criar interfaces frontend distintivas e production-grade com alta qualidade de design. Gera codigo criativo e polido que evita estetica generica de IA.
+
+## Quando Usar
+- Construir componentes web
+- Criar landing pages
+- Desenvolver dashboards
+- Criar componentes React
+- Estilizar/embelezar qualquer UI web
+
+## Design Thinking
+
+Antes de codar, entender contexto e comprometer-se com direcao estetica BOLD:
+
+### Proposito
+O que este interface resolve? Quem usa?
+
+### Tom (Escolher um extremo)
+- Brutalmente minimal
+- Maximalismo caotico
+- Retro-futurista
+- Organico/natural
+- Luxo/refinado
+- Playful/toy-like
+- Editorial/magazine
+- Brutalista/raw
+- Art deco/geometrico
+- Soft/pastel
+- Industrial/utilitario
+
+### Diferenciacao
+O que torna isso INESQUECIVEL? Qual e a coisa que alguem vai lembrar?
+
+## Diretrizes Esteticas
+
+### Tipografia
+- Escolher fontes BONITAS, UNICAS e INTERESSANTES
+- EVITAR: Arial, Inter, Roboto, system fonts
+- PREFERIR: Fonts distintivos que elevam a estetica
+- Parear display font com body font refinado
+
+### Cor e Tema
+- Comprometer-se com estetica coesa
+- Usar CSS variables para consistencia
+- Cores dominantes com acentos fortes > paletas timidas
+
+### Motion
+- Usar animacoes para efeitos e micro-interacoes
+- Priorizar CSS-only para HTML
+- Usar Motion library para React
+- Focus em momentos de alto impacto: page load com staggered reveals
+
+### Composicao Espacial
+- Layouts inesperados
+- Assimetria
+- Overlap
+- Flow diagonal
+- Elementos que quebram o grid
+- Negative space generoso OU densidade controlada
+
+### Backgrounds e Detalhes Visuais
+- Criar atmosfera e profundidade
+- Gradient meshes
+- Noise textures
+- Geometric patterns
+- Layered transparencies
+- Dramatic shadows
+- Custom cursors
+- Grain overlays
+
+## NUNCA Usar
+
+- Familias de fonte overused (Inter, Roboto, Arial)
+- Esquemas de cor cliche (purple gradients on white)
+- Layouts previsiveis
+- Design cookie-cutter sem carater
+
+## Exemplo de Implementacao
+
+```css
+:root {
+  --bg-dark: #0a0a0b;
+  --accent: #ff6b35;
+  --text: #fafafa;
+  --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+body {
+  background: var(--bg-dark);
+  background-image: url("data:image/svg+xml,..."); /* noise texture */
+  font-family: 'Space Grotesk', sans-serif;
+  color: var(--text);
+}
+
+.hero {
+  display: grid;
+  grid-template-columns: 1fr 1.5fr;
+  gap: 4rem;
+  min-height: 100vh;
+  padding: 6rem;
+}
+
+.card {
+  background: rgba(255,255,255,0.03);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255,255,255,0.1);
+  border-radius: 16px;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
+}
+```
+
+## Principios
+
+1. **Intencionalidade**: Executar a visao com precisao
+2. **Memorabilidade**: Criar algo que pessoas lembrem
+3. **Coesao**: Ponto de vista estetico claro
+4. **Refinamento**: Meticuloso em cada detalhe
+
+## Tasks Relacionadas
+- task:criar-landing-page
+- task:design-dashboard
+- task:estilizar-componente
+
+## Workflows
+- workflow:desenvolvimento-frontend
+- workflow:criar-interface

package/template/.genia/skills/dev/mcp-builder.md

@@ -0,0 +1,172 @@
+# Skill: /mcp-builder
+
+## Metadata
+- **Nome**: MCP Server Builder
+- **Comando**: /mcp-builder
+- **Agente**: @dev
+- **Categoria**: dev
+- **Versao**: 2.0
+
+## Descricao
+Guia para criar servidores MCP (Model Context Protocol) de alta qualidade que permitem LLMs interagirem com servicos externos atraves de tools bem projetadas.
+
+## Quando Usar
+- Construir servidores MCP
+- Integrar APIs externas
+- Criar tools para LLMs
+- Python (FastMCP) ou TypeScript (MCP SDK)
+
+## Stack Recomendada
+
+- **Linguagem**: TypeScript (melhor suporte SDK)
+- **Transport**: Streamable HTTP para servidores remotos, stdio para locais
+
+## Workflow de Alto Nivel
+
+### Fase 1: Pesquisa e Planejamento
+
+#### 1.1 Design MCP Moderno
+- **API Coverage vs Workflow Tools**: Balancear cobertura de endpoints com tools de workflow
+- **Naming**: Prefixos consistentes (`github_create_issue`, `github_list_repos`)
+- **Contexto**: Retornar dados focados e relevantes
+- **Erros**: Mensagens que guiam para solucoes
+
+#### 1.2 Documentacao MCP
+```
+Sitemap: https://modelcontextprotocol.io/sitemap.xml
+Paginas: https://modelcontextprotocol.io/specification/draft.md
+```
+
+#### 1.3 Documentacao SDK
+- **TypeScript**: https://github.com/modelcontextprotocol/typescript-sdk
+- **Python**: https://github.com/modelcontextprotocol/python-sdk
+
+### Fase 2: Implementacao
+
+#### 2.1 Estrutura do Projeto (TypeScript)
+```
+mcp-server/
+├── src/
+│   ├── index.ts        # Entry point
+│   ├── tools/          # Tools definitions
+│   ├── resources/      # Resources
+│   └── utils/          # Helpers
+├── package.json
+└── tsconfig.json
+```
+
+#### 2.2 Infraestrutura Core
+- Cliente API com autenticacao
+- Helpers de error handling
+- Formatacao de resposta (JSON/Markdown)
+- Suporte a paginacao
+
+#### 2.3 Implementar Tools
+
+**Input Schema** (Zod para TypeScript, Pydantic para Python):
+```typescript
+const schema = z.object({
+  query: z.string().describe("Search query"),
+  limit: z.number().optional().default(10)
+});
+```
+
+**Annotations**:
+- `readOnlyHint`: true/false
+- `destructiveHint`: true/false
+- `idempotentHint`: true/false
+
+### Fase 3: Review e Teste
+
+#### 3.1 Qualidade de Codigo
+- Sem codigo duplicado (DRY)
+- Error handling consistente
+- Cobertura de tipos completa
+- Descricoes de tools claras
+
+#### 3.2 Build e Teste
+```bash
+# TypeScript
+npm run build
+npx @modelcontextprotocol/inspector
+
+# Python
+python -m py_compile server.py
+```
+
+### Fase 4: Avaliacoes
+
+Criar 10 perguntas de avaliacao:
+- Independentes
+- Read-only
+- Complexas (multiplas tool calls)
+- Realisticas
+- Verificaveis
+
+**Formato XML**:
+```xml
+<evaluation>
+  <qa_pair>
+    <question>Pergunta complexa aqui?</question>
+    <answer>Resposta verificavel</answer>
+  </qa_pair>
+</evaluation>
+```
+
+## Exemplo TypeScript
+
+```typescript
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { z } from "zod";
+
+const server = new McpServer({
+  name: "my-mcp-server",
+  version: "1.0.0"
+});
+
+server.registerTool({
+  name: "search_items",
+  description: "Search for items by query",
+  inputSchema: z.object({
+    query: z.string(),
+    limit: z.number().optional()
+  }),
+  handler: async ({ query, limit = 10 }) => {
+    const results = await api.search(query, limit);
+    return {
+      content: [{ type: "text", text: JSON.stringify(results) }]
+    };
+  }
+});
+```
+
+## Exemplo Python (FastMCP)
+
+```python
+from fastmcp import FastMCP
+from pydantic import BaseModel
+
+mcp = FastMCP("my-server")
+
+class SearchInput(BaseModel):
+    query: str
+    limit: int = 10
+
+@mcp.tool
+async def search_items(input: SearchInput) -> str:
+    results = await api.search(input.query, input.limit)
+    return json.dumps(results)
+```
+
+## Recursos de Referencia
+- `reference/mcp_best_practices.md` - Guidelines universais
+- `reference/node_mcp_server.md` - Guia TypeScript
+- `reference/python_mcp_server.md` - Guia Python
+- `reference/evaluation.md` - Guia de avaliacoes
+
+## Tasks Relacionadas
+- task:criar-mcp-server
+- task:integrar-api-externa
+
+## Workflows
+- workflow:desenvolvimento-integracao

package/template/.genia/skills/dev/webapp-testing.md

@@ -0,0 +1,150 @@
+# Skill: /webapp-testing
+
+## Metadata
+- **Nome**: Web Application Testing
+- **Comando**: /webapp-testing
+- **Agente**: @qa
+- **Categoria**: dev
+- **Versao**: 2.0
+
+## Descricao
+Toolkit para interagir e testar aplicacoes web locais usando Playwright. Suporta verificacao de funcionalidade frontend, debug de comportamento UI, capturas de tela e logs do browser.
+
+## Quando Usar
+- Testar aplicacoes web locais
+- Verificar funcionalidade frontend
+- Debugar comportamento de UI
+- Capturar screenshots
+- Ver logs do browser
+
+## Scripts Helper
+
+- `scripts/with_server.py` - Gerencia lifecycle do servidor
+
+**Sempre rodar scripts com `--help` primeiro** para ver uso.
+
+## Arvore de Decisao
+
+```
+Tarefa → E HTML estatico?
+├── Sim → Ler arquivo HTML para identificar selectors
+│         ├── Sucesso → Escrever script Playwright
+│         └── Falha → Tratar como dinamico
+│
+└── Nao (webapp dinamico) → Servidor ja rodando?
+    ├── Nao → Rodar: python scripts/with_server.py --help
+    │         Usar helper + script Playwright simplificado
+    │
+    └── Sim → Reconhecimento-depois-acao:
+        1. Navegar e esperar networkidle
+        2. Screenshot ou inspecionar DOM
+        3. Identificar selectors do estado renderizado
+        4. Executar acoes com selectors descobertos
+```
+
+## Usando with_server.py
+
+### Servidor Unico
+```bash
+python scripts/with_server.py --server "npm run dev" --port 5173 -- python automation.py
+```
+
+### Multiplos Servidores (backend + frontend)
+```bash
+python scripts/with_server.py \
+  --server "cd backend && python server.py" --port 3000 \
+  --server "cd frontend && npm run dev" --port 5173 \
+  -- python automation.py
+```
+
+## Script de Automacao
+
+```python
+from playwright.sync_api import sync_playwright
+
+with sync_playwright() as p:
+    browser = p.chromium.launch(headless=True)  # Sempre headless
+    page = browser.new_page()
+    page.goto('http://localhost:5173')
+    page.wait_for_load_state('networkidle')  # CRITICO: Esperar JS executar
+
+    # ... logica de automacao
+
+    browser.close()
+```
+
+## Padrao Reconhecimento-Depois-Acao
+
+### 1. Inspecionar DOM renderizado
+```python
+page.screenshot(path='/tmp/inspect.png', full_page=True)
+content = page.content()
+page.locator('button').all()
+```
+
+### 2. Identificar selectors dos resultados
+
+### 3. Executar acoes com selectors descobertos
+
+## Armadilha Comum
+
+**NAO** inspecionar DOM antes de esperar `networkidle` em apps dinamicos
+
+**SIM** esperar `page.wait_for_load_state('networkidle')` antes de inspecao
+
+## Best Practices
+
+- Usar scripts bundled como caixas pretas
+- Usar `sync_playwright()` para scripts sincronos
+- Sempre fechar browser quando terminar
+- Usar selectors descritivos: `text=`, `role=`, CSS, IDs
+- Adicionar waits apropriados: `wait_for_selector()`, `wait_for_timeout()`
+
+## Exemplos de Selectors
+
+```python
+# Por texto
+page.click('text=Submit')
+
+# Por role
+page.get_by_role('button', name='Submit').click()
+
+# Por CSS
+page.click('.btn-primary')
+page.click('#submit-button')
+
+# Por data-testid
+page.click('[data-testid="submit-btn"]')
+```
+
+## Capturando Logs do Console
+
+```python
+page.on('console', lambda msg: print(f"Console: {msg.text}"))
+page.goto('http://localhost:5173')
+```
+
+## Screenshots
+
+```python
+# Pagina inteira
+page.screenshot(path='screenshot.png', full_page=True)
+
+# Elemento especifico
+page.locator('.card').screenshot(path='card.png')
+```
+
+## Arquivos de Referencia
+
+- `examples/element_discovery.py` - Descobrir botoes, links, inputs
+- `examples/static_html_automation.py` - Usar file:// URLs
+- `examples/console_logging.py` - Capturar logs do console
+
+## Tasks Relacionadas
+- task:testar-frontend
+- task:automacao-e2e
+- task:debug-ui
+
+## Workflows
+- workflow:qa-automatizado
+- workflow:validacao-frontend

package/template/.genia/skills/documents/docx.md

@@ -0,0 +1,153 @@
+# Skill: /docx
+
+## Metadata
+- **Nome**: Word Document Processing
+- **Comando**: /docx
+- **Agente**: @dev
+- **Categoria**: documents
+- **Versao**: 2.0
+
+## Descricao
+Criacao, edicao e analise de documentos Word com suporte a tracked changes, comentarios, formatacao e extracao de texto.
+
+## Quando Usar
+- Criar novos documentos Word
+- Modificar/editar conteudo
+- Trabalhar com tracked changes
+- Adicionar comentarios
+- Extrair texto de documentos
+
+## Arvore de Decisao
+
+### Ler/Analisar
+→ Usar "Extracao de texto" ou "Acesso XML raw"
+
+### Criar Novo Documento
+→ Usar **docx-js** (JavaScript)
+
+### Editar Documento Existente
+- Documento proprio + mudancas simples → "Edicao OOXML basica"
+- Documento de terceiros → **Workflow de Redlining**
+- Docs juridicos/academicos/empresariais → **Workflow de Redlining**
+
+## Extracao de Texto
+```bash
+# Converter para markdown com tracked changes
+pandoc --track-changes=all documento.docx -o output.md
+```
+
+## Acesso XML Raw
+
+### Desempacotar arquivo
+```bash
+python ooxml/scripts/unpack.py <arquivo.docx> <diretorio>
+```
+
+### Estrutura de arquivos
+- `word/document.xml` - Conteudo principal
+- `word/comments.xml` - Comentarios
+- `word/media/` - Imagens e midia
+- Tracked changes: `<w:ins>` (insercoes) e `<w:del>` (delecoes)
+
+## Criar Novo Documento (docx-js)
+
+```javascript
+import { Document, Paragraph, TextRun, Packer } from 'docx';
+
+const doc = new Document({
+  sections: [{
+    properties: {},
+    children: [
+      new Paragraph({
+        children: [
+          new TextRun({ text: "Titulo", bold: true, size: 32 }),
+        ],
+      }),
+      new Paragraph({
+        children: [
+          new TextRun("Conteudo do documento..."),
+        ],
+      }),
+    ],
+  }],
+});
+
+// Exportar
+const buffer = await Packer.toBuffer(doc);
+fs.writeFileSync("documento.docx", buffer);
+```
+
+## Workflow de Redlining
+
+### 1. Obter markdown
+```bash
+pandoc --track-changes=all arquivo.docx -o atual.md
+```
+
+### 2. Identificar mudancas
+- Agrupar em batches de 3-10 mudancas
+- Metodos de localizacao: secao/heading, paragrafos numerados, grep patterns
+
+### 3. Ler documentacao e desempacotar
+```bash
+python ooxml/scripts/unpack.py arquivo.docx diretorio
+```
+
+### 4. Implementar mudancas em batches
+Usar `get_node` para encontrar nos, implementar mudancas, `doc.save()`
+
+### 5. Reempacotar
+```bash
+python ooxml/scripts/pack.py diretorio documento-revisado.docx
+```
+
+### 6. Verificacao final
+```bash
+pandoc --track-changes=all documento-revisado.docx -o verificacao.md
+```
+
+## Principio: Edicoes Minimas e Precisas
+
+### ERRADO - Substitui sentenca inteira
+```xml
+<w:del><w:delText>O prazo e 30 dias.</w:delText></w:del>
+<w:ins><w:t>O prazo e 60 dias.</w:t></w:ins>
+```
+
+### CORRETO - Marca apenas o que mudou
+```xml
+<w:r><w:t>O prazo e </w:t></w:r>
+<w:del><w:delText>30</w:delText></w:del>
+<w:ins><w:t>60</w:t></w:ins>
+<w:r><w:t> dias.</w:t></w:r>
+```
+
+## Converter para Imagens
+```bash
+# DOCX → PDF
+soffice --headless --convert-to pdf documento.docx
+
+# PDF → JPEG
+pdftoppm -jpeg -r 150 documento.pdf pagina
+```
+
+## Dependencias
+```bash
+# Python
+pip install defusedxml
+
+# Node
+npm install docx
+
+# Sistema
+sudo apt-get install pandoc libreoffice poppler-utils
+```
+
+## Tasks Relacionadas
+- task:criar-contrato
+- task:revisar-documento
+- task:gerar-relatorio-word
+
+## Workflows
+- workflow:revisao-documentos
+- workflow:geracao-contratos