sinapse-ai 1.0.0

package/squad-design/templates/token-taxonomy-template.md

@@ -0,0 +1,236 @@
+# Token Taxonomy Template
+
+## Instrucoes
+Template para documentar a taxonomia completa de design tokens em 3 camadas. Preencher durante a fase de Design System Architecture.
+
+---
+
+## 1. Visao Geral
+
+| Campo | Valor |
+|-------|-------|
+| Projeto | |
+| Formato | W3C DTCG Spec 2025.10 (JSON) |
+| Export targets | [CSS Custom Properties / Tailwind / SCSS / JSON] |
+| Ferramenta | [Style Dictionary / Theo / Custom] |
+| Dark mode | [Sim/Nao] |
+| Multi-brand | [Sim/Nao — quantas marcas?] |
+
+## 2. Naming Convention
+
+```
+[categoria].[subcategoria].[propriedade].[modificador].[estado]
+```
+
+**Exemplos:**
+- `color.blue.500` (primitive)
+- `color.action.primary` (semantic)
+- `button.background.default` (component)
+
+### Regras
+- Sempre lowercase
+- Ponto como separador
+- Sem abreviacoes (background, nao bg)
+- Estado sempre no final (default, hover, active, disabled)
+
+## 3. Tier 1 — Primitive Tokens
+
+### 3.1 Colors
+| Token | Value | Description |
+|-------|-------|-------------|
+| color.blue.50 | | Lightest blue |
+| color.blue.100 | | |
+| color.blue.200 | | |
+| color.blue.300 | | |
+| color.blue.400 | | |
+| color.blue.500 | | Base blue |
+| color.blue.600 | | |
+| color.blue.700 | | |
+| color.blue.800 | | |
+| color.blue.900 | | |
+| color.blue.950 | | Darkest blue |
+<!-- Repetir para: gray, red, green, yellow, orange, purple, pink, teal -->
+
+### 3.2 Typography
+| Token | Value |
+|-------|-------|
+| font.family.sans | |
+| font.family.mono | |
+| font.family.serif | |
+| font.size.xs | |
+| font.size.sm | |
+| font.size.base | |
+| font.size.lg | |
+| font.size.xl | |
+| font.size.2xl | |
+| font.size.3xl | |
+| font.size.4xl | |
+| font.weight.regular | 400 |
+| font.weight.medium | 500 |
+| font.weight.semibold | 600 |
+| font.weight.bold | 700 |
+| font.lineheight.tight | |
+| font.lineheight.normal | |
+| font.lineheight.relaxed | |
+
+### 3.3 Spacing
+| Token | Value |
+|-------|-------|
+| spacing.0 | 0px |
+| spacing.1 | 4px |
+| spacing.2 | 8px |
+| spacing.3 | 12px |
+| spacing.4 | 16px |
+| spacing.5 | 20px |
+| spacing.6 | 24px |
+| spacing.8 | 32px |
+| spacing.10 | 40px |
+| spacing.12 | 48px |
+| spacing.16 | 64px |
+| spacing.20 | 80px |
+| spacing.24 | 96px |
+
+### 3.4 Border Radius
+| Token | Value |
+|-------|-------|
+| radius.none | 0 |
+| radius.sm | |
+| radius.md | |
+| radius.lg | |
+| radius.xl | |
+| radius.full | 9999px |
+
+### 3.5 Elevation / Shadow
+| Token | Value |
+|-------|-------|
+| shadow.none | none |
+| shadow.sm | |
+| shadow.md | |
+| shadow.lg | |
+| shadow.xl | |
+
+### 3.6 Motion
+| Token | Value |
+|-------|-------|
+| duration.micro | 100ms |
+| duration.small | 200ms |
+| duration.medium | 300ms |
+| duration.large | 500ms |
+| easing.default | cubic-bezier(0.4, 0, 0.2, 1) |
+| easing.in | cubic-bezier(0.4, 0, 1, 1) |
+| easing.out | cubic-bezier(0, 0, 0.2, 1) |
+| easing.spring | — |
+
+## 4. Tier 2 — Semantic Tokens
+
+### 4.1 Action
+| Token | References | Light | Dark |
+|-------|-----------|-------|------|
+| color.action.primary.default | color.blue.600 | | |
+| color.action.primary.hover | color.blue.700 | | |
+| color.action.primary.active | color.blue.800 | | |
+| color.action.secondary.default | | | |
+| color.action.destructive.default | color.red.600 | | |
+
+### 4.2 Feedback
+| Token | References |
+|-------|-----------|
+| color.feedback.success | color.green.600 |
+| color.feedback.warning | color.yellow.500 |
+| color.feedback.error | color.red.600 |
+| color.feedback.info | color.blue.500 |
+
+### 4.3 Surface
+| Token | Light | Dark |
+|-------|-------|------|
+| color.surface.background | | |
+| color.surface.default | | |
+| color.surface.elevated | | |
+| color.surface.overlay | | |
+
+### 4.4 Text
+| Token | Light | Dark |
+|-------|-------|------|
+| color.text.primary | | |
+| color.text.secondary | | |
+| color.text.disabled | | |
+| color.text.inverse | | |
+| color.text.link | | |
+
+### 4.5 Border
+| Token | Light | Dark |
+|-------|-------|------|
+| color.border.default | | |
+| color.border.strong | | |
+| color.border.subtle | | |
+| color.border.focus | | |
+
+### 4.6 Semantic Typography
+| Token | Size | Weight | Line-height |
+|-------|------|--------|-------------|
+| typography.heading.1 | | | |
+| typography.heading.2 | | | |
+| typography.heading.3 | | | |
+| typography.heading.4 | | | |
+| typography.body.large | | | |
+| typography.body.default | | | |
+| typography.body.small | | | |
+| typography.caption | | | |
+| typography.overline | | | |
+
+## 5. Tier 3 — Component Tokens (exemplo: Button)
+
+| Token | Default | Hover | Active | Focus | Disabled |
+|-------|---------|-------|--------|-------|----------|
+| button.primary.background | action.primary.default | action.primary.hover | action.primary.active | — | surface.default |
+| button.primary.text | text.inverse | text.inverse | text.inverse | — | text.disabled |
+| button.primary.border | transparent | transparent | transparent | border.focus | border.default |
+| button.padding.sm | spacing.2 spacing.3 | | | | |
+| button.padding.md | spacing.2 spacing.4 | | | | |
+| button.padding.lg | spacing.3 spacing.6 | | | | |
+
+## 6. Dark Mode Mapping
+
+### Estrategia: Semantic Token Redirection
+```
+Light Mode:
+  color.surface.background → color.white (primitive)
+  color.text.primary → color.gray.900 (primitive)
+
+Dark Mode:
+  color.surface.background → color.gray.900 (primitive)
+  color.text.primary → color.gray.50 (primitive)
+```
+
+**Regra:** NUNCA duplicar tokens. Redirecionar semantics para primitives diferentes.
+
+## 7. Export Configuration
+
+### CSS Custom Properties
+```css
+:root {
+  --color-action-primary-default: #0066CC;
+  --spacing-4: 16px;
+}
+[data-theme="dark"] {
+  --color-surface-background: #1A1A1A;
+}
+```
+
+### Tailwind Extension
+```js
+theme: {
+  extend: {
+    colors: {
+      action: { primary: 'var(--color-action-primary-default)' }
+    }
+  }
+}
+```
+
+## 8. Governance
+
+- Novos tokens: via RFC (proposta → review → aprovacao)
+- Renaming: BREAKING CHANGE — requer major version
+- Deprecation: marcar deprecated, manter por 2 minor versions
+- Audit: trimestral (tokens nao usados, inconsistencias)

