flyee 0.1.0

package/core/workflows/review-page.md

@@ -0,0 +1,304 @@
+---
+description: Revisar UI/UX e conteúdo de páginas existentes
+---
+
+# Review Page Workflow
+
+> **Objetivo:** Auditar página existente em UI/UX e Conteúdo com **validação visual real**, gerando recomendações acionáveis.
+
+---
+
+## Sintaxe
+
+```bash
+/review-page {caminho_da_página}
+# Exemplo: /review-page src/app/page.tsx
+```
+
+**Flags Opcionais:**
+- `--ui-only` - Apenas revisão de UI/UX
+- `--content-only` - Apenas revisão de conteúdo
+- `--quick` - Auditoria rápida sem perguntas (usa padrões)
+- `--no-browser` - Pular validação visual (não recomendado)
+
+---
+
+## ⚠️ REGRA CRÍTICA
+
+> [!CAUTION]
+> **NUNCA** aprovar UI apenas lendo código. 
+> **SEMPRE** capturar screenshots e analisar visualmente no browser.
+> Confiar apenas no código leva a erros de layout, espaçamento e alinhamento.
+
+---
+
+## Processo (5 Fases)
+
+### FASE 1: Análise da Página Atual
+
+1. **Ler arquivo da página** e identificar:
+   - Estrutura de componentes
+   - Seções existentes (Hero, Features, etc.)
+   - Imports de estilos e assets
+
+2. **Verificar Design System:**
+   - Existe `design-system/{projeto}/MASTER.md`?
+   - Se sim: usar como baseline
+   - Se não: extrair identidade visual do código
+
+3. **Verificar Content Strategy:**
+   - Existe `docs/content/CONTENT-STRATEGY-{Projeto}.md`?
+   - Se sim: usar como baseline
+   - Se não: extrair conteúdo atual
+
+---
+
+### FASE 2: Auditoria de UI/UX
+
+> **SKILL:** Seguir `ui-ux-discovery` para análise visual.
+
+**Checklist de Auditoria:**
+
+```markdown
+## 🎨 Auditoria UI/UX - {página}
+
+### Cores
+- [ ] Cores seguem Design System?
+- [ ] Contraste adequado (WCAG AA)?
+- [ ] Consistência entre seções?
+
+### Tipografia
+- [ ] Fontes corretas aplicadas?
+- [ ] Hierarquia visual clara?
+- [ ] Tamanhos responsivos?
+
+### Layout
+- [ ] Espaçamento consistente?
+- [ ] Responsividade funciona?
+- [ ] Seções bem delimitadas?
+
+### Efeitos Visuais
+- [ ] Animações funcionando?
+- [ ] Glassmorphism/shadows aplicados?
+- [ ] Dark mode funciona (se aplicável)?
+
+### Componentes
+- [ ] Usando componentes do Design System?
+- [ ] Sem estilos inline desnecessários?
+- [ ] Acessibilidade (aria-labels, etc.)?
+```
+
+---
+
+### FASE 2.5: VALIDAÇÃO VISUAL NO BROWSER (OBRIGATÓRIA)
+
+> [!CAUTION]
+> **GATE BLOQUEANTE:** Não prosseguir sem executar esta fase.
+> Código pode parecer correto mas renderizar errado.
+
+**1. Abrir Página no Browser:**
+```
+Use: browser_subagent
+Task: "Navegar para {URL} e capturar estado da página"
+```
+
+**2. Capturar Screenshots de CADA Seção:**
+```
+Use: browser_subagent
+Task: "Scrollar página e capturar screenshots de:
+- Hero section (viewport inicial)
+- Features/Cards section
+- Social Proof section
+- Pricing section (se houver)
+- FAQ section (se houver)
+- Footer
+Retornar paths dos screenshots capturados."
+```
+
+**3. Análise Crítica Visual (OBRIGATÓRIO):**
+
+Para CADA screenshot, analisar:
+
+```markdown
+## 🔍 Análise Visual Crítica
+
+### Alinhamento e Espaçamento
+- [ ] Cards em mesma row têm MESMA altura?
+- [ ] Elementos estão centralizados corretamente?
+- [ ] Gap entre elementos é uniforme?
+- [ ] Padding interno dos cards é consistente?
+
+### Grid e Layout
+- [ ] Colunas estão balanceadas?
+- [ ] Não há overflow ou corte de conteúdo?
+- [ ] Breakpoints mobile/tablet funcionam?
+
+### Tipografia
+- [ ] Textos não estão quebrando de forma estranha?
+- [ ] Hierarquia visual está clara?
+- [ ] Line-height adequado?
+
+### Cores e Contraste
+- [ ] CTAs estão visíveis e destacados?
+- [ ] Texto legível sobre backgrounds?
+- [ ] Cores do Design System aplicadas?
+
+### Erros Evidentes
+- [ ] Elementos sobrepostos?
+- [ ] Imagens quebradas?
+- [ ] Ícones faltando ou errados?
+- [ ] Bordas/sombras renderizando corretamente?
+```
+
+**4. Se Encontrar Problemas:**
+```
+⚠️ PARE e documente:
+- Screenshot do problema
+- Descrição exata
+- Localização (seção, linha aproximada)
+- Sugestão de fix
+
+NÃO aprove a página visualmente até corrigir.
+```
+
+**Gate de Saída:**
+```
+[ ] Página aberta no browser
+[ ] Screenshots de TODAS as seções capturados
+[ ] Análise crítica de alinhamento feita
+[ ] Análise de espaçamento feita
+[ ] Problemas visuais documentados (se houver)
+[ ] TODOS os problemas evidentes corrigidos
+```
+
+---
+
+### FASE 3: Auditoria de Conteúdo
+
+> **SKILL:** Seguir `content-strategy` para análise de copy.
+
+**Checklist de Auditoria:**
+
+```markdown
+## 📝 Auditoria Conteúdo - {página}
+
+### Hero Section
+- [ ] Headline clara e impactante?
+- [ ] Subheadline complementa sem repetir?
+- [ ] CTAs têm verbos de ação?
+
+### Features/Benefícios
+- [ ] Títulos focam no BENEFÍCIO (não no recurso)?
+- [ ] Descrições são concisas (max 15 palavras)?
+- [ ] Ícones são relevantes?
+
+### Social Proof
+- [ ] Tem testimonials/logos/métricas?
+- [ ] Dados são verificáveis?
+
+### SEO
+- [ ] Title tag presente e otimizado?
+- [ ] Meta description presente?
+- [ ] Heading hierarchy correta (H1 > H2 > H3)?
+- [ ] Alt text em imagens?
+
+### Tom de Voz
+- [ ] Consistente com CONTENT-STRATEGY?
+- [ ] Adequado ao público-alvo?
+```
+
+---
+
+### FASE 4: Relatório e Recomendações
+
+**Gerar relatório em:**
+`docs/reviews/REVIEW-{página}-{data}.md`
+
+**Estrutura do Relatório:**
+
+```markdown
+# Page Review: {página}
+> **Data:** {YYYY-MM-DD}
+> **Revisor:** Claude Agent
+
+---
+
+## 📊 Resumo Executivo
+
+| Aspecto | Score | Status |
+|---------|-------|--------|
+| UI/UX | X/10 | 🟢/🟡/🔴 |
+| Conteúdo | X/10 | 🟢/🟡/🔴 |
+| SEO | X/10 | 🟢/🟡/🔴 |
+| Acessibilidade | X/10 | 🟢/🟡/🔴 |
+
+**Score Geral:** X/10
+
+---
+
+## 🔴 Issues Críticas (Fix Imediato)
+
+| # | Issue | Local | Recomendação |
+|---|-------|-------|--------------|
+| 1 | | | |
+
+---
+
+## 🟡 Melhorias Sugeridas
+
+| # | Melhoria | Impacto | Esforço |
+|---|----------|---------|---------|
+| 1 | | Alto/Médio/Baixo | Alto/Médio/Baixo |
+
+---
+
+## 🟢 Pontos Positivos
+
+- {o que está bom}
+
+---
+
+## 📋 Próximos Passos
+
+1. [ ] {ação 1}
+2. [ ] {ação 2}
+```
+
+---
+
+## Gate de Saída
+
+```
+[ ] Página analisada
+[ ] Auditoria UI/UX completa
+[ ] Auditoria de Conteúdo completa
+[ ] Relatório gerado em docs/reviews/
+[ ] Issues priorizadas
+[ ] Recomendações acionáveis documentadas
+```
+
+---
+
+## Integração com Outros Workflows
+
+| Após Review | Workflow Sugerido |
+|-------------|-------------------|
+| Muitos issues de UI | `/new-task --visual` |
+| Muitos issues de copy | `/new-task --content` |
+| Redesign completo | `/legacy-project` |
+| Pequenos ajustes | Editar diretamente |
+
+---
+
+## Exemplos de Uso
+
+```bash
+# Review completo da landing page
+/review-page src/app/page.tsx
+
+# Apenas UI/UX do dashboard
+/review-page src/app/dashboard/page.tsx --ui-only
+
+# Review rápido sem perguntas
+/review-page src/app/pricing/page.tsx --quick
+```

