realjaymes/marketingagentskills

Quando Usar

Use esta skill quando:

• Criando um novo vídeo Remotion do zero
• Gerando variantes de briefing de vídeo para um ativo de conteúdo
• Modificando uma composição Remotion existente
• Depurando problemas de animação ou renderização no Remotion
• Trabalhando com qualquer API ou componente específico do Remotion

Processo de Criação de Vídeo

Ao criar um novo vídeo Remotion, siga este processo de 8 etapas. A Etapa 2 seleciona de 3 a 5 conceitos do catálogo com base no briefing e na otimização para audiência fria. As Etapas 4 e 5 são pontos de aprovação. Não escreva código até que ambos sejam aprovados.

Para o documento completo do processo com templates e matrizes de decisão, leia references/video-creation-process.md.

Etapa 0: Identificação da Marca

Antes de qualquer trabalho criativo, identifique a marca. Pergunte ao usuário: "Para qual marca é este vídeo?"

Se a marca tiver um preset abaixo, use-o diretamente. Nenhuma pergunta adicional sobre a marca é necessária.

Se a marca não estiver listada, peça ao usuário para fornecer uma URL do site da marca ou diretrizes da marca. Extraia: cor de fundo, acento primário, acento secundário, cores do texto, família de fonte e tema (claro/escuro). Se não houver diretrizes, peça no mínimo: cor primária, cor de fundo e preferência de fonte.

Etapa 1: Briefing Criativo

Reúna e trave antes de qualquer trabalho criativo:

Propósito: [Por que este vídeo existe]
Público-alvo: [Quem está assistindo]
Mensagem principal: [Uma frase]
Tipo de conteúdo: [postagem-blog, estudo-de-caso, webinar, podcast, imã-de-lead, atualizacao-de-produto, lancamento-de-ferramenta, relatorio-do-setor, recap-de-evento, depoimento-de-cliente, playbook, template, demonstracao-de-ia, gpt-personalizado]
Canais: [Onde será distribuído]
CTA: [O que o espectador deve fazer em seguida]
Ativos de origem: [Arquivos, componentes ou URLs para referência]
Tom: [Palavras descritivas para a sensação]
Marca: [Nome da marca da Etapa 0]

Etapa 2: Seleção de Conceito (3 a 5 Conceitos Recomendados)

Após travar o briefing criativo, analise-o para selecionar os melhores conceitos de vídeo para este caso de uso específico. Não apresente um conjunto fixo de variantes. Consulte o catálogo de conceitos em references/concept-catalog.md.

O catálogo contém 18 conceitos primários, 8 modificadores de estilo visual e 5 padrões de abertura para audiência fria. Leia-o antes de gerar recomendações.

Processo de Seleção

1. Pontue os conceitos em relação ao briefing. Para cada conceito no catálogo, avalie:

   • O "Melhor Para" do conceito corresponde ao tipo de conteúdo?
   • A mensagem principal cabe em 15 a 30 segundos com esta estrutura?
   • O conceito funciona na duração e dimensões alvo?
   • O briefing fornece os dados/visuais que este conceito precisa?

2. Aplique o filtro de audiência fria. Para cada conceito pontuado, avalie:

   • Um espectador com ZERO contexto prévio consegue entender o valor nos primeiros 3 segundos?
   • O conceito cria movimento visual que prende a atenção na abertura?
   • O conceito evita exigir conhecimento prévio da marca, produto ou problema?
   • Se o conceito naturalmente prioriza um resultado ou dado (contador-de-métrica, infográfico-animado, antes-depois), ele é inerentemente mais forte para audiências frias do que conceitos narrativos que precisam de tempo de configuração.

3. Selecione um padrão de abertura. Para cada conceito recomendado, emparelhe-o com um padrão de abertura do catálogo:

   • Conteúdo com dados → resultado-primeiro
   • Lançamentos de produtos e ferramentas → interrupção-de-padrão
   • Liderança de pensamento e educação → lacuna-de-curiosidade
   • Conteúdo de construção de confiança → gancho-de-prova-social
   • Conteúdo competitivo e de preços → aversão-a-perda

4. Apresente de 3 a 5 conceitos recomendados como briefs de uma página. Para cada um:

   • Nome do conceito (do catálogo) e descrição em uma frase
   • Por que ele se encaixa neste briefing (1 a 2 frases referenciando o conteúdo e público específicos)
   • Padrão de abertura recomendado e descrição do primeiro momento
   • Tabela cena por cena (do template do catálogo, personalizada para este conteúdo)
   • Modificador de estilo visual opcional se um melhorar o conceito

5. Classifique as recomendações. Marque a principal recomendação e explique por quê.

6. O usuário seleciona um (ou um híbrido de dois). Trave o conceito selecionado antes de prosseguir para a Etapa 3.