package/squad-design/templates/ux-research-plan-template.md

@@ -0,0 +1,116 @@
+# UX Research Plan Template
+
+## Instrucoes
+Preencher ANTES de iniciar qualquer pesquisa UX. Define escopo, metodo, participantes e criterios de sucesso.
+
+---
+
+## 1. Visao Geral
+
+| Campo | Valor |
+|-------|-------|
+| Projeto | |
+| Pesquisador | Compass (dx-ux-strategist) |
+| Tipo | [Generativo / Avaliativo / Exploratorio] |
+| Data | |
+| Duracao estimada | |
+
+## 2. Contexto e Motivacao
+<!-- Por que estamos fazendo esta pesquisa? O que nao sabemos? -->
+
+## 3. Perguntas de Pesquisa*
+
+### Pergunta principal
+<!-- A pergunta central que esta pesquisa deve responder -->
+
+### Perguntas secundarias
+1.
+2.
+3.
+
+## 4. Metodo Selecionado*
+
+| Metodo | Justificativa |
+|--------|--------------|
+| [Entrevistas / Usability Test / Card Sort / Survey / A/B Test / Analytics / Diary Study] | |
+
+### Detalhes do metodo
+- **Formato:** [Remoto / Presencial / Hibrido]
+- **Moderacao:** [Moderado / Nao-moderado]
+- **Duracao por sessao:** minutos
+- **Numero de sessoes:**
+
+## 5. Participantes*
+
+### Perfil
+- **Caracteristicas:**
+- **Criterios de inclusao:**
+- **Criterios de exclusao:**
+
+### Recrutamento
+- **Numero:** participantes
+- **Fonte:** [Base de clientes / Recrutamento externo / Interno]
+- **Incentivo:** [Sim/Nao — valor]
+
+## 6. Protocolo / Roteiro
+
+### Intro (5 min)
+<!-- Boas-vindas, consentimento, contexto -->
+
+### Warm-up (5 min)
+<!-- Perguntas de contexto -->
+
+### Tarefas / Perguntas principais (30-40 min)
+
+**Tarefa/Pergunta 1:**
+- Cenario:
+- O que observar:
+
+**Tarefa/Pergunta 2:**
+- Cenario:
+- O que observar:
+
+**Tarefa/Pergunta 3:**
+- Cenario:
+- O que observar:
+
+### Wrap-up (5 min)
+<!-- Perguntas finais, agradecimento -->
+
+## 7. Metricas de Sucesso
+
+| Metrica | Como Medir | Target |
+|---------|-----------|--------|
+| Task completion rate | % completou a tarefa | >= 80% |
+| Time on task | Tempo medio | < X min |
+| Error rate | Erros por tarefa | < X |
+| Satisfaction (SUS/CSAT) | Questionario pos-teste | >= 68 SUS |
+| | | |
+
+## 8. Materiais Necessarios
+
+- [ ] Prototipo / produto para teste
+- [ ] Roteiro de pesquisa
+- [ ] Formulario de consentimento
+- [ ] Ferramenta de gravacao
+- [ ] Template de notas
+- [ ] Questionario pos-teste
+
+## 9. Timeline
+
+| Etapa | Data | Status |
+|-------|------|--------|
+| Planejamento | | [ ] |
+| Recrutamento | | [ ] |
+| Piloto (1 sessao teste) | | [ ] |
+| Execucao | | [ ] |
+| Sintese | | [ ] |
+| Report | | [ ] |
+
+## 10. Riscos e Mitigacao
+
+| Risco | Mitigacao |
+|-------|----------|
+| Participantes nao comparecem | Recrutar 20% a mais |
+| Prototipo com bugs | Testar antes, ter plano B |
+| Bias do pesquisador | Roteiro padrao, segundo observador |