package/core/workflows/status.md

@@ -0,0 +1,86 @@
+---
+description: Display agent and project status. Progress tracking and status board.
+---
+
+# /status - Show Status
+
+$ARGUMENTS
+
+---
+
+## Task
+
+Show current project and agent status.
+
+### What It Shows
+
+1. **Project Info**
+   - Project name and path
+   - Tech stack
+   - Current features
+
+2. **Agent Status Board**
+   - Which agents are running
+   - Which tasks are completed
+   - Pending work
+
+3. **File Statistics**
+   - Files created count
+   - Files modified count
+
+4. **Preview Status**
+   - Is server running
+   - URL
+   - Health check
+
+---
+
+## Example Output
+
+```
+=== Project Status ===
+
+📁 Project: my-ecommerce
+📂 Path: C:/projects/my-ecommerce
+🏷️ Type: nextjs-ecommerce
+📊 Status: active
+
+🔧 Tech Stack:
+   Framework: next.js
+   Database: postgresql
+   Auth: clerk
+   Payment: stripe
+
+✅ Features (5):
+   • product-listing
+   • cart
+   • checkout
+   • user-auth
+   • order-history
+
+⏳ Pending (2):
+   • admin-panel
+   • email-notifications
+
+📄 Files: 73 created, 12 modified
+
+=== Agent Status ===
+
+✅ database-architect → Completed
+✅ backend-specialist → Completed
+🔄 frontend-specialist → Dashboard components (60%)
+⏳ test-engineer → Waiting
+
+=== Preview ===
+
+🌐 URL: http://localhost:3000
+💚 Health: OK
+```
+
+---
+
+## Technical
+
+Status uses these scripts:
+- `python .agent/scripts/session_manager.py status`
+- `python .agent/scripts/auto_preview.py status`

