flyee 0.1.0

package/core/skills/page-specifications/SKILL.md

@@ -0,0 +1,367 @@
+---
+name: page-specifications
+description: Detalhamento granular de cada página do projeto. Cria PAGE-SPEC-*.md com layout, seções, componentes, estados, responsividade e integração com Design System.
+---
+
+# Page Specifications Skill
+
+> **Objetivo:** Detalhar CADA página do projeto antes do Breakdown.
+> Garante que implementação tenha blueprint completo, não apenas copy genérico.
+
+---
+
+## 🎯 PROPÓSITO
+
+Esta skill resolve a lacuna entre:
+- **Content Strategy** (O QUE dizer) → Copy, tom, mensagens
+- **Breakdown** (O QUE fazer) → Tasks de desenvolvimento
+
+**Adiciona o COMO:** Layout, componentes, estados, responsividade.
+
+---
+
+## 🔗 QUANDO USAR
+
+| Workflow | Fase | Trigger |
+|----------|------|---------|
+| `/new-project` | Phase 2.8 | Após Content Strategy aprovado |
+| `/legacy-project` | Phase 5.8 | Após Content Strategy |
+| `/new-task` | Opcional | Quando adiciona novas páginas |
+
+---
+
+## 📁 ESTRUTURA DE SAÍDA
+
+```
+design-system/{projeto}/
+├── MASTER.md              ← Design System global
+├── layout/
+│   └── SHARED-LAYOUT.md   ← Header, Footer, Mobile Menu
+└── pages/
+    ├── PAGE-SPEC-Landing.md
+    ├── PAGE-SPEC-Pricing.md
+    ├── PAGE-SPEC-Start.md       (Wizard)
+    ├── PAGE-SPEC-Dashboard.md   (Área logada)
+    ├── PAGE-SPEC-Admin.md       (Gestão interna)
+    └── PAGE-SPEC-{Página}.md
+```
+
+---
+
+## 📊 PROCESSO (5 Passos)
+
+### PASSO 1: Identificar Páginas
+
+Listar todas as páginas do projeto baseado em:
+- PRD (requisitos)
+- TDD (fluxos técnicos)
+- Content Strategy (páginas já mapeadas)
+
+**Categorização:**
+
+| Prioridade | Tipo | Exemplos |
+|------------|------|----------|
+| **Alta** | Core do produto | Landing, Pricing, Start/Wizard, Dashboard |
+| **Média** | Suporte ao produto | How it Works, Workflows Library, Videos |
+| **Baixa** | Complementar | Community, Blog, About |
+| **Interna** | Gestão | Admin, Moderação |
+
+---
+
+### PASSO 2: Criar SHARED-LAYOUT.md
+
+> [!IMPORTANT]
+> **OBRIGATÓRIO:** Criar ANTES dos PAGE-SPECs individuais.
+> Define elementos compartilhados para evitar duplicação.
+
+**Template:**
+
+```markdown
+# Shared Layout Specs - Header & Footer
+
+> **Status:** ⏳ Proposal
+> **Aplicação:** Todas as páginas públicas
+> **Exceção:** {páginas com layout próprio, ex: Dashboard}
+
+---
+
+## 1. Standard Header (Navbar)
+
+### Visual Spec
+| Elemento | Especificação |
+|----------|---------------|
+| **Position** | Sticky Top |
+| **Height** | 64px (h-16) |
+| **Background** | Glassmorphism |
+| **Border** | border-b border-border |
+
+### Conteúdo
+| Elemento | Detalhes |
+|----------|----------|
+| **Logo** | Logo + Wordmark, link para `/` |
+| **Nav Links** | Como Funciona, Workflows, Pricing, Community |
+| **CTA** | "Iniciar Projeto" (button primary) |
+| **Auth** | Login (ghost) - se não logado |
+
+### Estados
+- **Scroll State:** Adiciona shadow ao scrollar
+- **Mobile:** Hamburger menu (sheet overlay)
+
+---
+
+## 2. Standard Footer
+
+### Estrutura
+| Coluna | Links |
+|--------|-------|
+| **Produto** | Features, Pricing, Roadmap |
+| **Recursos** | Docs, Videos, Community |
+| **Empresa** | About, Blog, Contact |
+| **Legal** | Terms, Privacy |
+
+### Visual
+| Elemento | Especificação |
+|----------|---------------|
+| **Background** | bg-background |
+| **Border** | border-t border-border |
+| **Social** | Twitter, LinkedIn, GitHub, YouTube |
+
+---
+
+## 3. Mobile Menu Overlay
+
+- **Trigger:** Hamburger icon (Menu)
+- **Style:** Sheet from right
+- **Conteúdo:** Nav links + Auth buttons
+```
+
+---
+
+### PASSO 3: Criar PAGE-SPEC para cada página
+
+> [!CAUTION]
+> **BLOQUEADOR:** Perguntar ao usuário sobre priorização antes de criar todos.
+> Podem existir páginas que serão implementadas em V2.
+
+**Pergunta ao Usuário:**
+
+```markdown
+## 📄 Páginas Identificadas
+
+Baseado no PRD/TDD/Content Strategy, estas são as páginas do projeto:
+
+### Alta Prioridade (MVP)
+- [ ] Landing Page (/)
+- [ ] Pricing (/pricing)
+- [ ] Start/Wizard (/start)
+- [ ] Dashboard (/dashboard)
+
+### Média Prioridade
+- [ ] How it Works (/how-it-works)
+- [ ] Workflows Library (/workflows)
+- [ ] Video Pages (/videos/[slug])
+
+### Baixa Prioridade (V2)
+- [ ] Community (/community)
+- [ ] Blog (/blog)
+
+### Interna
+- [ ] Admin (/admin)
+
+**Quais páginas detalhar agora?**
+- A) Todas
+- B) Apenas Alta Prioridade (MVP)
+- C) Alta + Média
+- D) Definir manualmente (liste quais)
+```
+
+---
+
+### PASSO 4: Gerar PAGE-SPEC para cada página selecionada
+
+**Template de PAGE-SPEC:**
+
+```markdown
+# Page Spec - {Nome da Página} ({rota})
+
+> **Objetivo:** {objetivo da página em 1 linha}
+> **Referências:** MASTER.md, SHARED-LAYOUT.md, CONTENT-STRATEGY
+> **Status:** ⏳ Proposal | **Data:** {data}
+
+---
+
+## 1. Layout & Estrutura
+
+### Header
+> Usar: `SHARED-LAYOUT.md → Standard Header`
+> Exceções: {se houver}
+
+### Spatial Anatomy (OBRIGATÓRIO para Dashboard/Admin)
+
+> [!CAUTION]
+> **FALHA QUE GEROU ESTA SEÇÃO:** Sidebar e TopBar do Dashboard foram implementados
+> como "floating pills" quando a referência mostrava edge-to-edge. Sem esta seção,
+> o agente faz suposições sobre posicionamento e arredondamento.
+
+| Elemento | Ancoragem | Border-radius | Altura | Span |
+|----------|-----------|---------------|--------|------|
+| **Sidebar** | {edge-to-edge left | floating} | {nenhum viewport-side | 16px interno | 32px todos} | {100vh | auto} | {coluna independente | dentro do main} |
+| **TopBar** | {top do conteúdo | top total da viewport} | {nenhum | pill} | {64px fixa} | {só conteúdo | full-width incluindo sidebar} |
+| **Toggle** | {header da sidebar | topbar | inline} | - | - | - |
+| **Content** | {scroll interno | page scroll} | - | {flex-grow} | {restante} |
+
+### Sections
+| # | Seção | Objetivo | Componentes |
+|---|-------|----------|-------------|
+| 1 | Hero | {objetivo} | {componentes principais} |
+| 2 | {Seção} | {objetivo} | {componentes} |
+| 3 | {Seção} | {objetivo} | {componentes} |
+
+### Footer
+> Usar: `SHARED-LAYOUT.md → Standard Footer`
+
+---
+
+## 2. Conteúdo por Seção
+
+### 2.1 {Nome da Seção}
+
+#### Copy
+| Elemento | Conteúdo |
+|----------|----------|
+| **Headline** | {texto} |
+| **Subheadline** | {texto} |
+| **CTA** | {texto do botão} |
+
+#### Visual
+| Elemento | Especificação |
+|----------|---------------|
+| **Background** | {cor/gradient} |
+| **Layout** | {grid, flex, etc} |
+| **Componentes** | {lista de componentes} |
+
+#### Estados
+- **Default:** {descrição}
+- **Loading:** {skeleton/spinner}
+- **Empty:** {mensagem + CTA}
+- **Error:** {mensagem + retry}
+
+---
+
+## 3. Responsividade
+
+| Breakpoint | Adaptação |
+|------------|-----------|
+| **Desktop (≥1024px)** | {layout desktop} |
+| **Tablet (768-1023px)** | {adaptações} |
+| **Mobile (<768px)** | {layout mobile} |
+
+---
+
+## 4. Integrações
+
+| Sistema | Uso nesta página |
+|---------|------------------|
+| **Auth** | {Supabase - estados logado/não logado} |
+| **CMS** | {Sanity - conteúdo dinâmico} |
+| **Analytics** | {PostHog - eventos a rastrear} |
+| **Payments** | {Stripe - se aplicável} |
+
+---
+
+## 5. SEO & Performance
+
+| Aspecto | Especificação |
+|---------|---------------|
+| **Title** | {max 60 chars} |
+| **Meta Description** | {max 155 chars} |
+| **OG Image** | {se aplicável} |
+| **Loading** | {lazy load, suspense} |
+
+---
+
+## 6. Analytics (PostHog)
+
+> **Nota:** Eventos customizados requerem implementação explícita.
+> Pageviews e autocapture são automáticos após SDK init.
+
+### Eventos Customizados
+| Evento | Trigger | Properties |
+|--------|---------|------------|
+| `{page}_viewed` | Pageview (auto) | - |
+| `{page}_cta_clicked` | Clique no CTA principal | `button_text`, `location` |
+| `{ação_específica}` | {quando ocorre} | {dados relevantes} |
+
+### Funis a Medir
+- {Descrever funil se aplicável, ex: Wizard steps}
+
+### Feature Flags (A/B)
+- {Se houver variantes a testar}
+```
+
+---
+
+### PASSO 5: Validar e Aprovar
+
+**Gate de Saída:**
+
+```
+[ ] SHARED-LAYOUT.md criado (Header, Footer, Mobile Menu)
+[ ] Priorização de páginas confirmada com usuário
+[ ] PAGE-SPEC criado para cada página priorizada
+[ ] Cada PAGE-SPEC referencia MASTER.md e CONTENT-STRATEGY
+[ ] Estados (loading, empty, error) documentados onde aplicável
+[ ] Responsividade descrita para cada página
+[ ] **Analytics (PostHog) especificado para cada página**
+[ ] Todas as PAGE-SPECs aprovadas pelo humano
+```
+
+> [!CAUTION]
+> **BLOQUEADOR:** Não prosseguir para Breakdown sem PAGE-SPECs aprovados.
+
+---
+
+## 📋 CHECKLISTS POR TIPO DE PÁGINA
+
+### Landing Page
+- [ ] Hero Section (headline, subheadline, CTAs)
+- [ ] Features/Benefits (cards ou grid)
+- [ ] How it Works (steps)
+- [ ] Social Proof (testimonials, logos, metrics)
+- [ ] Pricing Preview (redirect para /pricing)
+- [ ] FAQ Preview
+- [ ] Final CTA
+
+### Dashboard (Área Logada)
+- [ ] Sidebar Navigation
+- [ ] Top Bar (search, notifications, profile)
+- [ ] Empty States para cada módulo
+- [ ] Cards de resumo (KPIs)
+- [ ] Actions disponíveis
+- [ ] Mobile: Bottom nav ou drawer
+
+### Wizard/Onboarding
+- [ ] Progress indicator
+- [ ] Each step layout
+- [ ] Validação por step
+- [ ] Navegação (back, next, skip)
+- [ ] Final state (success)
+- [ ] Exit points (onde usuário pode sair)
+
+### Admin
+- [ ] Sidebar diferenciada (badge "Admin")
+- [ ] Módulos (Users, Billing, Content, Analytics)
+- [ ] Tables com ações (view, edit, delete)
+- [ ] Filtros e busca
+- [ ] External links (Stripe, PostHog, Sanity)
+
+---
+
+## 🔴 REGRAS CRÍTICAS
+
+1. **SEMPRE** criar SHARED-LAYOUT.md primeiro
+2. **PERGUNTAR** priorização antes de criar todos os specs
+3. **REFERENCIAR** MASTER.md e CONTENT-STRATEGY em cada spec
+4. **DOCUMENTAR** todos os estados (loading, empty, error)
+5. **VALIDAR** com usuário antes de prosseguir
+6. **NÃO** duplicar copy - referenciar CONTENT-STRATEGY

