Remotion skill: o que seu coding agent realmente consegue fazer com vídeo em React?

Fala aí, beleza? Vídeo virou componente React, e quem edita agora pode ser o seu agente 🙂

O Remotion é um framework pra criar vídeo programaticamente com React: você escreve componentes, anima em código e renderiza pra MP4

E agora o próprio time do Remotion mantém um conjunto oficial de Agent Skills, no repositório remotion-dev/skills

Isso muda o que dá pra pedir pro coding agent, porque ele deixa de chutar API e passa a ter o manual do framework do lado

Bora entender o que essa habilidade entrega de verdade, e principalmente onde ela NÃO é o melhor caminho

Por que o Remotion trocou o MCP pelas Agent Skills

Se você já tinha configurado o MCP do Remotion, se liga: ele foi deprecado em favor das Agent Skills

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

A orientação oficial hoje é instalar as skills e usar /remotion-docs no lugar

Os motivos declarados são bem pé no chão:

• instalar servidores MCP é difícil
• os agentes não invocam os servidores de forma confiável
• havia duplicação com a própria skill /remotion-docs

Ou seja, o problema não era a informação, era o caminho até ela

O MCP hospedado ainda não caiu de uma vez: o desligamento acontece não antes de 31 de agosto de 2026

Então dá tempo de migrar sem correria, mas migrar é o movimento certo

O que seu coding agent consegue fazer com as skills do Remotion

Aqui mora o ponto principal do post

As skills oficiais são modulares, divididas por assunto, em vez de um arquivão único de regras

O repositório lista estas:

• remotion-best-practices
• remotion-captions
• remotion-create
• remotion-docs
• remotion-interactivity
• remotion-maps
• remotion-markup
• remotion-multimedia
• remotion-render
• remotion-saas
• remotion-studio
• remotion-upgrade

Os nomes já dão o mapa das frentes cobertas (criar projeto, legendas, renderização, Studio, mídia, upgrade e por aí vai)

remotion-markup: a skill que cobre a parte que você mais vai pedir

Essa é a frente de composição e animação

Ela cobre composições, animações, layout, tipografia, elementos de mídia, efeitos, áudio, fontes e timing

Repara no tamanho disso: é praticamente tudo que aparece na tela e tudo que define QUANDO aparece

É o equivalente a entregar pro agente o vocabulário de montagem do vídeo, e não só a sintaxe do React

remotion-best-practices: o guarda-chuva pra quando você não sabe qual pedir

A remotion-best-practices engloba as demais

É a indicada justamente quando você não faz ideia de qual skill se aplica ao seu pedido

Na prática é o teu default: começa por ela, e as específicas entram conforme o assunto aperta

E tem um detalhe que muita gente confunde no ecossistema de agentes: skill não é comando nem subagente, cada peça resolve um problema diferente

Se esse recorte ainda tá nebuloso pra você, vale entender antes a diferença entre skills e comandos, porque isso muda a forma como você escreve o pedido

O que você precisa antes de instalar

Os pré-requisitos declarados pelo Remotion pro fluxo com Claude Code são curtos:

• Node.js instalado
• Claude Code instalado
• assinatura paga do Claude Code

Nada de PC da Nasa aqui, mas o Claude Code é pago, e isso entra na conta antes de você começar

E não, não é exclusividade do Claude Code

O Remotion declara funcionar com Claude Code, Codex, Kimi Code, OpenCode e Cursor

No caso do Cursor, o plugin é instalável pelo Cursor Marketplace

O suporte aos outros agentes existe, então confere a doc do teu agente antes de sair rodando comando

Como instalar as skills do Remotion no seu agente

São dois caminhos, e você escolhe um

1. Instalar pela CLI do Remotion, dentro do projeto:

npx remotion skills add

2. Atualizar quando sair versão nova das skills, com o comando irmão:

npx remotion skills update

3. Saber onde as skills vivem: elas são instaladas em .agents/skills, no projeto

A compatibilidade com o Claude Code vem de um symlink de .claude/skills apontando pra .agents/skills

O erro comum deste passo é procurar a skill na pasta errada e achar que a instalação falhou: se você olhou só em .claude/skills e estranhou, é o symlink fazendo o trabalho dele

4. Ou instalar pelo plugin do Claude Code, que é o caminho alternativo

