remotion-best-practices (remotion-dev/skills)
Encaminha tarefas do Remotion para o guia certo: criação de vídeo, marcação, mapas, multimídia e interatividade.
Skill Remotion: mesma qualidade de vídeo que sem skill e que uma frase das suas regras, com 1.4x os tokens
Codex CLI · gpt-6-astra
22.9 / 30
Ganho sobre sem skill: -0.01 · Situacional · 18 execuções
Situacional: o ganho -0.01 está abaixo de +1.0. Para ser recomendado, é preciso total de 22/30, qualidade da saída de 3.5 e ganho de +1.0.
SOTA
AprovadoTestado com Codex.
Cobre Codex, Claude Code
Codex CLI 0.166 (nível SOTA): 18 execuções avaliadas. Uma aprovação aqui também vale para o Claude Code pela nossa regra de níveis; ela não diz nada sobre o segundo nível.
Notas
Cada dimensão vai de 0 a 5, e as seis somam o total de 30. 5 é melhor em todas as dimensões. Custo 5 significa barato e rápido. Instalação 5 significa fácil.
- Confiabilidade do acionamento
- 5.0
- Ganho sobre sem skill
- 2.0
- Qualidade da saída
- 4.9
- Custo de tokens e tempo
- 3.0
- Instalação e portabilidade
- 4.0
- Segurança
- 4.0
Revisão de segurança
SeguroVarredura estática: 13 CRÍTICO / 16 ALTO / 0 MÉDIO. Revisão manual: seguro para executar (sandbox sem rede). Uma varredura limpa não prova que a skill é segura.
Instalar
npx skills@latest add remotion-dev/skills --skill remotion-best-practices
Commit fixado: 30d4553ecd46fbc5212fd0ff006ae43af522158b
Testado: 2026-11-02
O que testamos
- Teaser de produto de 15 s — Neste projeto Remotion (componentes React em src/, id de composição 'Main', renderizado por npx remotion render src/index.ts Main), crie um teaser de produto de 15 segundos, 1920x1080, 30 fps, para a Tidepool, uma assinatura mensal de snacks de alga. Texto obrigatório na tela: …
- Explicativo animado de gráfico de barras de 20 s — Neste projeto Remotion (componentes React em src/, id de composição 'Main', renderizado por npx remotion render src/index.ts Main), crie um explicativo animado de 20 segundos, 1920x1080, 30 fps: um gráfico de barras da receita mensal (ago $42k, set $58k, out $71k). Título 'Receita…'
- Vídeo curto vertical legendado de 30 s — Neste projeto Remotion (componentes React em src/, id de composição 'Main', renderizado por npx remotion render src/index.ts Main), crie um vídeo curto vertical para redes sociais de 30 segundos, 1080x1920, 30 fps, com legendas embutidas. Legendas, em ordem, cada uma na tela por cerca de 5 se…
Prós
- A skill foi acionada sem ser nomeada: o arquivo da skill foi lido em 6/6 execuções de tratamento.
- Qualidade absoluta alta com a skill: 4.91 de 5.
Contras
- Nenhum ganho mensurável em relação ao grupo sem skill (-0.01, dentro do ruído).
- Um prompt de uma frase marcou 4.89, contra 4.91 com a skill (+0.02).
- O grupo de controle já marca 4.91: efeito teto, então o teste não consegue mostrar ganho.
- n=2 por tarefa por braço; diferenças abaixo de cerca de 1 ponto são ruído.
Avaliação
Codex CLI 0.166 (gpt-6-astra, raciocínio baixo) em uma máquina de teste Mac, com um projeto temporário novo e HOME/TMPDIR/caches temporários a cada execução, skill instalada (tratamento), ausente (grupo de controle) ou ausente com o requisito central da skill comprimido em uma frase anexada ao prompt (grupo com prompt de uma frase), 2 execuções por grupo por tarefa, rede desligada, gravações em /tmp bloqueadas. Os prompts nunca mencionam a skill (exceto pelo texto indicado abaixo). Ambiente: o template do projeto (projeto Remotion com id de composição Main) é o mesmo para todos os grupos. O sandbox não tem rede nem ferramentas do Remotion, então nenhum dos grupos conseguiu iniciar o Studio ou renderizar; eles escreveram apenas o código-fonte. Depois, renderizamos cada projeto em uma máquina offline separada com Remotion 4.0.539. A etapa de 'abrir a prévia primeiro' da skill não pôde acontecer.
Comparação entre os braços
| Braço | Nota média (0-5) | Tokens por execução |
|---|---|---|
| Sem a skill | 4.91 | 159k |
| Prompt de uma frase | 4.89 | 156k |
| Com a skill | 4.91 | 217k |
Medido com Codex CLI em 18 execuções, com pontuação por verificações baseadas em regras e sem juiz LLM. Total 22.9 / 30, veredito Situacional.
Veredito: Situacional (22.9 / 30). Fonte: remotion-dev/skills, skills/remotion-best-practices, fixado no commit 30d4553. Instalação: npx skills@latest add remotion-dev/skills --skill remotion-best-practices. Licença: Remotion License (uso por empresas com mais de 3 pessoas exige licença paga; apenas avaliação).
O que é
A skill remotion-best-practices, o roteador do conjunto oficial de skills do Remotion (remotion-dev/skills, versão 4.0.539, Remotion License). O SKILL.md (cerca de 600 palavras) encaminha o agente para sub-skills: criar um vídeo, boas práticas de marcação (conduzir a animação com useCurrentFrame() e interpolate(), obter o fps de useVideoConfig(), sem transições CSS nem classes de animação do Tailwind), mapas, legendas, studio, renderização e mais. Cerca de 12 sub-skills de Markdown, dois pequenos scripts .mjs locais. Ela também diz ao agente para abrir a prévia do Remotion Studio e não renderizar a menos que seja pedido.
Como testamos
Codex CLI 0.166 (gpt-6-astra, raciocínio baixo) em uma máquina de testes Mac, com um projeto temporário novo e HOME/TMPDIR/caches temporários a cada execução, skill instalada (com a skill), ausente (controle) ou ausente com o requisito central da skill comprimido em uma frase anexada ao prompt (grupo do prompt de uma frase), 2 execuções por grupo por tarefa, rede desativada, gravações em /tmp bloqueadas. Os prompts nunca mencionam a skill (exceto pelo texto indicado abaixo).
Ambiente: o template do projeto (projeto Remotion com id de composição Main) é o mesmo para todos os grupos. O sandbox não tem rede nem ferramentas do Remotion, então nenhum dos grupos conseguiu iniciar o Studio ou renderizar; eles escreveram apenas o código-fonte. Depois, renderizamos cada projeto em uma máquina offline separada com Remotion 4.0.539. A etapa "abrir a prévia primeiro" da skill não pôde acontecer.
- Teaser de produto de 15 s — Neste projeto Remotion (componentes React em src/, id de composição 'Main', renderizado por
npx remotion render src/index.ts Main) construa um teaser de produto de 15 segundos, 1920x1080, 30 fps, para a Tidepool, uma assinatura mensal de snacks de algas. Texto obrigatório na tela: o… - Explicador animado de gráfico de barras de 20 s — Neste projeto Remotion (componentes React em src/, id de composição 'Main', renderizado por
npx remotion render src/index.ts Main) construa um explicador animado de 20 segundos, 1920x1080, 30 fps: um gráfico de barras da receita mensal (ago $42k, set $58k, out $71k). Título 'Reven… - Short vertical legendado de 30 s — Neste projeto Remotion (componentes React em src/, id de composição 'Main', renderizado por
npx remotion render src/index.ts Main) construa um short social vertical de 30 segundos, 1080x1920, 30 fps, com legendas embutidas. Legendas, na ordem, cada uma na tela por cerca de 5 se…
A pontuação é programática (testes ocultos / recuperação de problemas plantados / verificações de restrições / renderização+OCR quando relevante), 0–5 por execução. Nenhum juiz LLM decidiu qualquer pontuação.
Resultados
A frase única dada ao terceiro grupo: "Conduza toda animação com useCurrentFrame() e interpolate()/spring() (nunca transition/animation CSS), obtenha o fps de useVideoConfig() e converta segundos em quadros com ele, e estruture o vídeo como cenas <Sequence>/<Series> dentro da composição."
| Tarefa | Pontuação do controle | Prompt de uma frase | Com a skill | Tokens do controle | Tokens do prompt de uma frase | Tokens com a skill | Skill lida |
|---|---|---|---|---|---|---|---|
| t1-teaser | 5.0 | 4.93 | 5.0 | 230k | 168k | 254k | 2/2 |
| t2-chart | 4.74 | 4.73 | 4.71 | 121k | 168k | 198k | 2/2 |
| t3-vertical | 5.0 | 5.0 | 5.0 | 124k | 129k | 197k | 2/2 |
Pontuação média: 4.91 sem a skill vs 4.91 com a skill (delta -0.01). Tokens por execução: 159k vs 217k (1.36x); tempo 161s vs 177s. Grupo prompt de uma frase: 4.89 (ganho da skill sobre o prompt de uma frase: +0.02; ganho do próprio prompt de uma frase sobre nenhuma skill: -0.03); tokens do prompt de uma frase: 156k por execução, então a skill custa 1.39x o prompt de uma frase.
O que aconteceu
- A qualidade dos vídeos foi a mesma. Todos os 18 projetos renderizaram no tamanho, duração e taxa de quadros corretos, e o OCR encontrou todos os textos obrigatórios (nome, slogan, $14 / caixa, frase final, título do gráfico, legendas) em cada um deles. Pontuação média 4.91 sem a skill, 4.89 com apenas uma versão em uma frase de suas regras, 4.91 com a skill. Os únicos pontos perdidos, em todos os grupos, vêm do explicador de gráfico de barras que fica parado por longos trechos (15-23% dos quadros com movimento) e de dois teasers do prompt de uma frase com 48-52%.
- Vimos folhas de contato do teaser dos três grupos: todos parecem anúncios de produto finalizados (cenas creme e verde-escuro, ilustração de um pacote, cartão final com preço) e não conseguimos classificá-los.
- A principal regra concreta da skill foi seguida com ou sem ela. Lendo o código-fonte: nos 6 projetos sem skill, nenhum chama
useVideoConfig()(eles fixam 30 fps no código); em todos os 6 projetos com a skill e todos os 6 do prompt de uma frase ele é usado, e nenhum projeto de nenhum grupo usa transições CSS ou keyframes. Então a frase única carregou a mesma regra, e os agentes já animam comuseCurrentFrame()einterpolate()sem que seja pedido. - A skill é lida sempre (6/6 execuções com a skill) e custa mais: 217k tokens por execução contra 159k sem ela (1.36x) e 156k com o prompt de uma frase (1.39x), 14 comandos contra 9. É o menor custo extra entre as três skills de vídeo que testamos.
- Parte dela não pôde rodar. A primeira instrução da skill é iniciar o Remotion Studio e abrir uma prévia antes de construir; sem rede e sem ferramentas, isso não aconteceu, então o resultado reflete apenas o texto da skill.
Pontuações por dimensão
| Dimensão | Pontuação | Por quê |
|---|---|---|
| 1_output_quality | 4.91 | Pontuação média de 4.91/5 com a skill (verificações programáticas, veja a tabela por tarefa). |
| 2_lift_vs_no_skill | 1.99 | -0.01 pontos vs 4.91 sem a skill (n=2 por tarefa; abaixo de ~1 ponto é ruído). |
| 3_trigger | 5.0 | Arquivo da skill lido em 6/6 execuções com a skill. |
| 4_instructions_portability | 4 | Skill roteadora com muitos arquivos de sub-skill; a regra "abrir o Studio primeiro" precisa de um navegador e de um servidor de desenvolvimento em execução, que muitos sandboxes de agente não têm. |
| 5_efficiency | 3 | 1.36x tokens (217k vs 159k por execução) e 1.10x tempo (177s vs 161s). |
| 6_safety_hygiene | 4 | Markdown mais dois scripts .mjs locais (sem rede, sem exec); os achados do scanner são .env/process.env em exemplos de documentação (chaves Mapbox, ElevenLabs). A Remotion License exige uma licença paga para empresas com mais de três pessoas. |
Limites deste teste
- Sem prévia no Studio, sem renderização e sem a CLI do Remotion no sandbox, então o fluxo da skill foi exercitado apenas em parte.
- Três tarefas desenhadas em código (teaser, gráfico de barras, short vertical com legendas); filmagens, áudio, legendas a partir de fala, mapas, Lottie, 3D e os recursos de renderização SaaS não foram testados.
- As renderizações são em Linux com GL por software e a verificação de movimento é um limite grosseiro de diferença entre quadros; a tarefa de gráfico perde pontos em todos os grupos.
- As contagens de
useVideoConfigvêm da leitura do código-fonte e não fazem parte da pontuação de 0-30. - Remotion License: gratuita para indivíduos e empresas de até três pessoas, paga acima disso; nós apenas avaliamos e não redistribuímos.
- n = 2 por grupo por tarefa: diferenças abaixo de ~1 ponto são ruído.
- A pontuação baseada em regras mede o que as verificações conseguem ver; ela não julga bom gosto nem se o resultado é o melhor possível.
Segurança
Consulte security.md. Varredura: 13 CRITICAL / 16 HIGH / 0 MEDIUM. Veredito: seguro para executar (sandbox sem rede). Uma varredura limpa não prova que uma skill é segura.
Conclusão
Para vídeos avulsos desenhados em código, a skill não fez diferença mensurável: o agente já escreve código Remotion sólido, e uma frase com a regra principal da skill reproduziu seu pequeno efeito estrutural com cerca de 0.7x o custo. Ela é barata o suficiente para deixar instalada se você constrói projetos Remotion com frequência (as sub-skills cobrem mapas, legendas e renderização que não testamos), mas não há evidência aqui de que ela melhore um vídeo simples.
Transcrição
Log de execuções: remotion-best-practices (Codex CLI, network off, per-run temp HOME/TMPDIR, one row per graded run.) Colunas: tarefa, grupo-execução, nota (0-5), tokens, segundos, verificações aprovadas, arquivos da skill abertos pelo agente. t1-teaser control-1: nota 5.0, tokens 258594, s 285.6, verificações 5/5, nada aberto t1-teaser control-2: nota 5.0, tokens 202623, s 189.4, verificações 5/5, nada aberto t1-teaser oneliner-1: nota 4.94, tokens 218510, s 266.6, verificações 5/5, nada aberto t1-teaser oneliner-2: nota 4.92, tokens 118109, s 174.8, verificações 5/5, nada aberto t1-teaser treatment-1: nota 5.0, tokens 217450, s 209.8, verificações 5/5, abriu remotion-best-practices t1-teaser treatment-2: nota 5.0, tokens 291582, s 227.3, verificações 5/5, abriu remotion-best-practices t2-chart control-1: nota 4.73, tokens 130647, s 112.9, verificações 4/5, nada aberto t2-chart control-2: nota 4.74, tokens 112740, s 110.9, verificações 4/5, nada aberto t2-chart oneliner-1: nota 4.73, tokens 140990, s 152.9, verificações 4/5, nada aberto
18 execuções, 21 artefatos
Resultado de exemplo
SOTA · With the skill: src/Tidepool.tsx (t1-teaser, run 1, Codex)
import React from 'react'; import {AbsoluteFill, Sequence, interpolate, Easing, useCurrentFrame, useVideoConfig} from 'remotion'; const cream = '#F6F1DF', ink = '#123E36', lime = '#D9EF79', orange = '#FF8552'; const serif = 'Georgia, "Times New Roman", serif'; const easing = {extrapolateLeft: 'clamp' as const, extrapolateRight: 'clamp' as const, easing: Easing.bezier(.16, 1, .3, 1)}; const Enter: React.FC<{children: React.ReactNode; delay?: number; style?: React.CSSProperties}> = ({children, delay = 0, style}) => { const f = useCurrentFrame(); return <div style={{...style, opacity: interpolate(f, [delay, delay + 18], [0, 1], easing), translate: `0 ${interpolate(f, [delay, delay + 23], [60, 0], easing)}px`}}>{children}</div>; }; const Wave = ({color = ink, bottom = -100}: {color?: string; bottom?: number}) => { const f = useCurrentFrame(); return <svg width="2200" height="300" viewBox="0 0 2200 300" style={{position: 'absolute', left: -100, bottom, translate: `${Math.sin(f / 65) * 65}px 0`}}><path d="M0 95 Q275 -15 550 95 T1100 95 T1650 95 T2200 95 V300 H0Z" fill={color}/><path d="M0 60 Q275 -50 550 60 T1100 60 T1650 60 T2200 60" fill="none" stroke={color} strokeWidth="2"/></svg>; }; const Pouch = () => { const f = useCurrentFrame(); return <div style={{width: 420, height: 610, position: 'relative', rotate: `${-7 + Math.sin(f / 40) * 1.5}deg`, translate: `0 ${Math.sin(f / 28) * 9}px`, filter: 'drop-shadow(18px 25px 0 rgba(18,62,54,.13))'}}> <svg width="420" height="610" viewBox="0 0 420 610" style={{position: 'absolute'}}> <path d="M26 5 H394 L382 55 L407 573 Q411 600 380 604 H40 Q9 600 13 573 L38 55Z" fill={lime} stroke={ink} strokeWidth="3"/> <path d="M29 18 H391 M32 29 H388 M35 43 H385 M22 577 H398 M22 587 H398" stroke={ink} strokeWidth="2" opacity=".35"/> <path d="M22 472 Q120 427 210 477 T399 477 L404 571 H16Z" fill={ink}/> <path d="M25 455 Q120 410 210 460 T397 460" fill="none" stroke={ink} strokeWidth="3"/> </svg> <div style={{position: 'absolute', top: 77, width: '100%', textAlign: 'center', color: ink}}> <div style={{fontSize: 65, fontFamily: serif, letterSpacing: -4}}>Tidepool</div> <div style={{fontSize: 15, letterSpacing: 4, marginTop: 15}}>SEAWEED SNACKS</div> <svg width="190" height="210" viewBox="0 0 190 210" fill="none" style={{marginTop: 18}}><path d="M96 203 C67 143 135 95 96 12 M96 164 C28 163 29 115 45 100 C48 138 85 116 96 164 M99 118 C157 119 163 70 143 59 C143 89 108 79 99 118 M100 71 C57 74 55 36 66 24 C72 49 94 37 100 71" stroke={ink} strokeWidth="9" strokeLinecap="round"/></svg> <div style={{fontSize: 18, letterSpacing: 3, marginTop: 9}}>A LITTLE OCEAN JOY</div> </div> <div style={{position: 'absolute', top: 513, width: '100%', textAlign: 'center', color: cream, fontSize: 20, letterSpacing: 3}}>CRISP • SAVORY • SEAWEED</div> </div>; }; const Chip = ({x, y, angle, index}: {x: number; y: number; angle: number; index: number}) => { const f = useCurrentFrame(); return <svg width="340" height="260" viewBox="0 0 260 200" style={{position: 'absolute', left: x, top: y, rotate: `${angle + Math.sin(f / 35 + index) * 6}deg`, translate: `0 [... excerpt: first 3200 of 8030 characters]