package/squad-design/workflows/a11y-compliance-cycle.yaml

@@ -0,0 +1,104 @@
+name: a11y-compliance-cycle
+description: >
+  Ciclo de compliance de acessibilidade — audit automatizado + manual,
+  remediacao e certificacao WCAG 2.2 Level AA.
+trigger: Audit de acessibilidade solicitado (compliance legal, qualidade ou iniciativa)
+owner: dx-orchestrator (Nexus)
+
+phases:
+  - name: "Phase 1: Automated Audit"
+    agent: dx-accessibility-specialist (Beacon)
+    tasks:
+      - conduct-wcag-audit
+      - verify-color-contrast
+    input:
+      - URL(s) de producao/staging
+      - Escopo (paginas, componentes, features)
+    output:
+      - axe-core scan report
+      - Lighthouse a11y score
+      - Issues categorizados por severidade (Critical/Major/Minor)
+      - Cobertura automatizada vs manual
+    gate:
+      name: Automated Scan Complete
+      criteria: Todas as paginas escaneadas, issues categorizados
+      verdict: [SCAN_COMPLETE]
+
+  - name: "Phase 2: Manual Audit"
+    agent: dx-accessibility-specialist (Beacon)
+    depends_on: Phase 1
+    tasks:
+      - test-keyboard-navigation
+      - review-aria-patterns
+      - create-screen-reader-specs
+      - design-focus-management
+      - design-accessible-form-patterns
+    input:
+      - Automated scan report (de Phase 1)
+      - Gaps que requerem teste manual
+    output:
+      - Keyboard navigation test results
+      - Screen reader test results (NVDA + VoiceOver)
+      - ARIA implementation review
+      - Focus management assessment
+      - Form accessibility assessment
+      - Full audit report (automated + manual combined)
+    gate:
+      name: Full Audit Complete
+      criteria: 87 criterios WCAG avaliados, manual testing concluido
+      verdict: [AUDIT_COMPLETE]
+
+  - name: "Phase 3: Remediation"
+    agent: dx-frontend-engineer (Scaffold)
+    guided_by: dx-accessibility-specialist (Beacon)
+    depends_on: Phase 2
+    tasks:
+      - implement-component-library
+      - implement-form-system
+    supporting_tasks_from_beacon:
+      - create-a11y-remediation-plan
+      - implement-reduced-motion
+    input:
+      - Full audit report com prescricoes (de Phase 2)
+      - Remediation plan priorizado
+    output:
+      - Componentes corrigidos
+      - ARIA patterns implementados
+      - Keyboard navigation corrigida
+      - Focus management implementado
+      - Reduced-motion suportado
+    gate:
+      name: Remediation Complete
+      criteria: Todos issues Critical e Major corrigidos
+      verdict: [REMEDIATED, PARTIAL]
+
+  - name: "Phase 4: Certification"
+    agent: dx-accessibility-specialist (Beacon)
+    depends_on: Phase 3
+    tasks:
+      - conduct-wcag-audit
+      - certify-accessibility-compliance
+    input:
+      - Produto remediado
+    output:
+      - Re-audit results (automated + manual)
+      - WCAG 2.2 AA compliance statement
+      - Residual issues register
+      - Ongoing monitoring recommendations
+    gate:
+      name: Certification Gate
+      criteria: WCAG 2.2 AA compliance verificada
+      verdict: [PASS, CONDITIONAL, FAIL]
+      blocking: true
+      on_fail: Retorna para Phase 3 com issues restantes
+
+completion:
+  deliverables:
+    - WCAG 2.2 AA compliance statement
+    - Full audit report (before/after)
+    - Residual issues register (com timeline de correcao)
+    - Accessibility monitoring setup
+  legal_compliance:
+    - "EU EAA (European Accessibility Act) — obrigatorio desde junho 2025"
+    - "ADA (Americans with Disabilities Act) — compliance recomendado"
+    - "LGPD/CDC — acessibilidade como direito do consumidor"

