O que Remotion Video Director faz?

Um skill interativo que guia os usuários desde "preciso de um vídeo" até um MP4 renderizado com música, por meio de deliberação de especialistas, design de cenário e padrões Remotion testados em batalha.

Quando Usar

Acione este skill quando o usuário:

Quer criar um vídeo usando Remotion
Precisa de uma demonstração de produto, vídeo de lançamento, modelo de conteúdo recorrente, vídeo de marketing ou introdução narrativa
Diz "preciso de um vídeo", "faça um vídeo para...", "crie um vídeo Remotion", "vídeo como código"
Quer ajuda para pensar sobre que vídeo fazer ou como estruturá-lo
Tem um projeto Remotion e deseja uma revisão de especialista

Relacionamento com o Skill Oficial do Remotion

O pacote oficial remotion-dev/skills ensina ao Claude a API do Remotion (37 arquivos de regras cobrindo animações, áudio, legendas, transições, etc.). Este skill lida com a camada criativa e estratégica sobreposta:

Skill oficial: "Como uso interpolate()?" (referência técnica)
Video Director: "Que vídeo devo fazer e como ele deve fluir?" (processo criativo)

Se o skill oficial do Remotion estiver instalado, aproveite-o para obter detalhes específicos da API. Caso contrário, os arquivos references/remotion-patterns.md e references/component-library.md neste skill fornecem conhecimento suficiente do Remotion para construir vídeos de produção.

Fluxo de Trabalho em Quatro Fases

Fase 1: Enquadramento Estratégico

Objetivo: Entender o que o usuário precisa por meio de conversa, depois montar perspectivas de especialistas.

CRÍTICO: Esta fase é INTERATIVA. Faça perguntas uma de cada vez e AGUARDE as respostas. NÃO despeje todas as perguntas de uma vez ou prossiga automaticamente sem a contribuição do usuário.

Passo 1 - Descoberta (Conversacional)

Comece com uma única pergunta aberta:

"Para que é este vídeo? Conte-me sobre a ideia, quem vai assistir e o que você quer que eles façam depois."

AGUARDE a resposta do usuário. Em seguida, faça perguntas complementares direcionadas com base no que está faltando:

Se o público não estiver claro: "Quem especificamente vai assistir? (clientes, equipe, investidores, redes sociais?)"
Se a ação desejada não estiver clara: "Depois de assistir, o que os espectadores devem FAZER? (inscrever-se, entender algo, compartilhar?)"
Se nenhuma restrição foi mencionada: "Há alguma restrição que eu deva saber? Duração, cores da marca, ativos existentes, prazo?"
Se eles mencionarem um produto: "Você pode compartilhar capturas de tela do produto/interface?"

NÃO prossiga até entender: propósito, público, ação desejada e restrições.

Passo 2 - Direção Criativa

Apresente as opções de direção criativa e peça ao usuário para escolher:

Estilo	Sensação	Melhor Para
Minimalista/Jobs	Fundo preto, pausas dramáticas, uma ideia por quadro, fonte Impact	Lançamentos de produtos, grandes ideias, palestras principais
Rico em Dados/Bloomberg	Fundo azul marinho escuro, gráficos animados, denso mas organizado	Recapitulações de reuniões, relatórios, dashboards
Aconchegante/Narrativo	Tons quentes, citações pessoais, detalhes serifados	Introduções de cursos, histórias de equipe, comunidade
Terminal/Hacker	Tema escuro de código, máquina de escrever, monoespaçado em todo lugar	Demonstrações técnicas, ferramentas de desenvolvedor, engenharia
Personalizado	O usuário descreve ou fornece capturas de tela/vídeos de referência	Qualquer coisa específica

"Qual estilo de direção se encaixa no seu vídeo? Ou compartilhe capturas de tela de vídeos que você viu e gostou."

AGUARDE resposta.

Leia references/video-archetypes.md para a especificação completa da direção escolhida (cores, fontes, estilo de animação, regras de tempo).

Passo 3 - Entrada de Referência (Opcional)

"Você tem algum vídeo de referência, capturas de tela ou estilos visuais que gostaria que eu seguisse? (Pule se não tiver)"

Se o usuário fornecer referências, analise-as em busca de: paleta de cores, tipografia, velocidade de animação, densidade de layout, clima geral. Incorpore-os no briefing criativo.

