sinapse-ai 9.3.0 → 9.5.0

package/squads/squad-animations/knowledge-base/web-animations-api-view-transitions.md

@@ -1,478 +0,0 @@
-# Web Animations API + View Transitions API — Native Browser Animations
-
-> APIs nativas do browser para animacoes sem dependencias externas.
-> Complementam GSAP/Framer Motion com acesso de baixo nivel e zero bundle cost.
-
----
-
-## 1. Web Animations API (WAAPI)
-
-API nativa que expoe o mesmo motor de animacao que CSS usa internamente.
-Zero dependencias, excelente para animacoes programaticas e performance-critical.
-
-### Suporte
-- Chrome 36+, Firefox 48+, Safari 13.1+
-- Suporte completo (incluindo `KeyframeEffect`) em todos os browsers modernos
-
-### Animacao basica
-
-```javascript
-// Equivalente a CSS animation: fadeIn 0.3s ease-out forwards;
-const element = document.querySelector('.card');
-
-const animation = element.animate(
-  [
-    { opacity: 0, transform: 'translateY(20px)' },  // keyframe 0%
-    { opacity: 1, transform: 'translateY(0)' }       // keyframe 100%
-  ],
-  {
-    duration: 300,
-    easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
-    fill: 'forwards',     // Manter estado final
-    delay: 0,
-    iterations: 1,
-  }
-);
-
-// Promises para sequenciamento
-await animation.finished;
-// Proximo passo aqui
-```
-
-### Controle imperativo (vantagem sobre CSS)
-
-```javascript
-const animation = element.animate(keyframes, options);
-
-animation.pause();           // Pausar
-animation.play();            // Reproduzir
-animation.reverse();         // Inverter direcao
-animation.cancel();          // Cancelar (volta ao estado original)
-animation.finish();          // Pular para o fim
-
-// Controlar tempo diretamente
-animation.currentTime = 150; // Ir para 150ms
-animation.playbackRate = 2;  // Velocidade 2x
-
-// Estado
-animation.playState;   // "running" | "paused" | "finished" | "idle"
-animation.ready;       // Promise que resolve quando comeca
-animation.finished;    // Promise que resolve quando termina
-```
-
-### Keyframe Effects — Composicao
-
-```javascript
-// KeyframeEffect permite reutilizar keyframes
-const fadeInKeyframes = new KeyframeEffect(
-  null,  // Elemento adicionado depois
-  [{ opacity: 0 }, { opacity: 1 }],
-  { duration: 300, fill: 'forwards' }
-);
-
-// Reutilizar para multiplos elementos
-document.querySelectorAll('.card').forEach((card, index) => {
-  const effect = new KeyframeEffect(
-    card,
-    fadeInKeyframes.getKeyframes(),
-    {
-      ...fadeInKeyframes.getTiming(),
-      delay: index * 50,  // Stagger
-    }
-  );
-  new Animation(effect, document.timeline).play();
-});
-```
-
-### GroupEffect + SequenceEffect (Animation Worklet)
-
-```javascript
-// Sequencia de animacoes (experimental — Chrome only)
-const group = new GroupEffect([
-  new KeyframeEffect(title, [{ opacity: 0 }, { opacity: 1 }], 500),
-  new KeyframeEffect(subtitle, [{ opacity: 0 }, { opacity: 1 }], { duration: 500, delay: 200 }),
-]);
-new Animation(group).play();
-```
-
-### getAnimations() — Inspecao e Controle
-
-```javascript
-// Pausar TODAS as animacoes de um elemento
-element.getAnimations().forEach(anim => anim.pause());
-
-// Pausar animacoes da pagina inteira (menu "pause animations")
-document.getAnimations().forEach(anim => anim.pause());
-
-// Listar animacoes CSS em andamento
-const cssAnimations = element.getAnimations().filter(a => a instanceof CSSAnimation);
-const cssTransitions = element.getAnimations().filter(a => a instanceof CSSTransition);
-```
-
-### Scroll Timeline (CSS nativa + WAAPI)
-
-```javascript
-// Criar scroll timeline programaticamente
-const scrollTimeline = new ScrollTimeline({
-  source: document.scrollingElement,
-  axis: 'block',  // "block" (vertical) | "inline" (horizontal)
-});
-
-// Animar com scroll como timeline
-element.animate(
-  [
-    { opacity: 0, transform: 'translateY(50px)' },
-    { opacity: 1, transform: 'translateY(0)' }
-  ],
-  {
-    duration: 1000,
-    timeline: scrollTimeline,
-    rangeStart: 'entry 0%',   // Quando elemento entra no viewport
-    rangeEnd: 'entry 100%',   // Quando elemento terminou de entrar
-    fill: 'both',
-  }
-);
-
-// View timeline — para animacoes baseadas em visibilidade de elemento
-const viewTimeline = new ViewTimeline({ subject: element });
-
-otherElement.animate(
-  [{ opacity: 0 }, { opacity: 1 }],
-  {
-    duration: 1000,
-    timeline: viewTimeline,
-    rangeStart: 'entry 20%',
-    rangeEnd: 'entry 80%',
-    fill: 'both',
-  }
-);
-```
-
----
-
-## 2. CSS Scroll-Driven Animations (Native)
-
-CSS puro para animacoes baseadas em scroll. Chrome 115+. Zero JavaScript.
-
-### animation-timeline: scroll()
-
-```css
-/* Barra de progresso de leitura */
-@keyframes progress {
-  from { width: 0%; }
-  to { width: 100%; }
-}
-
-.reading-progress {
-  position: fixed;
-  top: 0; left: 0;
-  height: 4px;
-  background: #0066ff;
-  animation: progress linear;
-  animation-timeline: scroll(root block); /* scroll(elemento eixo) */
-  animation-fill-mode: both;
-}
-```
-
-### animation-timeline: view()
-
-```css
-/* Reveal ao entrar no viewport — zero JS */
-@keyframes reveal {
-  from {
-    opacity: 0;
-    transform: translateY(50px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.scroll-reveal {
-  animation: reveal linear;
-  animation-timeline: view();
-  /* Quando o elemento aparece ate quando termina de aparecer */
-  animation-range: entry 0% entry 100%;
-  animation-fill-mode: both;
-}
-```
-
-### animation-range — Controle Fino
-
-```css
-/* Diferentes ranges para diferentes efeitos */
-
-/* Animar enquanto entra no viewport */
-.fade-in {
-  animation-range: entry 0% entry 50%;
-}
-
-/* Animar enquanto sai do viewport */
-.fade-out {
-  animation-range: exit 0% exit 100%;
-}
-
-/* Conteiner coberto — animar quando conteudo cobre o elemento */
-.parallax-bg {
-  animation-range: cover 0% cover 100%;
-}
-
-/* Intervalo explicito em pixels/% */
-.timed-reveal {
-  animation-range: entry 20% cover 60%;
-}
-```
-
-### Named scroll timelines
-
-```css
-/* Definir timeline em ancestral */
-.scroll-container {
-  overflow: scroll;
-  scroll-timeline: --my-scroll block; /* nome e eixo */
-}
-
-/* Usar timeline nomeada em descendente */
-.animated-child {
-  animation: reveal linear;
-  animation-timeline: --my-scroll;
-  animation-range: entry 0% entry 100%;
-}
-```
-
-### Parallax CSS puro
-
-```css
-.parallax-element {
-  animation: parallax-move linear;
-  animation-timeline: scroll();
-  animation-fill-mode: both;
-}
-
-@keyframes parallax-move {
-  from { transform: translateY(0); }
-  to { transform: translateY(-200px); }
-}
-```
-
-### Suporte e Fallback
-
-```css
-/* Verificar suporte */
-@supports (animation-timeline: scroll()) {
-  .scroll-reveal {
-    animation: reveal linear;
-    animation-timeline: view();
-    animation-range: entry 0% entry 100%;
-  }
-}
-
-/* Fallback para browsers sem suporte */
-.scroll-reveal {
-  /* Estado visivel como default (sem animacao) */
-  opacity: 1;
-  transform: none;
-}
-```
-
----
-
-## 3. View Transitions API
-
-API nativa para transicoes entre paginas e estados UI. Chrome 111+.
-Safari 18+ (cross-document). Firefox em desenvolvimento.
-
-### Same-document View Transitions
-
-```javascript
-// Transicao de estado simples
-function updateContent(newContent) {
-  // Sem suporte — atualiza instantaneamente
-  if (!document.startViewTransition) {
-    updateDOM(newContent);
-    return;
-  }
-
-  // Com suporte — anima a transicao
-  document.startViewTransition(() => {
-    updateDOM(newContent);
-  });
-}
-
-// Com callback apos animacao
-const transition = document.startViewTransition(updateDOM);
-await transition.ready;  // DOM atualizado, animacao iniciada
-await transition.finished; // Animacao completa
-```
-
-### CSS para View Transitions
-
-```css
-/* Pseudo-elements criados automaticamente */
-::view-transition-old(root) {
-  /* O "before" screenshot animando para fora */
-  animation: fade-out 0.25s ease-out;
-}
-
-::view-transition-new(root) {
-  /* O "after" screenshot animando para dentro */
-  animation: fade-in 0.25s ease-in;
-}
-
-@keyframes fade-out {
-  from { opacity: 1; }
-  to   { opacity: 0; }
-}
-
-@keyframes fade-in {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-```
-
-### Elementos nomeados (Shared Element Transitions)
-
-```css
-/* Dar nome a elemento especifico */
-.hero-image {
-  view-transition-name: hero-image;
-}
-
-.product-title {
-  view-transition-name: product-title;
-}
-
-/* Controlar animacao do elemento especifico */
-::view-transition-old(hero-image) {
-  animation: scale-down 0.3s ease-out;
-}
-
-::view-transition-new(hero-image) {
-  animation: scale-up 0.3s ease-out;
-}
-
-@keyframes scale-down {
-  from { transform: scale(1); }
-  to   { transform: scale(0.8); opacity: 0; }
-}
-
-@keyframes scale-up {
-  from { transform: scale(0.8); opacity: 0; }
-  to   { transform: scale(1); }
-}
-```
-
-### Next.js com View Transitions
-
-```tsx
-'use client';
-import { useRouter } from 'next/navigation';
-
-export function ViewTransitionLink({ href, children }) {
-  const router = useRouter();
-
-  const handleClick = (e: React.MouseEvent) => {
-    e.preventDefault();
-
-    if (!document.startViewTransition) {
-      router.push(href);
-      return;
-    }
-
-    document.startViewTransition(() => {
-      router.push(href);
-    });
-  };
-
-  return <a href={href} onClick={handleClick}>{children}</a>;
-}
-```
-
-### Cross-document View Transitions (MPA)
-
-```html
-<!-- Ativar em cada pagina (Chrome 126+) -->
-<meta name="view-transition" content="same-origin" />
-```
-
-```css
-/* CSS e aplicado em ambas as paginas para cross-document */
-.hero {
-  view-transition-name: page-hero;
-}
-
-/* Na pagina de destino, o mesmo elemento com mesmo nome anima */
-```
-
-### Tipos de View Transitions
-
-```javascript
-// Transicoes com tipos diferentes para direcoes
-function navigateForward(href) {
-  document.startViewTransition({
-    update: () => router.push(href),
-    types: ['slide-forward'],       // CSS pode usar @keyframes com tipo
-  });
-}
-
-function navigateBack(href) {
-  document.startViewTransition({
-    update: () => router.push(href),
-    types: ['slide-back'],
-  });
-}
-```
-
-```css
-/* Keyframes seletivos por tipo */
-@keyframes slide-out-left {
-  to { transform: translateX(-100%); }
-}
-
-@keyframes slide-in-right {
-  from { transform: translateX(100%); }
-}
-
-/* Aplicar apenas quando tipo = slide-forward */
-:root:active-view-transition-type(slide-forward) {
-  &::view-transition-old(root) {
-    animation: slide-out-left 0.3s ease-out;
-  }
-  &::view-transition-new(root) {
-    animation: slide-in-right 0.3s ease-out;
-  }
-}
-```
-
----
-
-## 4. Quando Usar Cada API
-
-| Cenario | API Recomendada |
-|---------|----------------|
-| Animacao simples sem dependencias | WAAPI |
-| Scroll reveal CSS-only | CSS Scroll-Driven |
-| Barra de progresso de leitura | CSS Scroll-Driven |
-| Parallax suave sem JS | CSS Scroll-Driven |
-| Page transitions SPA | View Transitions API |
-| Shared element transitions | View Transitions API |
-| Animacoes complexas, timeline | GSAP |
-| Componentes React, micro-interactions | Framer Motion |
-| Controlar/inspecionar CSS animations | WAAPI (getAnimations) |
-| Pausar animacoes (acessibilidade) | WAAPI (document.getAnimations) |
-
----
-
-## 5. Suporte a Browsers (2025-2026)
-
-| API | Chrome | Firefox | Safari | Edge |
-|-----|--------|---------|--------|------|
-| WAAPI basica | 75+ | 63+ | 13.1+ | 79+ |
-| ScrollTimeline/ViewTimeline | 115+ | Em dev | Nao | 115+ |
-| CSS scroll-driven | 115+ | Em dev | Nao | 115+ |
-| View Transitions (same-doc) | 111+ | Em dev | 18+ | 111+ |
-| View Transitions (cross-doc) | 126+ | Em dev | 18+ | 126+ |
-| View Transition types | 125+ | Nao | Nao | 125+ |
-
-**Estrategia de progressive enhancement:** Sempre verificar suporte antes de usar, fornecer fallback funcional.

