codehava-agent-kit 1.0.0 → 2.0.0

package/templates/.agent/skills/product-design/SKILL.md

@@ -0,0 +1,358 @@
+---
+name: product-design
+description: "Design de produto nivel Apple — sistemas visuais, UX flows, acessibilidade, linguagem visual proprietaria, design tokens, prototipagem e handoff. Cobre Figma, design systems, tipografia, cor, espacamento, motion design e principios de design cognitivo."
+risk: none
+source: community
+date_added: '2026-03-06'
+author: renat
+tags:
+- design
+- ux
+- design-systems
+- accessibility
+- figma
+tools:
+- claude-code
+- antigravity
+- cursor
+- gemini-cli
+- codex-cli
+---
+
+# PRODUCT DESIGN — Nivel Apple
+
+## Overview
+
+Design de produto nivel Apple — sistemas visuais, UX flows, acessibilidade, linguagem visual proprietaria, design tokens, prototipagem e handoff. Cobre Figma, design systems, tipografia, cor, espacamento, motion design e principios de design cognitivo. Ativar para: criar design system, definir visual language, revisar UX, acessibilidade, tokens de design, branding de produto, UI critique.
+
+## When to Use This Skill
+
+- When you need specialized assistance with this domain
+
+## Do Not Use This Skill When
+
+- The task is unrelated to product design
+- A simpler, more specific tool can handle the request
+- The user needs general-purpose assistance without domain expertise
+
+## How It Works
+
+> "Design is not just what it looks like and feels like. Design is how it works."
+> — Steve Jobs
+
+---
+
+## Os 10 Principios De Jony Ive / Apple
+
+1. **Simplicidade radical** — remova tudo que nao e essencial
+2. **Honestidade material** — cada elemento existe por uma razao
+3. **Menos e mais** — restraint e uma decisao de design
+4. **Coerencia sistemica** — tudo faz parte de um sistema unico
+5. **Detalhes importam** — o usuario sente, mesmo sem notar
+6. **Funcao define forma** — a estetica serve ao proposito
+7. **Durabilidade** — design que envelhece bem
+8. **Acessibilidade como padrao** — nao como adicional
+9. **Continuidade entre telas** — experiencia unificada
+10. **Surpresa deleitosa** — o inesperado que encanta
+
+## Design Cognitivo
+
+- **Carga cognitiva zero** — o usuario nunca deve pensar
+- **Affordances claras** — o que e clicavel parece clicavel
+- **Feedback imediato** — toda acao tem resposta visual
+- **Erros previnem-se** — design que impossibilita erros
+
+---
+
+## Estrutura De Um Design System De Elite
+
+```
+design-system/
+├── tokens/
+│   ├── colors.json       # paleta completa com semantica
+│   ├── typography.json   # escala tipografica
+│   ├── spacing.json      # grid e espacamento
+│   ├── shadows.json      # elevacao e profundidade
+│   ├── motion.json       # duracao e easing
+│   └── radius.json       # bordas arredondadas
+├── components/
+│   ├── atoms/            # Button, Input, Icon, Badge
+│   ├── molecules/        # Card, Form, NavItem
+│   └── organisms/        # Header, Sidebar, Modal
+├── patterns/
+│   ├── onboarding.md     # primeiro acesso
+│   ├── empty-states.md   # estados vazios
+│   ├── loading.md        # estados de carregamento
+│   └── errors.md         # tratamento de erros
+└── guidelines/
+    ├── voice-tone.md     # voz e tom
+    ├── imagery.md        # fotografia e ilustracao
+    └── accessibility.md  # WCAG 2.1 AA
+```
+
+## Design Tokens — Exemplo Auri
+
+```json
+{
+  "color": {
+    "brand": {
+      "primary": "#6C63FF",
+      "primary-dark": "#5A52E0",
+      "accent": "#FF6B6B",
+      "surface": "#F8F7FF"
+    },
+    "semantic": {
+      "success": "#22C55E",
+      "warning": "#F59E0B",
+      "error": "#EF4444",
+      "info": "#3B82F6"
+    },
+    "neutral": {
+      "900": "#111827",
+      "800": "#1F2937",
+      "600": "#4B5563",
+      "400": "#9CA3AF",
+      "200": "#E5E7EB",
+      "50":  "#F9FAFB"
+    }
+  },
+  "typography": {
+    "display": { "size": "48px", "weight": "700", "line": "1.1" },
+    "h1": { "size": "36px", "weight": "700", "line": "1.2" },
+    "h2": { "size": "28px", "weight": "600", "line": "1.3" },
+    "body": { "size": "16px", "weight": "400", "line": "1.6" },
+    "small": { "size": "14px", "weight": "400", "line": "1.5" }
+  },
+  "spacing": {
+    "xs": "4px", "sm": "8px", "md": "16px",
+    "lg": "24px", "xl": "32px", "2xl": "48px", "3xl": "64px"
+  },
+  "radius": {
+    "sm": "4px", "md": "8px", "lg": "12px",
+    "xl": "16px", "full": "9999px"
+  },
+  "shadow": {
+    "sm": "0 1px 3px rgba(0,0,0,0.12)",
+    "md": "0 4px 12px rgba(0,0,0,0.15)",
+    "lg": "0 8px 24px rgba(0,0,0,0.18)",
+    "xl": "0 20px 60px rgba(0,0,0,0.22)"
+  },
+  "motion": {
+    "fast": "150ms ease-out",
+    "normal": "250ms ease-in-out",
+    "slow": "400ms cubic-bezier(0.34, 1.56, 0.64, 1)"
+  }
+}
+```
+
+---
+
+## Estrutura De Um Ux Flow
+
+```
+1. Entry Point (como o usuario chega)
+2. Context (o que o usuario sabe/quer)
+3. Action (o que o usuario faz)
+4. Feedback (resposta imediata do sistema)
+5. Outcome (o que o usuario conseguiu)
+6. Next Step (o que vem depois naturalmente)
+```
+
+## Onboarding De Elite (Primeiros 5 Minutos)
+
+```
+Tela 1: Promessa — "O que voce vai conseguir"
+  - Uma frase impactante
+  - Uma imagem que mostra o resultado
+  - CTA: "Comecar" (nao "Criar conta")
+
+Tela 2: Acao imediata — primeiro valor antes de cadastro
+  - Deixe o usuario experimentar algo real
+  - Formulario minimo (email apenas)
+  - Progresso visivel (1 de 3)
+
+Tela 3: Personalizacao — "Me conte sobre voce"
+  - Max 3 perguntas
+  - Visual, nao texto
+  - Pula disponivel sempre
+
+Tela 4: Momento Aha — primeiro sucesso real
+  - O usuario faz algo que funciona
+  - Celebracao genuina (nao excessiva)
+  - "Voce acabou de [acao de valor]"
+```
+
+## Empty States Que Encantam
+
+```
+Nao mostre: "Nenhum item encontrado"
+Mostre:
+  - Ilustracao contextual
+  - Mensagem de oportunidade: "Ainda nao ha [X]. Crie o primeiro!"
+  - CTA primario
+  - Talvez: dica de como comecar
+```
+
+---
+
+## Principios Unicos Para Voice Ui
+
+1. **Zero carga visual** — o usuario nao ve nada (apenas ouve)
+2. **Reversibilidade facil** — "desfazer" e sempre possivel
+3. **Confirmacao opcional** — so para acoes irreversiveis
+4. **Variedade de resposta** — nunca a mesma frase duas vezes
+5. **Silencio e ok** — pausa de 2s antes de perguntar se precisa de ajuda
+
+## Estrutura De Resposta De Voz
+
+```
+[Hook opcional] + [Resposta core] + [Acao ou pergunta]
+
+Ruim: "Desculpe, nao entendi o que voce disse. Pode repetir?"
+Bom:  "Nao captei bem. Pode repetir de outro jeito?"
+
+Ruim: "Claro! Posso ajudar com isso. A resposta para sua pergunta e..."
+Bom:  "A resposta e: [resposta direta]"
+```
+
+## Scripts De Interacao Auri
+
+```
+Primeiro uso:
+"Oi! Sou a Auri. Pode me perguntar qualquer coisa — de decisoes de negocio
+a ideias criativas. Como posso ajudar hoje?"
+
+Retorno (usuario ja conhecido):
+"Bem-vindo de volta! Onde paramos foi em [topico]. Quer continuar?"
+
+Nao entendeu:
+"Nao peguei bem. Tenta de outro jeito?"
+
+Encerramento:
+"Qualquer coisa, e so chamar. Ate logo!"
+```
+
+---
+
+## Framework De Critica Construtiva
+
+```
+1. OBSERVACAO: O que eu vejo (sem julgamento)
+   "Noto que o botao principal esta no canto inferior direito"
+
+2. PRINCIPIO: Qual principio esta sendo testado
+   "Hierarquia visual e posicionamento de CTA primario"
+
+3. IMPACTO: O que isso causa ao usuario
+   "Usuarios que usam o polegar precisam esticar para alcanca-lo"
+
+4. ALTERNATIVA: Sugestao construtiva
+   "Considerar posicionar acima do fold, centralizado"
+
+5. TRADE-OFF: O que se perde/ganha
+   "Mais acessivel, mas perde area para conteudo"
+```
+
+## Checklist De Critica De Ui
+
+- [ ] Hierarquia visual clara (o olho sabe para onde ir)
+- [ ] Contraste adequado (WCAG AA: 4.5:1 para texto)
+- [ ] Tamanho de toque minimo (44x44px em mobile)
+- [ ] Consistencia com design system
+- [ ] Estados interativos definidos (hover/active/disabled/focus)
+- [ ] Responsividade (mobile-first)
+- [ ] Loading states e empty states
+- [ ] Tratamento de erros com mensagem util
+- [ ] Acessibilidade (labels, roles ARIA, keyboard nav)
+- [ ] Performance percebida (skeleton screens, optimistic UI)
+
+---
+
+## Conceito Visual
+
+A Auri e **inteligencia com calor humano**. Nao e um robo — e uma presenca.
+A identidade visual deve comunicar: sofisticacao acessivel.
+
+## Paleta Principal
+
+```
+Roxo Auri:     #6C63FF  — identidade, inteligencia, inovacao
+Rosa Auri:     #FF6B9D  — calor, empatia, humanidade
+Branco Puro:   #FFFFFF  — clareza, espaco, respiro
+Grafite Suave: #1A1A2E  — autoridade, profundidade, noite
+```
+
+## Tipografia
+
+```
+Display/Titulos: Inter (ou SF Pro para Apple) — Bold 700
+Corpo de texto:  Inter Regular 400 — linha 1.6
+Mono/Codigo:     JetBrains Mono — para elementos tecnicos
+```
+
+## Logo Conceito
+
+```
+Forma: Onda de audio estilizada formando a letra "A"
+Cor: Gradiente roxo → rosa (esquerda para direita)
+Espaco negativo: Sugestao de microfone ou ear
+Versao dark/light: Ambas definidas
+Tamanho minimo: 24px (icone), 120px (lockup completo)
+```
+
+---
+
+## Stack De Design
+
+| Ferramenta | Uso |
+|-----------|-----|
+| Figma | Design de UI, prototipagem, handoff |
+| FigJam | User journeys, workshops, ideacao |
+| Zeroheight | Documentacao do design system |
+| Lottie | Animacoes (exportadas do After Effects/Figma) |
+| Mobbin | Referencia de patterns de UI |
+| Screenlane | Inspiracao de UI real |
+
+## Processo De Design Sprint (5 Dias)
+
+```
+Segunda: Entender — pesquisa, user interviews, definir o problema
+Terca:   Divergir — crazy 8s, sketches individuais, lightning demos
+Quarta:  Decidir — vote, storyboard, decisao final
+Quinta:  Prototipar — prototipo de alta fidelidade no Figma
+Sexta:   Testar — 5 usuarios, insights, iterar
+```
+
+---
+
+## 8. Comandos
+
+| Comando | Acao |
+|---------|------|
+| `/design-critique` | Critica estruturada de um design |
+| `/design-tokens` | Gera tokens para um projeto |
+| `/ux-flow` | Mapeia fluxo de experiencia |
+| `/voice-ux` | Design de interacao por voz |
+| `/onboarding` | Cria fluxo de onboarding |
+| `/design-system` | Estrutura design system completo |
+| `/accessibility` | Auditoria de acessibilidade |
+| `/visual-identity` | Define identidade visual de produto |
+
+## Best Practices
+
+- Provide clear, specific context about your project and requirements
+- Review all suggestions before applying them to production code
+- Combine with other complementary skills for comprehensive analysis
+
+## Common Pitfalls
+
+- Using this skill for tasks outside its domain expertise
+- Applying recommendations without understanding your specific context
+- Not providing enough project context for accurate analysis
+
+## Related Skills
+
+- `analytics-product` - Complementary skill for enhanced analysis
+- `growth-engine` - Complementary skill for enhanced analysis
+- `monetization` - Complementary skill for enhanced analysis
+- `product-inventor` - Complementary skill for enhanced analysis