AGUARDE resposta ou confirmação para pular.

Passo 4 - Montagem do Painel de Especialistas

Com base no arquétipo selecionado (de references/video-archetypes.md) e na direção criativa, monte um painel de 3-4 especialistas de references/expert-definitions.md.

Gere perspectivas dos especialistas - para cada especialista, gere 2-3 frases:

Uma recomendação específica
Um risco para ficar atento

Mantenha isso conciso. Apresente como uma breve mesa redonda. Destaque apenas onde os especialistas discordam (sinaliza uma decisão que o usuário precisa tomar).

Passo 5 - Briefing Criativo

Sintetize em um briefing estruturado:

## Briefing Criativo

**Propósito**: [uma frase]
**Público**: [quem, com o que eles se importam]
**Mensagem Central**: [A ÚNICA coisa que os espectadores devem lembrar]
**Ação Desejada**: [o que os espectadores devem fazer em seguida]
**Duração**: [segundos] ([quadros] quadros a 30fps)
**Direção Criativa**: [estilo selecionado - Minimalista/Jobs, Bloomberg, etc.]
**Arco Emocional**: [ex.: curiosidade -> prova -> confiança -> ação]

## Estratégia de Áudio
- Música: [ambiente/animada/dramática/esparsa] do Pixabay
- Narração: [sim/não]
- Clima da música: [descrição correspondente à direção criativa]

## Sequência de Cenas
| # | Cena | Duração | Propósito |
|---|------|---------|-----------|
| 1 | ...  | Xs      | ...       |

## Modelo de Dados (se aplicável)
[O que é parametrizado vs. codificado - a estrutura de modelo reutilizável]

## Estilo Visual
- Tema: [nome da direção criativa]
- Fundo: [cor]
- Cores: [primária, destaque, secundária]
- Tipografia: [fonte de título, fonte de corpo, fonte monoespaçada]
- Sensação da animação: [rápida/suave/dramática/máquina de escrever]

"Aqui está o briefing criativo. Quer ajustar algo antes de projetarmos as cenas?"

AGUARDE confirmação ou ajustes.

Fase 2: Design de Cenário

Objetivo: Transformar o briefing em um cenário detalhado cena por cena.

Passo 6 - Design de Cena

Para cada cena na sequência, especifique:

Conteúdo: Texto exato, dados, elementos visuais
Componentes: Quais componentes reutilizáveis usar (de references/component-library.md)
Animação: Animações de entrada/saída, tempo em quadros
Transições: Dissolução cruzada entre todas as cenas (8-12 quadros)

Leia references/remotion-patterns.md para restrições críticas do Remotion e padrões de estilo premium.

Regra de Foco da Cena: Cada cena deve servir a UMA ideia que se conecta à mensagem central. Se uma cena for tangencial à mensagem central, CORTE-A. Poucas cenas focadas são sempre melhores do que muitas dispersas.

Orçamento de Quadros: Mapeie a linha do tempo inteira:

const TIMING = {
  scene1: { start: 0, dur: 6 },   // Gancho
  scene2: { start: 6, dur: 10 },  // ...
  // Total deve corresponder à composição durationInFrames / fps
};

Passo 7 - Arquitetura de Dados

Se o vídeo for orientado a dados (relatório recorrente, marketing multivariante):

Projete o objeto de configuração que muda entre as renderizações
Identifique o que permanece constante (modelo visual) vs. o que varia (conteúdo)
Mostre ao usuário a forma da configuração e confirme

Exemplo de padrão (do WeeklyIntro):

const weekData = {
  weekLabel: "Mar 3 - Mar 9",
  heroNumber: 312,
  heroLabel: "novas inscrições",
  // ... campos que mudam semanalmente
};

Passo 8 - Confirmação do Usuário

Apresente o cenário completo.

"Pronto para construir, ou quer ajustar algo?"

AGUARDE confirmação.

Fase 3: Construção

Objetivo: Criar o projeto Remotion e renderizar a primeira versão.

CRÍTICO: Nunca execute nenhum comando que inicie um assistente CLI interativo ou solicite entrada. Isso inclui npx create-video, npx remotion init, npm init, ou npx remotion render sem argumentos. Sempre crie os arquivos manualmente e passe todos os argumentos explicitamente para comandos CLI.