package/squads/squad-growth/tasks/calculate-sample-size.md

@@ -1,121 +0,0 @@
----
-task: calculate-sample-size
-responsavel: "@ga-cro-specialist"
-responsavel_type: Agent
-atomic_layer: Task
-elicit: false
-
-Entrada:
-  - campo: context
-    tipo: object
-    origem: "workflow ou manual"
-    obrigatorio: true
-
-Saida:
-  - campo: resultado
-    tipo: document
-    destino: "stakeholders"
-
-Checklist:
-  - "[ ] Validar inputs e pre-condicoes"
-  - "[ ] Executar steps conforme documentado"
-  - "[ ] Verificar criterios de qualidade"
-  - "[ ] Gerar output no formato especificado"
----
-
-# Task: Calculate Sample Size
-
-## Metadata
-- **Squad:** squad-growth
-- **Agent:** Convert (ga-cro-specialist)
-- **Complexity:** Standard
-
-## Objetivo
-Calcular sample size e duracao de experimentos — garantir que testes tenham poder estatistico suficiente para detectar o efeito esperado.
-
-## Entrada
-- Baseline conversion rate
-- Minimum Detectable Effect (MDE)
-- Traffic volume
-- Number of variants
-
-## Passos
-
-### 1. Input Parameters
-| Parametro | Valor | Nota |
-|-----------|-------|------|
-| Baseline conversion rate | | Current conversion rate |
-| Minimum Detectable Effect (MDE) | | Smallest improvement worth detecting |
-| Statistical significance | 95% (α = 0.05) | Industry standard |
-| Statistical power | 80% (β = 0.20) | Industry standard |
-| Number of variants | | Control + N variants |
-| Daily traffic (eligible) | | Visitors to test page |
-| One-tailed or two-tailed | Two-tailed | Default (conservative) |
-
-### 2. Sample Size Formula Reference
-| Baseline CR | MDE | Required Sample (per variant) | Total (2 variants) |
-|------------|-----|----------------------------|-------------------|
-| 1% | 20% relative | ~38,400 | ~76,800 |
-| 2% | 15% relative | ~28,500 | ~57,000 |
-| 3% | 10% relative | ~42,800 | ~85,600 |
-| 5% | 10% relative | ~31,000 | ~62,000 |
-| 10% | 5% relative | ~61,500 | ~123,000 |
-| 20% | 5% relative | ~49,200 | ~98,400 |
-
-### 3. Duration Calculation
-```
-Test duration (days) = Total sample needed / Daily eligible traffic
-
-Constraints:
-- Minimum: 2 full business weeks (14 days)
-- Maximum: 8 weeks (avoid novelty effect)
-- Include full week cycles (no partial weeks)
-```
-
-| Cenario | Daily Traffic | Sample Needed | Duration | Feasible? |
-|---------|-------------|--------------|---------|-----------|
-| | | | | Yes/No |
-
-### 4. MDE Guidelines
-| Tipo de Teste | MDE Recomendado | Rationale |
-|--------------|----------------|-----------|
-| Major redesign | 10-20% relative | Large changes should have large impact |
-| CTA change | 15-25% relative | Focused change, detectable effect |
-| Copy change | 10-20% relative | Moderate expected impact |
-| Form optimization | 15-30% relative | High-impact area |
-| Pricing page | 5-15% relative | Lower traffic, higher stakes |
-
-### 5. Traffic Split Strategy
-| Cenario | Split | Nota |
-|---------|-------|------|
-| Standard A/B | 50/50 | Maximum speed to significance |
-| Risk mitigation | 80/20 | Control keeps 80%, slower but safer |
-| Multi-variant | Equal split | 33/33/33 for 3 variants |
-| Phased rollout | 10/90 → 50/50 | Start small, scale if no issues |
-
-### 6. Pre-Test Checklist
-| Check | Status |
-|-------|--------|
-| Sample size calculated | |
-| Duration >= 14 days | |
-| Duration <= 56 days | |
-| Full week cycles included | |
-| Traffic sufficient for MDE | |
-| No conflicting tests planned | |
-| Seasonal factors considered | |
-| No major events during test | |
-
-## Saida
-- Sample size calculations
-- Test duration estimate
-- MDE justification
-- Traffic split recommendation
-- Pre-test checklist completed
-
-## Validacao
-- [ ] Sample size calculado com formula correta
-- [ ] Power >= 80%
-- [ ] Significance = 95%
-- [ ] Duration realista (14-56 days)
-- [ ] MDE justificado para o tipo de teste
-- [ ] Pre-test checklist passado