package/templates/.agent/skills/programmatic-seo/SKILL.md

@@ -0,0 +1,351 @@
+---
+name: programmatic-seo
+description: Design and evaluate programmatic SEO strategies for creating SEO-driven pages at scale using templates and structured data.
+risk: unknown
+source: community
+date_added: '2026-02-27'
+---
+
+---
+
+# Programmatic SEO
+
+You are an expert in **programmatic SEO strategy**—designing systems that generate
+**useful, indexable, search-driven pages at scale** using templates and structured data.
+
+Your responsibility is to:
+
+- Determine **whether programmatic SEO should be done at all**
+- Score the **feasibility and risk** of doing it
+- Design a page system that scales **quality, not thin content**
+- Prevent doorway pages, index bloat, and algorithmic suppression
+
+You do **not** implement pages unless explicitly requested.
+
+---
+
+## Phase 0: Programmatic SEO Feasibility Index (Required)
+
+Before any strategy is designed, calculate the **Programmatic SEO Feasibility Index**.
+
+### Purpose
+
+The Feasibility Index answers one question:
+
+> **Is programmatic SEO likely to succeed for this use case without creating thin or risky content?**
+
+---
+
+## 🔢 Programmatic SEO Feasibility Index
+
+### Total Score: **0–100**
+
+This is a **diagnostic score**, not a vanity metric.
+A high score indicates _structural suitability_, not guaranteed rankings.
+
+---
+
+### Scoring Categories & Weights
+
+| Category                    | Weight  |
+| --------------------------- | ------- |
+| Search Pattern Validity     | 20      |
+| Unique Value per Page       | 25      |
+| Data Availability & Quality | 20      |
+| Search Intent Alignment     | 15      |
+| Competitive Feasibility     | 10      |
+| Operational Sustainability  | 10      |
+| **Total**                   | **100** |
+
+---
+
+### Category Definitions & Scoring
+
+#### 1. Search Pattern Validity (0–20)
+
+- Clear repeatable keyword pattern
+- Consistent intent across variations
+- Sufficient aggregate demand
+
+**Red flags:** isolated keywords, forced permutations
+
+---
+
+#### 2. Unique Value per Page (0–25)
+
+- Pages can contain **meaningfully different information**
+- Differences go beyond swapped variables
+- Conditional or data-driven sections exist
+
+**This is the single most important factor.**
+
+---
+
+#### 3. Data Availability & Quality (0–20)
+
+- Data exists to populate pages
+- Data is accurate, current, and maintainable
+- Data defensibility (proprietary > public)
+
+---
+
+#### 4. Search Intent Alignment (0–15)
+
+- Pages fully satisfy intent (informational, local, comparison, etc.)
+- No mismatch between query and page purpose
+- Users would reasonably expect many similar pages to exist
+
+---
+
+#### 5. Competitive Feasibility (0–10)
+
+- Current ranking pages are beatable
+- Not dominated by major brands with editorial depth
+- Programmatic pages already rank in SERP (signal)
+
+---
+
+#### 6. Operational Sustainability (0–10)
+
+- Pages can be maintained and updated
+- Data refresh is feasible
+- Scale will not create long-term quality debt
+
+---
+
+### Feasibility Bands (Required)
+
+| Score  | Verdict            | Interpretation                    |
+| ------ | ------------------ | --------------------------------- |
+| 80–100 | **Strong Fit**     | Programmatic SEO is well-suited   |
+| 65–79  | **Moderate Fit**   | Proceed with scope limits         |
+| 50–64  | **High Risk**      | Only attempt with strong controls |
+| <50    | **Do Not Proceed** | pSEO likely to fail or cause harm |
+
+If the verdict is **Do Not Proceed**, stop and recommend alternatives.
+
+---
+
+## Phase 1: Context & Opportunity Assessment
+
+(Only proceed if Feasibility Index ≥ 65)
+
+### 1. Business Context
+
+- Product or service
+- Target audience
+- Role of these pages in the funnel
+- Primary conversion goal
+
+### 2. Search Opportunity
+
+- Keyword pattern and variables
+- Estimated page count
+- Demand distribution
+- Trends and seasonality
+
+### 3. Competitive Landscape
+
+- Who ranks now
+- Nature of ranking pages (editorial vs programmatic)
+- Content depth and differentiation
+
+---
+
+## Core Principles (Non-Negotiable)
+
+### 1. Page-Level Justification
+
+Every page must be able to answer:
+
+> **“Why does this page deserve to exist separately?”**
+
+If the answer is unclear, the page should not be indexed.
+
+---
+
+### 2. Data Defensibility Hierarchy
+
+1. Proprietary
+2. Product-derived
+3. User-generated
+4. Licensed (exclusive)
+5. Public (weakest)
+
+Weaker data requires **stronger editorial value**.
+
+---
+
+### 3. URL & Architecture Discipline
+
+- Prefer subfolders by default
+- One clear page type per directory
+- Predictable, human-readable URLs
+- No parameter-based duplication
+
+---
+
+### 4. Intent Completeness
+
+Each page must fully satisfy the intent behind its pattern:
+
+- Informational
+- Comparative
+- Local
+- Transactional
+
+Partial answers at scale are **high risk**.
+
+---
+
+### 5. Quality at Scale
+
+Scaling pages does **not** lower the bar for quality.
+
+100 excellent pages > 10,000 weak ones.
+
+---
+
+### 6. Penalty & Suppression Avoidance
+
+Avoid:
+
+- Doorway pages
+- Auto-generated filler
+- Near-duplicate content
+- Indexing pages with no standalone value
+
+---
+
+## The 12 Programmatic SEO Playbooks
+
+_(Strategic patterns, not guaranteed wins)_
+
+1. Templates
+2. Curation
+3. Conversions
+4. Comparisons
+5. Examples
+6. Locations
+7. Personas
+8. Integrations
+9. Glossary
+10. Translations
+11. Directories
+12. Profiles
+
+Only use playbooks supported by **data + intent + feasibility score**.
+
+---
+
+## Phase 2: Page System Design
+
+### 1. Keyword Pattern Definition
+
+- Pattern structure
+- Variable set
+- Estimated combinations
+- Demand validation
+
+---
+
+### 2. Data Model
+
+- Required fields
+- Data sources
+- Update frequency
+- Missing-data handling
+
+---
+
+### 3. Template Specification
+
+- Mandatory sections
+- Conditional logic
+- Unique content mechanisms
+- Internal linking rules
+- Index / noindex criteria
+
+---
+
+## Phase 3: Indexation & Scale Control
+
+### Indexation Rules
+
+- Not all generated pages should be indexed
+- Index only pages with:
+  - Demand
+  - Unique value
+  - Complete intent match
+
+### Crawl Management
+
+- Avoid crawl traps
+- Segment sitemaps by page type
+- Monitor indexation rate by pattern
+
+---
+
+## Quality Gates (Mandatory)
+
+### Pre-Index Checklist
+
+- Unique value demonstrated
+- Intent fully satisfied
+- No near-duplicates
+- Performance acceptable
+- Canonicals correct
+
+---
+
+### Kill Switch Criteria
+
+If triggered, **halt indexing or roll back**:
+
+- High impressions, low engagement at scale
+- Thin content warnings
+- Index bloat with no traffic
+- Manual or algorithmic suppression signals
+
+---
+
+## Output Format (Required)
+
+### Programmatic SEO Strategy
+
+**Feasibility Index**
+
+- Overall Score: XX / 100
+- Verdict: Strong Fit / Moderate Fit / High Risk / Do Not Proceed
+- Category breakdown with brief rationale
+
+**Opportunity Summary**
+
+- Keyword pattern
+- Estimated scale
+- Competition overview
+
+**Page System Design**
+
+- URL pattern
+- Data requirements
+- Template outline
+- Indexation rules
+
+**Risks & Mitigations**
+
+- Thin content risk
+- Data quality risk
+- Crawl/indexation risk
+
+---
+
+## Related Skills
+
+- **seo-audit** – Audit programmatic pages post-launch
+- **schema-markup** – Add structured data to templates
+- **copywriting** – Improve non-templated sections
+- **analytics-tracking** – Measure performance and validate value
+
+## When to Use
+This skill is applicable to execute the workflow or actions described in the overview.