package/squad-design/workflows/design-system-build-cycle.yaml

@@ -0,0 +1,150 @@
+name: design-system-build-cycle
+description: >
+  Ciclo de construcao de design system — da fundacao de tokens ate componentes
+  documentados, acessiveis e performaticos em Storybook.
+trigger: Cliente precisa de design system ou component library nova
+owner: dx-orchestrator (Nexus)
+
+phases:
+  - name: "Phase 1: Token Foundation"
+    agent: dx-design-system-architect (Stratum)
+    tasks:
+      - define-token-taxonomy
+      - create-primitive-tokens
+      - create-semantic-tokens
+      - create-component-tokens
+      - design-spacing-scale
+      - design-typography-scale
+      - create-color-system
+      - map-dark-mode-tokens
+    input:
+      - Brand tokens (de squad-brand)
+      - UI audit de produto existente (se redesign)
+    output:
+      - Token taxonomy document (3-tier)
+      - Token files exportados (JSON/CSS/SCSS)
+      - Color system completo
+      - Typography scale
+      - Spacing scale
+    gate:
+      name: Token Foundation Review
+      criteria: Tokens completos, naming consistente, dark mode mapeado
+      verdict: [APPROVED, NEEDS_REVISION]
+
+  - name: "Phase 2: Component Inventory & API Design"
+    agents:
+      - dx-design-system-architect (Stratum)
+      - dx-ui-designer (Canvas)
+    depends_on: Phase 1
+    execution: collaborative
+    tasks:
+      stratum:
+        - design-component-api-contracts
+        - define-atomic-hierarchy
+        - create-component-governance
+      canvas:
+        - design-component-visual-states
+        - design-icon-system
+        - design-form-patterns
+    input:
+      - Token files (de Phase 1)
+      - Inventario de UI existente
+    output:
+      - Component API contracts
+      - Atomic Design hierarchy
+      - Component visual specs (todos os estados)
+      - Icon system
+    gate:
+      name: Component API Review
+      criteria: APIs sem ambiguidade, hierarchy definida, visual specs completos
+      verdict: [APPROVED, NEEDS_REVISION]
+
+  - name: "Phase 3: Component Implementation"
+    agent: dx-frontend-engineer (Scaffold)
+    depends_on: Phase 2
+    tasks:
+      - implement-component-library
+      - setup-storybook-integration
+      - implement-form-system
+      - setup-testing-infrastructure
+    input:
+      - Component API contracts (de Phase 2)
+      - Token files (de Phase 1)
+      - Visual specs (de Phase 2)
+    output:
+      - Componentes implementados em React/framework
+      - Storybook stories por componente
+      - Testes unitarios + integracao
+    gate:
+      name: Implementation Review
+      criteria: Todos componentes construidos, stories completos, testes passando
+      verdict: [COMPLETE, NEEDS_WORK]
+
+  - name: "Phase 4: Accessibility Certification"
+    agent: dx-accessibility-specialist (Beacon)
+    depends_on: Phase 3
+    tasks:
+      - conduct-wcag-audit
+      - review-aria-patterns
+      - test-keyboard-navigation
+      - verify-color-contrast
+      - design-accessible-form-patterns
+    input:
+      - Componentes em Storybook
+    output:
+      - ARIA patterns documentados por componente
+      - Keyboard interaction specs
+      - A11y story variants
+      - Audit report
+    gate:
+      name: Accessibility Gate
+      criteria: WCAG 2.2 AA pass por componente
+      verdict: [PASS, CONDITIONAL, FAIL]
+      blocking: true
+
+  - name: "Phase 5: Performance Baseline"
+    agent: dx-performance-engineer (Apex)
+    depends_on: Phase 4
+    tasks:
+      - analyze-javascript-bundles
+      - define-performance-budgets
+    input:
+      - Component library bundle
+    output:
+      - Bundle size report
+      - Tree-shaking verification
+      - Performance budget definido
+    gate:
+      name: Performance Baseline
+      criteria: Bundle sizes dentro do budget, tree-shaking funcional
+      verdict: [CERTIFIED, EXCEEDS_BUDGET]
+
+  - name: "Phase 6: Documentation & Delivery"
+    agent: dx-design-system-architect (Stratum)
+    depends_on: Phase 5
+    tasks:
+      - create-storybook-documentation-standards
+      - configure-token-export-pipeline
+      - audit-design-system-health
+    input:
+      - Componentes aprovados (Phases 3-5)
+    output:
+      - Storybook documentation completa
+      - Token export pipeline funcional
+      - Design system health report
+      - Usage guidelines
+    gate:
+      name: Design System Delivery
+      criteria: Documentacao completa, pipeline funcional, health score > 85%
+      verdict: [DELIVERED, NEEDS_POLISH]
+
+completion:
+  deliverables:
+    - Design system completo em Storybook
+    - Token files exportados (CSS/JSON/Tailwind)
+    - Component library (npm package)
+    - Documentation site
+    - Governance model documentado
+  handoff_to:
+    - "squad-product para integracao"
+    - "squad-brand como feedback de tokens"