Regras de Otimização para Audiência Fria

Estas regras se aplicam a todas as recomendações de conceito e substituem os padrões de tipo de conteúdo quando conflitam:

• Suposição padrão: audiência fria. A menos que o briefing declare explicitamente que a audiência é aquecida (retargeting, usuários existentes, assinantes de newsletter), assuma zero reconhecimento de marca.
• Requisitos da primeira cena para audiências frias:
  1. Uma interrupção visual de padrão (movimento, contraste de cor ou mudança de escala)
  2. Texto que nomeia um problema ou resultado que o espectador reconheça SEM conhecer a marca
  3. Nenhuma identificação de marca na cena 1 (guarde o cartão da marca para a cena 2 ou posterior)
• Restrições de padrão de abertura para audiências frias: Use interrupção-de-padrão, resultado-primeiro ou aversão-a-perda. Evite lacuna-de-curiosidade a menos que a estatística/afirmação seja universalmente relacionável sem contexto da marca.
• Flexibilidade de conceito: Se nenhum conceito do catálogo se encaixar bem no briefing para uma audiência fria, crie um híbrido ou adapte um conceito existente. O catálogo é uma biblioteca inicial, não uma restrição.

Etapa 3: Formato e Especificações

Resolva a partir do briefing e da variante selecionada usando a matriz de decisão de formato:

Canal	Dimensões	Duração
Feed LinkedIn/Instagram	1080x1080	15 a 30s
Site/apresentação	1920x1080	15 a 60s
Reels/TikTok/Stories	1080x1920	15 a 60s
E-mail (GIF)	600x600 ou 800x450	5 a 10s

FPS padrão: 30. Use 60 apenas se movimento suave for crítico.

Dimensões: [largura]x[altura]
Duração: [X] segundos ([X * fps] quadros)
FPS: 30
ID da composição: [PascalCase]
Loop: [sim/não]
Formatos de saída: [mp4, gif, webm]
Conceito selecionado: [id-do-conceito do catálogo, ou híbrido]

Etapa 4: Detalhamento de Cenas (PONTO DE APROVAÇÃO)

Defina cada cena antes de escrever código. Use o template de cena da variante selecionada como estrutura inicial e personalize para o conteúdo específico.

Apresente a tabela de cenas para aprovação.

Formato da tabela de cenas:

#	Nome	Tempo	Texto	Animação	Propósito
1	Abertura	0 a 3s	Texto exato	Descrição do movimento	Por que existe

Diretrizes de timing:

Duração	Nº de Cenas	Média por Cena
10s	3 a 4	2,5 a 3,3s
15s	4 a 6	2,5 a 3,75s
30s	8 a 12	2,5 a 3,75s
60s	12 a 20	3 a 5s

Trave o texto, o timing e a estrutura narrativa antes de prosseguir.

Etapa 5: Design Visual (PONTO DE APROVAÇÃO)

Trave antes da implementação:

Paleta de cores (funções mínimas necessárias):

• Fundo, Acento primário, Acento secundário
• Texto primário, Texto secundário, Texto terciário
• Borda/divisória

Presets de tema da marca (use para marcas conhecidas, pule perguntas de cor):

Marca	Fundo	Acento Primário	Acento Secundário	Texto Primário	Texto Suave	Fonte	Tema
FunnelEnvy	#FFFFFF / #1a1a2e (terminal)	#3B82F6 (Azul)	#8B5CF6 (Roxo)	#000000	#6B7280	Inter, system	Claro
Reform	#FFFFFF / #1a1a2e (terminal)	#48EC80 (Verde)	#EDE630 (Amarelo)	#000000	#6B7280	Inter, system	Claro
GrowthNode	#0f0a1a (todas as cenas)	#8B5CF6 (Roxo)	#3B82F6 (Azul)	#FFFFFF	#a1a1aa	Inter, system	Escuro
MIA	#F7F4FA / #1c1422 (escuro)	#F1DE71 (Amarelo)	#7184F1 (Roxo)	#1c1422 / #f7f4fa (escuro)	rgba(28,20,34,0.62)	system-ui, -apple-system, Segoe UI	Claro

Paleta de acentos MIA: Azul #71C4F1, Roxo #7184F1, Rosa #F171C4, Verde #71F19E

Marcas personalizadas: Se a marca não estiver listada acima, defina as cores a partir do site da marca ou das diretrizes fornecidas na Etapa 0. Preencha as mesmas funções: fundo, acento primário, acento secundário, texto primário, texto suave, fonte, tema.

Tipografia: Família de fonte, hierarquia de peso, tamanhos na resolução alvo.

Estilo de animação: Spring (elástico/suave/brusco), linear ou baseado em easing. Escolha um estilo dominante.