Passo 9 - Estruturar Projeto

Crie a estrutura do projeto Remotion manualmente (NÃO use assistentes de scaffolding - veja o cabeçalho da Fase 3):

<projeto>/
├── src/
│   ├── Root.tsx
│   ├── Video.tsx           # ou <NomeDoVideo>.tsx
│   ├── theme/
│   │   ├── colors.ts
│   │   ├── fonts.ts
│   │   └── springs.ts
│   ├── scenes/
│   │   ├── Scene1Hook.tsx
│   │   └── ...
│   ├── components/
│   │   ├── FadeIn.tsx
│   │   └── ...
│   └── data/
│       └── config.ts       # se orientado a dados
├── public/
│   ├── music.mp3           # música de fundo
│   └── illustrations/      # se usar imagens de fundo
├── package.json
├── tsconfig.json
└── remotion.config.ts

Instale as dependências: pnpm install

Passo 10 - Construir Cenas

Construa cada componente de cena seguindo o cenário da Fase 2. Use componentes de references/component-library.md.

Regras críticas de construção (de references/remotion-patterns.md):

Toda animação via useCurrentFrame() + interpolate()/spring() - NUNCA transições CSS
Sempre fixe a interpolação: { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
useCurrentFrame() é relativo ao <Sequence> mais próximo, não à linha do tempo global
Dissolução cruzada entre cada cena (envelope de 8-12 quadros; exceção: estilo Terminal/Hacker onde cortes secos funcionam)
Cada elemento deve animar ao entrar - nunca aparecer estático em um corte

Regras de estilo premium (de references/remotion-patterns.md):

Variedade de fontes: misture fonte de título + fonte de corpo + fonte monoespaçada (não Inter em todo lugar)
Contraste extremo de tamanho: títulos 72-96pt, corpo 20-24pt
Centralize perguntas/títulos importantes verticalmente
Máximo de 15-20 palavras por slide de corpo, 7 palavras para slides de título (estilo Jobs)
Mantenha o texto nos 85% superiores do quadro
Mínimo de 24px de fonte para legibilidade
Preenchimento de 80-120px das bordas

Passo 11 - Integração de Áudio

Leia references/music-and-audio.md para o guia completo de áudio.

"Quer adicionar música de fundo? Recomendo navegar em pixabay.com/music/ para uma faixa livre de royalties que combine com o estilo [direção criativa selecionada]. Compartilhe o link de download ou o arquivo e eu integrarei com curvas de volume adequadas."

AGUARDE a resposta do usuário.

Se o usuário fornecer música:

Baixe/salve em public/music.mp3
Adicione o componente <Audio> com curva de volume fade-in/fade-out
Abaixe o volume da música durante cenas com muitos dados (0.30 -> 0.15)
Se a faixa for mais longa que o vídeo, use startFrom para tocar a seção final

Se o usuário quiser narração:

Gere o roteiro de narração a partir do conteúdo da cena (~3 palavras/segundo)
O usuário grava ou usa ElevenLabs
Integre com redução de volume da música (a música cai para 0.10-0.12 durante a narração)

Se o usuário pular o áudio: renderize com a flag --muted.

Passo 12 - Renderizar e Visualizar

CRÍTICO: Sempre passe o arquivo de ponto de entrada para evitar prompts interativos. Nunca execute npx remotion render sozinho - ele pode iniciar um seletor de composição interativo. Sempre especifique o arquivo de entrada e o ID da composição explicitamente:

# Renderizar MP4 final - sempre especifique ponto de entrada + ID da composição
npx remotion render src/Root.tsx <IdDaComposicao> out/<nome>.mp4 --codec=h264 --crf=18

# Se não houver áudio:
npx remotion render src/Root.tsx <IdDaComposicao> out/<nome>.mp4 --codec=h264 --crf=18 --muted

Abra o vídeo para o usuário revisar.

Fase 4: Revisão

Objetivo: Refinar o vídeo por meio de revisão de especialistas e feedback do usuário até que esteja pronto para ser entregue.

Passo 13 - Revisão Multi-Especialista

Depois que o usuário tiver visto o vídeo, execute o protocolo de revisão de references/expert-definitions.md.

Gere um scorecard (veja references/expert-definitions.md para o modelo completo):

| Dimensão                    | Prioridade | Pontuação |
|-----------------------------|------------|-----------|
| Clareza do gancho (primeiros 3-5s) | Crítica    | ?/5       |
| Mensagem central transmitida | Crítica    | ?/5       |
| Ritmo / dinamismo             | Alta       | ?/5       |
| Legibilidade visual           | Alta       | ?/5       |
| Ação alvo clara               | Alta       | ?/5       |
| Adequação ao público          | Média      | ?/5       |

Adicione 2-3 dimensões específicas do tipo (ex.: "Sensação visual premium" para Minimalista/Jobs, "Harmonia audiovisual" se música foi adicionada, "Reutilização de configuração" para relatórios de dados).

Cada especialista revisa de seu ângulo, incluindo o Diretor de Fotografia sobre composição visual e o Diretor Musical sobre áudio (se música foi adicionada). Sintetize em:

Pontos Fortes - o que funciona bem
Melhorias - mudanças específicas e acionáveis
Veredito - pode ser entregue como está, precisa de mais uma passada, ou precisa de retrabalho significativo

Pergunte ao usuário quais melhorias aplicar.

Passo 14 - Revisão do Usuário e Iteração

A revisão de especialistas captura problemas técnicos, mas apenas o usuário sabe se o vídeo parece certo.

"Agora que você viu o vídeo e a revisão dos especialistas - qual é a sua opinião?

Quais cenas funcionam bem?

Quais cenas precisam de mudanças? (capturas de tela de quadros específicos, se possível)

Algum problema com texto, tempo ou visuais?

Algo faltando ou que deva ser cortado?"

AGUARDE o feedback do usuário.

Quando o usuário fornecer feedback:

Reconheça o que ele gostou (reforça a direção)
Liste as mudanças específicas que você fará com base nas anotações
Faça as mudanças - edite os componentes da cena, ajuste o tempo, corrija o texto
Re-renderize e apresente o vídeo atualizado
Pergunte novamente: "Melhorou? Mais algo para ajustar?"

Repita este ciclo até que o usuário esteja satisfeito. Vídeos típicos precisam de 1-3 rodadas de refinamento.

Padrões comuns de feedback e como lidar com eles:

"Muito rápido" → Aumente a duração das cenas em 30-50%, adicione mais pausas dramáticas
"Muito texto" → Divida as cenas, reduza para 7 palavras por quadro (estilo Jobs)
"Não parece premium" → Mude para a direção Minimalista/Jobs, adicione espaço negativo
"Música não combina" → Experimente uma faixa diferente do Pixabay, ajuste a curva de volume
"Tom errado" → Revisite a direção criativa, ajuste a paleta de cores e a velocidade da animação
"Cena X está confusa" → Simplifique para UMA ideia, adicione hierarquia visual

Diretrizes de Adaptação

Quando o usuário já tem um projeto Remotion

Pule a estruturação das Fases 1-2. Concentre-se em revisar o código existente, sugerir melhorias ou adicionar novas cenas/composições.

Quando o usuário quer um vídeo rápido (sem deliberação)

Comprima a Fase 1 para: perguntar o tipo de vídeo + direção criativa em uma única pergunta. Escolha os 2 principais especialistas, gere um cenário breve. Vá rapidamente para a construção. Ainda pergunte sobre música.

Quando o usuário quer apenas o conceito (sem código)

Execute as Fases 1-2 completamente. Produza o briefing criativo e o cenário como um documento. Pule a Fase 3.

Quando o usuário quer vídeos multivariantes

Use o arquétipo de Growth Marketing. Projete a matriz de variantes (o que muda por variante). Construa um vídeo base e depois mostre como parametrizar os dados de entrada para gerar cada variante.

Lembrete Final

O objetivo não é apenas construir um vídeo, mas construir o vídeo certo. O processo criativo orientado por especialistas diferencia este skill de simples prompts de geração de código. A deliberação na Fase 1 salva horas de retrabalho na Fase 4.

Sempre, sempre, sempre faça perguntas e AGUARDE respostas. Não presuma que sabe o que o usuário quer. Não pule a descoberta. O processo é o produto.

Perguntar na sua IA favorita

Documentação