package/squad-design/workflows/landing-page-sprint.yaml

@@ -0,0 +1,101 @@
+name: landing-page-sprint
+description: >
+  Sprint acelerado para landing pages e paginas de campanha — 3 fases comprimidas
+  para entrega rapida sem sacrificar qualidade.
+trigger: Landing page, pagina de campanha ou pagina de conversao unica
+owner: dx-orchestrator (Nexus)
+
+phases:
+  - name: "Phase 1: UX & Visual Design"
+    agents:
+      - dx-ux-strategist (Compass)
+      - dx-ui-designer (Canvas)
+    execution: concurrent
+    tasks:
+      compass:
+        - define-content-hierarchy
+        - create-wireframe-brief
+      canvas:
+        - compose-screen-layouts
+        - design-visual-hierarchy
+        - create-mobile-first-designs
+        - design-landing-page-ui
+        - produce-design-handoff-specs
+    input:
+      - Brief do projeto (de Nexus)
+      - Brand guidelines (de squad-brand)
+      - Copy aprovada (de squad-copy)
+    output:
+      - Content hierarchy
+      - Wireframe brief
+      - Visual design completo (desktop + mobile)
+      - Design handoff specs
+    gate:
+      name: Visual Design Approval
+      criteria: Design aprovado por stakeholder
+      verdict: [APPROVED, NEEDS_REVISION]
+
+  - name: "Phase 2: Implementation + Motion"
+    agents:
+      - dx-frontend-engineer (Scaffold)
+      - dx-interaction-designer (Kinetic)
+    depends_on: Phase 1
+    execution: collaborative
+    tasks:
+      scaffold:
+        - implement-responsive-layouts
+        - implement-form-system
+        - implement-lazy-loading
+      kinetic:
+        - spec-micro-interactions
+        - design-feedback-animations
+    input:
+      - Design handoff specs (de Phase 1)
+      - Motion brief
+    output:
+      - Pagina implementada com animacoes
+      - Responsivo verificado
+      - Formulario funcional
+    gate:
+      name: Implementation Complete
+      criteria: Pagina funcional em staging, interacoes implementadas
+      verdict: [COMPLETE, NEEDS_WORK]
+
+  - name: "Phase 3: Dual QA Gate"
+    agents:
+      - dx-accessibility-specialist (Beacon)
+      - dx-performance-engineer (Apex)
+    depends_on: Phase 2
+    execution: parallel
+    tasks:
+      beacon:
+        - conduct-wcag-audit
+        - test-keyboard-navigation
+        - verify-color-contrast
+      apex:
+        - audit-core-web-vitals
+        - optimize-image-pipeline
+    input:
+      - Pagina em staging
+    output:
+      - A11y audit result
+      - Performance audit result
+    gate:
+      name: Dual Quality Gate
+      criteria:
+        accessibility: "WCAG 2.2 AA compliance"
+        performance: "LCP < 2.5s, INP < 200ms, CLS < 0.1"
+      verdict: [BOTH_PASS, NEEDS_FIX]
+      blocking: true
+      on_fail: Retorna para Phase 2 com fixes
+
+completion:
+  deliverables:
+    - Landing page funcional em staging
+    - A11y compliance verificada
+    - Performance certificada
+    - Tracking hooks implementados
+  handoff_to:
+    - "@devops para deploy"
+    - "squad-growth para A/B testing e tracking"
+    - "squad-copy para feedback de copy performance"