Fonte da verdade: Se estiver combinando com um design existente, referencie o arquivo de origem.

Etapa 6: Decisão de Arquitetura

O agente resolve com base na complexidade das cenas:

Condição	Abordagem
Menos de 15 cenas	Arquivo único
15+ cenas ou partes reutilizáveis	Múltiplos arquivos com diretório scenes/
Elementos compartilhados entre cenas	Camada persistente com envelope de opacidade

Sempre use uma constante de timing centralizada (const T = { ... }).

Etapa 7: Implementação

Escreva código com base nas decisões travadas. Toda animação deve seguir as regras do Remotion (consulte a Referência Técnica abaixo).

Etapa 8: Documentação de Saída

Gere um documento de referência cobrindo: especificações, variante selecionada, comandos de pré-visualização/renderização, detalhamento de cenas, paleta de cores, configuração de timing, notas de arquitetura, guia de iteração.

---

Referência Técnica

Leia os arquivos de regras individuais para detalhes da API e exemplos de código.

Animação e Timing Principais

• rules/animations.md - Fundamentos de animação. Todo movimento via useCurrentFrame(). Sem transições CSS
• rules/timing.md - interpolate(), spring(), funções de easing, configurações de spring
• rules/sequencing.md - <Sequence> e <Series> para controle de timing, atraso e duração
• rules/trimming.md - Cortar início (from negativo) e fim (durationInFrames)
• rules/transitions.md - <TransitionSeries> com fade, slide, wipe, flip, clockWipe

Mídia

• rules/assets.md - staticFile() para ativos na pasta public
• rules/videos.md - <Video> com corte, volume, velocidade, loop, pitch
• rules/audio.md - <Audio> com corte, volume, velocidade, pitch
• rules/images.md - Componente <Img> (garante carregamento antes da renderização)
• rules/gifs.md - <AnimatedImage> para GIF/APNG/AVIF/WebP
• rules/fonts.md - Google Fonts via @remotion/google-fonts, fontes locais via @remotion/fonts

Texto e Legendas

• rules/text-animations.md - Máquina de escrever, padrões de destaque de palavras
• rules/measuring-text.md - measureText(), fitText(), fillTextBox()
• rules/display-captions.md - Legendas estilo TikTok, destaque palavra por palavra
• rules/import-srt-captions.md - Parsear arquivos .srt com parseSrt()
• rules/transcribe-captions.md - Whisper.cpp, Whisper Web, OpenAI API

Composição e Metadados

• rules/compositions.md - <Composition>, <Still>, <Folder>, defaultProps
• rules/calculate-metadata.md - Duração, dimensões e props dinâmicas

Avançado

• rules/3d.md - <ThreeCanvas> com React Three Fiber
• rules/charts.md - Gráficos SVG/D3.js animados via useCurrentFrame()
• rules/lottie.md - <Lottie> com @remotion/lottie
• rules/tailwind.md - TailwindCSS (sem classes transition-* ou animate-*)

Utilitários de Mídia (Mediabunny)

• rules/extract-frames.md - Extrair quadros de vídeo em timestamps
• rules/can-decode.md - Verificar decodificabilidade de vídeo/áudio
• rules/get-video-duration.md - Duração do vídeo em segundos
• rules/get-video-dimensions.md - Largura e altura do vídeo
• rules/get-audio-duration.md - Duração do áudio em segundos

Layout

• rules/measuring-dom-nodes.md - useCurrentScale() para medições precisas

---

Referências

• references/concept-catalog.md - Catálogo de conceitos com 18 conceitos primários, 8 modificadores de estilo visual, 5 padrões de abertura para audiência fria, critérios de seleção e matriz de afinidade de tipo de conteúdo
• references/video-creation-process.md - Documento completo do processo com templates, matrizes de decisão e orientação detalhada

---

Regras Rígidas

Estas se aplicam a todo código Remotion. Violações produzirão saída incorreta.

1. Toda animação é impulsionada por useCurrentFrame(). Sem transições CSS, sem classes Tailwind animate-* ou transition-*, sem React Three Fiber useFrame()
2. Use componentes Remotion (<Img>, <Video>, <Audio>) e não elementos HTML nativos
3. Use staticFile() para todos os ativos na pasta public/
4. Tempo em segundos: multiplique por fps de useVideoConfig() para obter quadros
5. Nenhuma biblioteca de animação de terceiros impulsionando movimento (desative suas animações, use useCurrentFrame() em vez disso)
6. Cada conceito deve ser autoexplicativo. Um espectador rolando sem contexto deve entender o valor apenas pelo vídeo. Nenhuma cena deve depender de conhecimento externo. O texto deve carregar a mensagem completa de forma independente. Sempre assuma uma audiência fria, a menos que o briefing diga o contrário.