package/core/workflows/stitch.md

@@ -0,0 +1,226 @@
+---
+description: Workflow unificado para usar as Stitch Skills (design-md, enhance-prompt, react-components, stitch-loop, remotion, shadcn-ui). Gera UI com IA.
+skills: design-md, enhance-prompt, react-components, stitch-loop, remotion, shadcn-ui, design-system-enforcement
+---
+
+# /stitch - UI Generation Workflow
+
+$ARGUMENTS
+
+**Flags:**
+
+| Flag | Descrição |
+|------|-----------|
+| `--design` | Gerar/analisar `DESIGN.md` com design system semântico |
+| `--prompt` | Melhorar prompt de UI para Stitch |
+| `--components` | Converter screens para componentes React |
+| `--loop` | Modo autônomo: gerar website completo |
+| `--video` | Gerar vídeo walkthrough com Remotion |
+| `--shadcn` | Adicionar componentes shadcn/ui |
+
+---
+
+## 🎯 PROPÓSITO
+
+Workflow para geração de UI usando as **Stitch Skills** do Google Labs.
+Cada flag ativa uma skill específica para o tipo de trabalho desejado.
+
+---
+
+## 🧭 QUICK REFERENCE
+
+| Quero... | Comando |
+|----------|---------|
+| Documentar design system existente | `/stitch --design` |
+| Melhorar um prompt de UI | `/stitch --prompt "descrição vaga"` |
+| Converter screen para React | `/stitch --components` |
+| Gerar site completo | `/stitch --loop "objetivo"` |
+| Criar vídeo de demo | `/stitch --video` |
+| Adicionar componente shadcn | `/stitch --shadcn button` |
+
+---
+
+## 📋 FLUXO POR FLAG
+
+### 🎨 `--design` → Skill: design-md
+
+**Objetivo:** Analisar projeto Stitch e gerar `DESIGN.md` com design system semântico.
+
+**Pré-requisitos:**
+- Projeto Stitch existente OU screens para análise
+
+**Passos:**
+1. Ler skill: `.agent/skills/design-md/SKILL.md`
+2. Analisar screens existentes
+3. Extrair padrões visuais (cores, tipografia, espaçamento)
+4. Gerar `DESIGN.md` no formato otimizado para Stitch
+
+**Output esperado:**
+```
+📄 DESIGN.md criado com:
+- Color palette documentada
+- Typography system
+- Spacing scale
+- Component patterns
+- Stitch generation notes
+```
+
+---
+
+### ✨ `--prompt` → Skill: enhance-prompt
+
+**Objetivo:** Transformar descrições vagas em prompts otimizados para Stitch.
+
+**Pré-requisitos:**
+- Descrição/ideia de UI (pode ser vaga)
+
+**Passos:**
+1. Ler skill: `.agent/skills/new-task-prompt/SKILL.md`
+2. Analisar descrição fornecida
+3. Aplicar enhancers:
+   - Adicionar keywords de UI/UX
+   - Injetar contexto de design system
+   - Estruturar para melhor resultado
+4. Retornar prompt otimizado
+
+**Exemplo:**
+```
+IN:  "página de login simples"
+OUT: "Modern login page with glassmorphic card, centered form with email/password fields, 
+      social OAuth buttons (Google, GitHub), subtle gradient background, 
+      responsive mobile-first design, clear error states..."
+```
+
+---
+
+### ⚛️ `--components` → Skill: react-components
+
+**Objetivo:** Converter screens do Stitch para componentes React modulares.
+
+**Pré-requisitos:**
+- Screen HTML do Stitch
+- Design tokens definidos (ou DESIGN.md)
+
+**Passos:**
+1. Ler skill: `.agent/skills/react-components/SKILL.md`
+2. Executar scripts de validação
+3. Extrair componentes do HTML
+4. Aplicar design tokens consistentes
+5. Validar com AST
+
+**Scripts disponíveis:**
+```bash
+# Validação de componentes
+node .agent/skills/react-components/scripts/validate.js
+```
+
+---
+
+### 🔄 `--loop` → Skill: stitch-loop
+
+**Objetivo:** Gerar website multi-página de forma autônoma.
+
+**Pré-requisitos:**
+- `DESIGN.md` (ou gerar com --design primeiro)
+- `SITE.md` com visão do projeto
+- Acesso ao Stitch MCP Server
+
+**Passos:**
+1. Ler skill: `.agent/skills/stitch-loop/SKILL.md`
+2. Verificar/criar `next-prompt.md` (baton)
+3. Consultar `SITE.md` para roadmap
+4. Gerar página com Stitch
+5. Integrar ao site
+6. Atualizar baton para próxima iteração
+
+**Estrutura esperada:**
+```
+project/
+├── next-prompt.md      # Baton - tarefa atual
+├── stitch.json         # Stitch project ID
+├── DESIGN.md           # Design system
+├── SITE.md             # Visão e roadmap
+├── queue/              # Staging do Stitch
+└── site/public/        # Páginas prontas
+```
+
+---
+
+### 🎬 `--video` → Skill: remotion
+
+**Objetivo:** Gerar vídeo walkthrough profissional do projeto.
+
+**Pré-requisitos:**
+- Screenshots das páginas
+- Remotion instalado
+
+**Passos:**
+1. Ler skill: `.agent/skills/remotion/SKILL.md`
+2. Coletar screenshots
+3. Configurar transições e zoom
+4. Adicionar overlays de texto
+5. Renderizar vídeo
+
+**Scripts disponíveis:**
+```bash
+# Gerar vídeo
+npx remotion render
+```
+
+---
+
+### 🧩 `--shadcn` → Skill: shadcn-ui
+
+**Objetivo:** Integrar componentes shadcn/ui ao projeto.
+
+**Pré-requisitos:**
+- Projeto React/Next.js
+- shadcn/ui inicializado
+
+**Passos:**
+1. Ler skill: `.agent/skills/shadcn-ui/SKILL.md`
+2. Descobrir componente desejado
+3. Instalar via CLI
+4. Customizar conforme design system
+5. Integrar ao código
+
+**Comandos comuns:**
+```bash
+# Instalar componente
+npx shadcn-ui@latest add button
+
+# Ver componentes disponíveis
+npx shadcn-ui@latest add --help
+```
+
+---
+
+## 🔗 COMBINAÇÕES RECOMENDADAS
+
+| Cenário | Comando |
+|---------|---------|
+| Novo projeto do zero | `/stitch --loop "descrição do site"` |
+| Melhorar UI existente | `/stitch --prompt` → `/stitch --design` |
+| Extrair componentes | `/stitch --design` → `/stitch --components` |
+| Criar demo | `/stitch --video` |
+| Adicionar UI library | `/stitch --shadcn [componente]` |
+
+---
+
+## ⚠️ REGRAS IMPORTANTES
+
+1. **Sempre ler a skill antes de usar** - Cada skill tem instruções detalhadas
+2. **DESIGN.md é central** - A maioria das skills depende dele
+3. **Stitch MCP** - Para --loop, precisa do Stitch MCP Server configurado
+4. **Design System primeiro** - Use --design antes de --components
+
+---
+
+## 🆘 TROUBLESHOOTING
+
+| Problema | Solução |
+|----------|---------|
+| Prompt não gera bom resultado | Use `--prompt` para melhorar |
+| Estilos inconsistentes | Gere/atualize `DESIGN.md` com `--design` |
+| Componentes não validam | Verifique design tokens |
+| Loop não continua | Verifique se `next-prompt.md` foi atualizado |