package/core/skills/parallel-agents/SKILL.md

@@ -0,0 +1,175 @@
+---
+name: parallel-agents
+description: Multi-agent orchestration patterns. Use when multiple independent tasks can run with different domain expertise or when comprehensive analysis requires multiple perspectives.
+allowed-tools: Read, Glob, Grep
+---
+
+# Native Parallel Agents
+
+> Orchestration through Antigravity's built-in Agent Tool
+
+## Overview
+
+This skill enables coordinating multiple specialized agents through Antigravity's native agent system. Unlike external scripts, this approach keeps all orchestration within Antigravity's control.
+
+## When to Use Orchestration
+
+✅ **Good for:**
+- Complex tasks requiring multiple expertise domains
+- Code analysis from security, performance, and quality perspectives
+- Comprehensive reviews (architecture + security + testing)
+- Feature implementation needing backend + frontend + database work
+
+❌ **Not for:**
+- Simple, single-domain tasks
+- Quick fixes or small changes
+- Tasks where one agent suffices
+
+---
+
+## Native Agent Invocation
+
+### Single Agent
+```
+Use the security-auditor agent to review authentication
+```
+
+### Sequential Chain
+```
+First, use the explorer-agent to discover project structure.
+Then, use the backend-specialist to review API endpoints.
+Finally, use the test-engineer to identify test gaps.
+```
+
+### With Context Passing
+```
+Use the frontend-specialist to analyze React components.
+Based on those findings, have the test-engineer generate component tests.
+```
+
+### Resume Previous Work
+```
+Resume agent [agentId] and continue with additional requirements.
+```
+
+---
+
+## Orchestration Patterns
+
+### Pattern 1: Comprehensive Analysis
+```
+Agents: explorer-agent → [domain-agents] → synthesis
+
+1. explorer-agent: Map codebase structure
+2. security-auditor: Security posture
+3. backend-specialist: API quality
+4. frontend-specialist: UI/UX patterns
+5. test-engineer: Test coverage
+6. Synthesize all findings
+```
+
+### Pattern 2: Feature Review
+```
+Agents: affected-domain-agents → test-engineer
+
+1. Identify affected domains (backend? frontend? both?)
+2. Invoke relevant domain agents
+3. test-engineer verifies changes
+4. Synthesize recommendations
+```
+
+### Pattern 3: Security Audit
+```
+Agents: security-auditor → penetration-tester → synthesis
+
+1. security-auditor: Configuration and code review
+2. penetration-tester: Active vulnerability testing
+3. Synthesize with prioritized remediation
+```
+
+---
+
+## Available Agents
+
+| Agent | Expertise | Trigger Phrases |
+|-------|-----------|-----------------|
+| `orchestrator` | Coordination | "comprehensive", "multi-perspective" |
+| `security-auditor` | Security | "security", "auth", "vulnerabilities" |
+| `penetration-tester` | Security Testing | "pentest", "red team", "exploit" |
+| `backend-specialist` | Backend | "API", "server", "Node.js", "Express" |
+| `frontend-specialist` | Frontend | "React", "UI", "components", "Next.js" |
+| `test-engineer` | Testing | "tests", "coverage", "TDD" |
+| `devops-engineer` | DevOps | "deploy", "CI/CD", "infrastructure" |
+| `database-architect` | Database | "schema", "Prisma", "migrations" |
+| `mobile-developer` | Mobile | "React Native", "Flutter", "mobile" |
+| `api-designer` | API Design | "REST", "GraphQL", "OpenAPI" |
+| `debugger` | Debugging | "bug", "error", "not working" |
+| `explorer-agent` | Discovery | "explore", "map", "structure" |
+| `documentation-writer` | Documentation | "write docs", "create README", "generate API docs" |
+| `performance-optimizer` | Performance | "slow", "optimize", "profiling" |
+| `project-planner` | Planning | "plan", "roadmap", "milestones" |
+| `seo-specialist` | SEO | "SEO", "meta tags", "search ranking" |
+| `game-developer` | Game Development | "game", "Unity", "Godot", "Phaser" |
+
+---
+
+## Antigravity Built-in Agents
+
+These work alongside custom agents:
+
+| Agent | Model | Purpose |
+|-------|-------|---------|
+| **Explore** | Haiku | Fast read-only codebase search |
+| **Plan** | Sonnet | Research during plan mode |
+| **General-purpose** | Sonnet | Complex multi-step modifications |
+
+Use **Explore** for quick searches, **custom agents** for domain expertise.
+
+---
+
+## Synthesis Protocol
+
+After all agents complete, synthesize:
+
+```markdown
+## Orchestration Synthesis
+
+### Task Summary
+[What was accomplished]
+
+### Agent Contributions
+| Agent | Finding |
+|-------|---------|
+| security-auditor | Found X |
+| backend-specialist | Identified Y |
+
+### Consolidated Recommendations
+1. **Critical**: [Issue from Agent A]
+2. **Important**: [Issue from Agent B]
+3. **Nice-to-have**: [Enhancement from Agent C]
+
+### Action Items
+- [ ] Fix critical security issue
+- [ ] Refactor API endpoint
+- [ ] Add missing tests
+```
+
+---
+
+## Best Practices
+
+1. **Available agents** - 17 specialized agents can be orchestrated
+2. **Logical order** - Discovery → Analysis → Implementation → Testing
+3. **Share context** - Pass relevant findings to subsequent agents
+4. **Single synthesis** - One unified report, not separate outputs
+5. **Verify changes** - Always include test-engineer for code modifications
+
+---
+
+## Key Benefits
+
+- ✅ **Single session** - All agents share context
+- ✅ **AI-controlled** - Claude orchestrates autonomously
+- ✅ **Native integration** - Works with built-in Explore, Plan agents
+- ✅ **Resume support** - Can continue previous agent work
+- ✅ **Context passing** - Findings flow between agents

