Ecossistema Remotion — Arquitetura de Habilidade Unificada
Escopo
Esta é a camada de integração que transforma 91 habilidades individuais em um pipeline coeso de produção de vídeo. Ela não substitui nenhuma habilidade — ela fornece os padrões de roteamento, fluxo de dados e orquestração que as conectam.
Cada habilidade abaixo pode ser usada de forma independente. Este documento de ecossistema descreve como elas se compõem ao construir sistemas de vídeo Remotion completos.
As Dez Categorias
remotion-ecosystem/
├── 01-core-video/ ← Motor de renderização + estratégia de vídeo
│ ├── remotion-video-pro (scaffolding, animação, renderização em lote)
│ ├── marketing-video (seleção de abordagem de produção)
│ ├── video-generation (criação de vídeo por IA)
│ └── video-understand (análise de vídeo)
│
├── 02-data-ingestion/ ← Captura de conteúdo para dados de vídeo
│ ├── firecrawl-scrape (extração de páginas renderizadas por JS)
│ ├── firecrawl-crawl (raspagem de sites em massa)
│ ├── spider (varredura de site + auditoria de segurança)
│ ├── web-reader (metadados + conteúdo da página)
│ ├── web-search (pesquisa em tempo real)
│ └── browserbase-fetch (busca leve de URL)
│
├── 03-browser-automation/ ← Autenticação + interação para conteúdo protegido
│ ├── browser-cdp (reutilização de sessão Chrome)
│ ├── agent-browser (automação de navegador headful)
│ └── browserbase-autobrowse (loops de navegação auto-aprimoráveis)
│
├── 04-ai-intelligence/ ← Raciocínio de IA + orquestração de modelos
│ ├── think (raciocínio multi-framework via Gemini)
│ ├── council-of-five (debate paralelo com 5 personas)
│ ├── amazon-bedrock (invocação de modelos Claude/Llama/Nova)
│ ├── LLM (completions de chat)
│ └── VLM (compreensão visão-linguagem)
│
├── 05-content-design/ ← Ativos visuais + design de movimento
│ ├── charts (visualização de dados)
│ ├── image-generation (criação de imagens por IA)
│ ├── image-edit (edição de imagens por IA)
│ ├── ui-ux-pro-max (sistema de design + raciocínio de UI)
│ ├── anthropic-frontend-design (interfaces distintas)
│ └── web-shader-extractor (extração de efeitos visuais)
│
├── 06-monitoring-security/ ← Observabilidade + proteção
│ ├── sentry-ai-monitoring (rastreio de chamadas LLM + monitoramento de tokens)
│ ├── sentry-nextjs-sdk (monitoramento de erros + desempenho Next.js)
│ ├── audit-analyzer (auditoria de sistema)
│ ├── diagnose (depuração + diagnóstico)
│ └── mcp-spy (depuração de tráfego MCP)
│
├── 07-marketing-strategy/ ← Crescimento + experimentação
│ ├── marketing-ab-testing (hipótese + significância qui-quadrado)
│ ├── marketing-launch (framework de lançamento em 5 fases)
│ ├── marketing-mode (orquestração de marketing de crescimento)
│ └── content-strategy (planejamento de conteúdo)
│
├── 08-devops-deploy/ ← Infraestrutura + CI/CD
│ ├── aws-agents-deploy (implantação Railway/Vercel/Lambda)
│ ├── amazon-bedrock (implantação de modelo de IA AWS)
│ ├── vercel (implantação Vercel)
│ ├── deployment-manager (implantação multiplataforma)
│ ├── github (CI/CD + gerenciamento de repositório)
│ └── fullstack-dev (desenvolvimento full-stack Next.js)
│
├── 09-document-output/ ← Relatórios + entregáveis a partir de dados de vídeo
│ ├── docx (documentos Word)
│ ├── pdf (geração de PDF)
│ ├── ppt / pptx (apresentações)
│ ├── xlsx (planilhas)
│ └── infographic-gen (infográficos)
│
└── 10-agent-systems/ ← Orquestração de agente + memória
├── agent-roles (personas de agente especializadas)
├── superpowers (especificação primeiro + delegação a subagentes)
├── proactive-agent (autoaprimoramento autônomo)
├── self-improving-agent (registro de erros + aprendizado)
├── persistent-memory (memória entre sessões)
└── context-compressor (otimização de janela de contexto)
Arquitetura do Pipeline
O ecossistema Remotion segue um pipeline de 6 estágios:
[1. AQUISITAR] → [2. PENSAR] → [3. DESIGN] → [4. RENDERIZAR] → [5. TESTAR] → [6. IMPLANTAR]
┌──────────────────────────────────────────────────────────────────┐
│ Estágio 1: AQUISITAR — Ingestão de Dados (02-data-ingestion) │
│ │
│ firecrawl-scrape ──→ raspar páginas de concorrentes │
│ browser-cdp ──────→ extrair conteúdo protegido por autenticação │
│ spider ───────────→ escanear páginas de produtos para obter dados│
│ web-search ────────→ coletar inteligência de mercado │
│ web-reader ────────→ extrair conteúdo de artigos │
│ │
│ Saída: { produtos, concorrentes, depoimentos, preços } │
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ Estágio 2: PENSAR — Inteligência de IA (04-ai-intelligence) │
│ │
│ think ─────────────→ análise de primeiros princípios dos dados │
│ council-of-five ───→ debate de 5 personas sobre abordagem de vídeo│
│ amazon-bedrock ────→ gerar roteiro / cópia / storyboard │
│ LLM ────────────────→ refinar mensagem e CTAs │
│ │
│ Saída: { roteiro, storyboard, variantes de cópia, plano de cena }│
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ Estágio 3: DESIGN — Conteúdo + Visual (05-content-design) │
│ │
│ image-generation ──→ imagens de herói, fotos de produtos │
│ charts ─────────────→ visualizações de dados para o vídeo │
│ ui-ux-pro-max ─────→ layout + cor + sistema tipográfico │
│ web-shader-extractor → efeitos visuais de sites de referência │
│ │
│ Saída: { imagens, gráficos, paletas de cores, especificações de movimento }│
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ Estágio 4: RENDERIZAR — Vídeo Principal (01-core-video) │
│ │
│ remotion-video-pro → compor componentes React como quadros │
│ marketing-video ────→ selecionar abordagem de produção │
│ video-generation ──→ filmagem B-roll gerada por IA │
│ video-understand ──→ analisar vídeos de referência │
│ │
│ Saída: { renderizações MP4, composições de variantes } │
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ Estágio 5: TESTAR — Monitoramento + A/B (06 + 07) │
│ │
│ marketing-ab-testing → significância qui-quadrado em variantes │
│ sentry-ai-monitoring → rastrear chamadas LLM durante a geração │
│ audit-analyzer ─────→ varredura de segurança dos ativos renderizados│
│ diagnose ────────────→ depurar falhas de renderização │
│ │
│ Saída: { resultados de teste, escores de significância, relatórios de erro }│
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ Estágio 6: IMPLANTAR — DevOps + Marketing (08 + 07) │
│ │
│ aws-agents-deploy ─→ implantar em Lambda/Railway │
│ marketing-launch ───→ lançamento de produto em 5 fases │
│ vercel ──────────────→ hospedagem de serviço webhook │
│ fullstack-dev ───────→ dashboard Next.js para gerenciamento de renderização│
│ │
│ Saída: { renderizações ao vivo, endpoints webhook, campanha de lançamento }│
└──────────────────────────────────────────────────────────────────┘
Rotas de Integração
Rota A: Vídeo de Inteligência Competitiva
spider (escavar sites de concorrentes)
→ firecrawl-scrape (extrair páginas de produtos)
→ amazon-bedrock (analisar cenário competitivo)
→ council-of-five (debater ângulo do vídeo)
→ charts (criar visualizações comparativas)
→ remotion-video-pro (renderizar vídeo de comparação de concorrentes)
→ marketing-ab-testing (teste A/B de variantes de vídeo)
→ aws-agents-deploy (implantar em Lambda)
Rota B: Campanha de Vídeo de Lançamento de Produto
marketing-launch (planejar lançamento em 5 fases)
→ web-search (coletar dados de mercado)
→ think (estratégia de mensagem baseada em primeiros princípios)
→ amazon-bedrock (gerar roteiro de vídeo)
→ image-generation (criar imagens de herói)
→ ui-ux-pro-max (projetar sistema visual)
→ remotion-video-pro (renderizar vídeo de lançamento)
→ video-generation (filmagem B-roll por IA)
→ sentry-ai-monitoring (rastrear todas as chamadas de IA)
→ aws-agents-deploy (implantar pipeline)
→ marketing-ab-testing (testar variações de abertura)
Rota C: Vídeos Personalizados Orientados a Dados
firecrawl-crawl (extrair em massa fontes de dados de clientes)
→ browser-cdp (extrair dados CRM protegidos)
→ amazon-bedrock (personalizar cópia do vídeo por destinatário)
→ charts (gerar visualizações de dados personalizadas)
→ remotion-video-pro (renderizar em lote com props de personalização)
→ sentry-ai-monitoring (monitorar uso de tokens LLM em lote)
→ aws-agents-deploy (renderização em lote Lambda)
→ docx/xlsx (gerar relatório de ROI da campanha)
Rota D: Pipeline de Reaproveitamento de Conteúdo
video-understand (analisar vídeo de origem)
→ browserbase-autobrowse (coletar conteúdo de referência)
→ think (planejar estratégia de reaproveitamento)
→ firecrawl-scrape (extrair conteúdo de blog para referência)
→ marketing-video (selecionar abordagem formato curto vs longo)
→ image-generation (criar variantes de miniatura)
→ remotion-video-pro (renderizar versões específicas por plataforma)
→ marketing-launch (coordenar distribuição multiplataforma)
Rota E: Teste A/B de Variantes de Vídeo em Escala
marketing-ab-testing (projetar hipótese + variantes)
→ council-of-five (debater quais variantes testar)
→ amazon-bedrock (gerar cópia/roteiros de variantes)
→ ui-ux-pro-max (projetar sistemas visuais das variantes)
→ remotion-video-pro (renderizar composições A/B)
→ sentry-ai-monitoring (rastrear custos de geração)
→ marketing-launch (implantar teste para o público)
→ charts (visualizar resultados do teste)
→ pdf (gerar relatório de teste)
Preocupações Transversais
Segurança (06-monitoring-security)
Cada estágio do pipeline deve ser envolvido com:
- sentry-ai-monitoring: Rastrear todas as chamadas LLM (contagem de tokens, latência, custo)
- sentry-nextjs-sdk: Monitorar a saúde do serviço webhook
- audit-analyzer: Varredura periódica de segurança da infraestrutura implantada
- mcp-spy: Depurar integrações de ferramentas MCP em desenvolvimento
Memória (10-agent-systems)
Continuidade entre sessões para produção recorrente de vídeo:
- persistent-memory: Armazenar diretrizes de marca, paletas de cores, campanhas passadas
- context-compressor: Otimizar a janela de contexto ao executar pipelines complexos
- self-improving-agent: Aprender com falhas de renderização e resultados de teste A/B
Qualidade (01-core-video)
Impor as regras de ouro do remotion-video-pro em cada renderização:
- Determinismo baseado em quadros (sem Math.random)
- Animações Spring sobre lineares
- React.memo em cada componente de cena
- Validação de esquema Zod em todas as props
- Hooks de validação pré-commit
Referência Rápida — Habilidade para Estágio do Pipeline
| Habilidade | Estágio Principal | Uso Secundário |
|---|---|---|
| remotion-video-pro | 4. RENDERIZAR | 5. TESTAR (validação) |
| firecrawl-scrape | 1. AQUISITAR | 6. IMPLANTAR (verificar páginas) |
| firecrawl-crawl | 1. AQUISITAR | 3. DESIGN (conteúdo de referência) |
| spider | 1. AQUISITAR | 6. IMPLANTAR (varredura de segurança) |
| browser-cdp | 1. AQUISITAR | 3. DESIGN (conteúdo autenticado) |
| browserbase-fetch | 1. AQUISITAR | — |
| browserbase-autobrowse | 1. AQUISITAR | 2. PENSAR (pesquisa) |
| think | 2. PENSAR | 5. TESTAR (análise de depuração) |
| council-of-five | 2. PENSAR | 7. MARKETING (estratégia) |
| amazon-bedrock | 2. PENSAR | 4. RENDERIZAR (geração por IA) |
| LLM | 2. PENSAR | — |
| VLM | 2. PENSAR | 4. RENDERIZAR (análise de cena) |
| charts | 3. DESIGN | 9. SAÍDA (relatórios) |
| image-generation | 3. DESIGN | 4. RENDERIZAR (ativos) |
| ui-ux-pro-max | 3. DESIGN | 2. PENSAR (raciocínio de layout) |
| marketing-ab-testing | 5. TESTAR | 7. MARKETING (crescimento) |
| marketing-launch | 6. IMPLANTAR | 7. MARKETING (campanha) |
| sentry-ai-monitoring | 5. TESTAR | 6. IMPLANTAR (monitoramento de produção) |
| aws-agents-deploy | 6. IMPLANTAR | — |
| fullstack-dev | 6. IMPLANTAR | 3. DESIGN (dashboards) |
| docx/pdf/xlsx | 9. SAÍDA | 7. MARKETING (relatórios) |
| agent-roles | 10. SISTEMAS | 2. PENSAR (delegação) |
| superpowers | 10. SISTEMAS | — |