# Remotion Best Practices

> Práticas recomendadas para Remotion - Criação de vídeos em React

- Skill: `artubss/remotion-best-practices` (Agent Skill, multi-file: 32 files)
- Install (CLI): `npx skillmds@latest add artubss/remotion-best-practices`
- Raw SKILL.md: https://api.skillmd.com/api/skills/artubss/remotion-best-practices/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: artubss (https://skillmd.com/u/artubss)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/artubss/remotion-best-practices

---


## Quando usar

Use essas competências sempre que estiver trabalhando com código Remotion para obter conhecimento específico do domínio.

## Como usar

Leia os arquivos de regras individuais para explicações detalhadas e exemplos de código:

- [rules/3d.md](rules/3d.md) - Conteúdo 3D em Remotion usando Three.js e React Three Fiber
- [rules/animations.md](rules/animations.md) - Habilidades fundamentais de animação para Remotion
- [rules/assets.md](rules/assets.md) - Importando imagens, vídeos, áudio e fontes em Remotion
- [rules/audio.md](rules/audio.md) - Usando áudio e som em Remotion - importação, corte, volume, velocidade, tom
- [rules/calculate-metadata.md](rules/calculate-metadata.md) - Definindo dinamicamente duração, dimensões e props da composição
- [rules/can-decode.md](rules/can-decode.md) - Verificar se um vídeo pode ser decodificado pelo navegador usando Mediabunny
- [rules/charts.md](rules/charts.md) - Padrões de gráficos e visualização de dados para Remotion
- [rules/compositions.md](rules/compositions.md) - Definindo composições, stills, pastas, props padrão e metadados dinâmicos
- [rules/display-captions.md](rules/display-captions.md) - Exibindo legendas em Remotion com páginas ao estilo TikTok e destaque de palavras
- [rules/extract-frames.md](rules/extract-frames.md) - Extraindo frames de vídeos em timestamps específicos usando Mediabunny
- [rules/fonts.md](rules/fonts.md) - Carregando Google Fonts e fontes locais em Remotion
- [rules/get-audio-duration.md](rules/get-audio-duration.md) - Obtendo a duração de um arquivo de áudio em segundos com Mediabunny
- [rules/get-video-dimensions.md](rules/get-video-dimensions.md) - Obtendo largura e altura de um arquivo de vídeo com Mediabunny
- [rules/get-video-duration.md](rules/get-video-duration.md) - Obtendo a duração de um arquivo de vídeo em segundos com Mediabunny
- [rules/gifs.md](rules/gifs.md) - Exibindo GIFs sincronizados com a timeline do Remotion
- [rules/images.md](rules/images.md) - Incorporando imagens em Remotion usando o componente Img
- [rules/import-srt-captions.md](rules/import-srt-captions.md) - Importando arquivos de legenda .srt em Remotion usando @remotion/captions
- [rules/lottie.md](rules/lottie.md) - Incorporando animações Lottie em Remotion
- [rules/measuring-dom-nodes.md](rules/measuring-dom-nodes.md) - Medindo dimensões de elementos DOM em Remotion
- [rules/measuring-text.md](rules/measuring-text.md) - Medindo dimensões de texto, ajustando texto a containers e verificando overflow
- [rules/sequencing.md](rules/sequencing.md) - Padrões de sequenciamento para Remotion - delay, corte, limitação de duração de itens
- [rules/tailwind.md](rules/tailwind.md) - Usando TailwindCSS em Remotion
- [rules/text-animations.md](rules/text-animations.md) - Padrões de tipografia e animação de texto para Remotion
- [rules/timing.md](rules/timing.md) - Curvas de interpolação em Remotion - animações linear, easing, spring
- [rules/transcribe-captions.md](rules/transcribe-captions.md) - Transcrevendo áudio para gerar legendas em Remotion
- [rules/transitions.md](rules/transitions.md) - Padrões de transição de cena para Remotion
- [rules/trimming.md](rules/trimming.md) - Padrões de corte para Remotion - corte do início ou fim de animações
- [rules/videos.md](rules/videos.md) - Incorporando vídeos em Remotion - corte, volume, velocidade, loop, tom