package/core/skills/performance-profiling/SKILL.md

@@ -0,0 +1,143 @@
+---
+name: performance-profiling
+description: Performance profiling principles. Measurement, analysis, and optimization techniques.
+allowed-tools: Read, Glob, Grep, Bash
+---
+
+# Performance Profiling
+
+> Measure, analyze, optimize - in that order.
+
+## 🔧 Runtime Scripts
+
+**Execute these for automated profiling:**
+
+| Script | Purpose | Usage |
+|--------|---------|-------|
+| `scripts/lighthouse_audit.py` | Lighthouse performance audit | `python scripts/lighthouse_audit.py https://example.com` |
+
+---
+
+## 1. Core Web Vitals
+
+### Targets
+
+| Metric | Good | Poor | Measures |
+|--------|------|------|----------|
+| **LCP** | < 2.5s | > 4.0s | Loading |
+| **INP** | < 200ms | > 500ms | Interactivity |
+| **CLS** | < 0.1 | > 0.25 | Stability |
+
+### When to Measure
+
+| Stage | Tool |
+|-------|------|
+| Development | Local Lighthouse |
+| CI/CD | Lighthouse CI |
+| Production | RUM (Real User Monitoring) |
+
+---
+
+## 2. Profiling Workflow
+
+### The 4-Step Process
+
+```
+1. BASELINE → Measure current state
+2. IDENTIFY → Find the bottleneck
+3. FIX → Make targeted change
+4. VALIDATE → Confirm improvement
+```
+
+### Profiling Tool Selection
+
+| Problem | Tool |
+|---------|------|
+| Page load | Lighthouse |
+| Bundle size | Bundle analyzer |
+| Runtime | DevTools Performance |
+| Memory | DevTools Memory |
+| Network | DevTools Network |
+
+---
+
+## 3. Bundle Analysis
+
+### What to Look For
+
+| Issue | Indicator |
+|-------|-----------|
+| Large dependencies | Top of bundle |
+| Duplicate code | Multiple chunks |
+| Unused code | Low coverage |
+| Missing splits | Single large chunk |
+
+### Optimization Actions
+
+| Finding | Action |
+|---------|--------|
+| Big library | Import specific modules |
+| Duplicate deps | Dedupe, update versions |
+| Route in main | Code split |
+| Unused exports | Tree shake |
+
+---
+
+## 4. Runtime Profiling
+
+### Performance Tab Analysis
+
+| Pattern | Meaning |
+|---------|---------|
+| Long tasks (>50ms) | UI blocking |
+| Many small tasks | Possible batching opportunity |
+| Layout/paint | Rendering bottleneck |
+| Script | JavaScript execution |
+
+### Memory Tab Analysis
+
+| Pattern | Meaning |
+|---------|---------|
+| Growing heap | Possible leak |
+| Large retained | Check references |
+| Detached DOM | Not cleaned up |
+
+---
+
+## 5. Common Bottlenecks
+
+### By Symptom
+
+| Symptom | Likely Cause |
+|---------|--------------|
+| Slow initial load | Large JS, render blocking |
+| Slow interactions | Heavy event handlers |
+| Jank during scroll | Layout thrashing |
+| Growing memory | Leaks, retained refs |
+
+---
+
+## 6. Quick Win Priorities
+
+| Priority | Action | Impact |
+|----------|--------|--------|
+| 1 | Enable compression | High |
+| 2 | Lazy load images | High |
+| 3 | Code split routes | High |
+| 4 | Cache static assets | Medium |
+| 5 | Optimize images | Medium |
+
+---
+
+## 7. Anti-Patterns
+
+| ❌ Don't | ✅ Do |
+|----------|-------|
+| Guess at problems | Profile first |
+| Micro-optimize | Fix biggest issue |
+| Optimize early | Optimize when needed |
+| Ignore real users | Use RUM data |
+
+---
+
+> **Remember:** The fastest code is code that doesn't run. Remove before optimizing.