Primeiro você adiciona o marketplace:

claude plugin marketplace add remotion-dev/claude-code-plugin

5. Instalar o plugin:

claude plugin install remotion@remotion

6. Reiniciar o Claude Code

O erro comum deste passo é justamente pular ele: você instala, continua na mesma sessão, o agente não enxerga nada e você jura que o plugin tá quebrado

Reinicia e testa de novo antes de abrir issue, beleza? 😀

Um detalhe que economiza confusão: cada plugin de agente mantido pela Remotion já inclui as Agent Skills

Então o plugin não é uma coisa separada das skills, ele é uma forma de trazer as skills

Do pedido ao MP4: o caminho que o agente percorre

Com as skills no lugar, o fluxo fica bem direto

1. Você pede a composição em linguagem natural

Com as skills instaladas, o Claude Code carrega sozinho a skill pertinente ao pedido, sem você invocar nada manualmente

Isso é metade da graça: você descreve o vídeo, ele puxa o contexto certo do framework

2. Você abre o Remotion Studio pra conferir, que é o ambiente visual do projeto:

npx remotion studio

O erro comum deste passo é pular a conferência e ir direto pro render

Vídeo é tempo, e coisa que parece certa no código pode estar entrando um segundo antes do que devia

3. Você renderiza pela linha de comando, informando o entry point e o id da composição:

npx remotion render <entry-point> <composition-id>

O caminho de saída entra como terceiro argumento, e ele é opcional

A saída padrão é out/{composition}.{container}, tipo out/HelloWorld.mp4

Se você não informou o caminho de saída e ficou procurando o arquivo pela pasta inteira, é aí que ele está 🙂

Pedir pro agente montar ou abrir o Studio e editar você mesmo?

Essa é a decisão que realmente importa no dia a dia

As duas frentes mexem no mesmo projeto, só que por portas diferentes:

Repara que não é "um substitui o outro"

O Studio te dá manipulação direta em cima do que já existe, o agente te dá alcance pra mexer em várias partes do código de uma vez

Quando pedir pro agente e quando editar direto

O critério é simples:

Vai pro agente quando:

• é estrutura nova, do zero, e você quer sair do papel em branco
• é repetição em escala, tipo a mesma composição com variação de conteúdo
• é mudança que atravessa vários componentes ao mesmo tempo

Fica no Studio quando:

• é ajuste fino de tempo, aquele frame a mais ou a menos
• é posição, escala, rotação ou opacidade que você quer ver mudando enquanto arrasta
• é valor de prop que já está exposto por schema Zod e você só quer testar variação

É o mesmo critério que vale pra delegar trabalho em pull requests: agente brilha em volume e alcance, humano brilha no detalhe que só se decide olhando

Pedir ajuste de meio segundo em linguagem natural, ida e volta, costuma custar mais paciência do que abrir o Studio e resolver na mão

E montar 20 variações na mão custa mais paciência ainda

Quanto custa usar o Remotion nesse fluxo

A licença do Remotion é gratuita pra indivíduos e empresas de até 3 pessoas

E olha que massa: nessa faixa você tem todos os recursos e uso comercial ilimitado

Dá até pra passar "free-license" na opção licenseKey pra declarar elegibilidade e silenciar o aviso no console

A partir de 4 pessoas, o time ou empresa precisa da Company License

Tome cuidado com um detalhe aqui: em colaborações entre times ou empresas, vale o headcount somado

São duas modalidades:

• Remotion for Creators: US$ 25 por seat por mês, sem mínimo de seats e sem gasto mínimo quando comprado sozinho
• Remotion for Automators: US$ 0,01 por render, com gasto mínimo de US$ 100 por mês

E lembra do outro lado da conta: o fluxo com Claude Code exige assinatura paga do Claude Code

Conclusão

A Remotion skill não te dispensa de saber React

Ela encurta a distância entre a ideia e a composição, que é bem diferente

O agente ganha o vocabulário do framework, você ganha velocidade na estrutura, e o Studio continua sendo o lugar de acertar o detalhe

Próximo passo concreto: instala as skills num projeto Remotion, pede uma composição simples pro agente, abre o npx remotion studio pra conferir e só depois renderiza

Faça o teste e tira sua própria conclusão sobre onde vale pedir e onde vale editar 🙂

até o próximo post!