package/squads/squad-paidmedia/tasks/calculate-sample-size.md

@@ -1,57 +0,0 @@
----
-task: calculate-sample-size
-responsavel: "@cro-specialist"
-responsavel_type: Agent
-atomic_layer: Task
-elicit: false
----
-
-# Task: Calculate Sample Size
-
-## Metadata
-- **Agent:** cro-specialist (Convert)
-- **Squad:** squad-paidmedia
-- **Complexity:** LOW
-
-## Objetivo
-Calcular sample size necessario para A/B test com parametros definidos.
-
-## Steps
-
-1. **Coletar parametros**
-   - Baseline conversion rate (p1): taxa atual de conversao
-   - MDE (Minimum Detectable Effect): menor diferenca que importa (ex: 15%)
-   - Expected conversion rate (p2): p1 * (1 + MDE)
-   - Alpha (α): 0.05 (95% confidence)
-   - Beta (β): 0.20 (80% power)
-
-2. **Calcular sample size por variacao**
-   - Formula: n = ((Z_α/2 + Z_β)² × (p1(1-p1) + p2(1-p2))) / (p2-p1)²
-   - Z_α/2 = 1.96 (para α = 0.05)
-   - Z_β = 0.84 (para β = 0.20)
-   - Sample total = n × 2 (control + variante)
-
-3. **Estimar duracao do teste**
-   - Duracao = sample total / daily traffic
-   - Se duracao >30 dias: considerar aumentar MDE ou traffic
-   - Min 7 dias (independente do sample size)
-   - Max recomendado: 30 dias
-
-4. **Exemplo pratico**
-   - Baseline CVR: 3% (p1 = 0.03)
-   - MDE: 20% (p2 = 0.036)
-   - n per variation ≈ 21,000
-   - Total sample ≈ 42,000
-   - Se 1,000 visitors/dia → 42 dias → considerar MDE maior
-
-## Output
-Sample size calculation com parametros, formula, resultado e duracao estimada.
-
-## Quality Gates
-- [ ] Parametros documentados
-- [ ] Calculo correto
-- [ ] Duracao viavel (<30 dias idealmente)
-
-## Quando Usar
-- Antes de qualquer A/B test
-- Para determinar se ha trafego suficiente para testar