remotion-video-creation
Orienta seu agente na criação de vídeos usando React com a biblioteca Remotion. Ele cobre boas práticas para animações, áudio, legendas e outros elementos visuais.
O que ela faz
Esta ferramenta ajuda você a criar vídeos usando a biblioteca Remotion em React. Ela fornece regras e exemplos para adicionar animações, áudio, legendas, gráficos e transições aos seus vídeos.
Quando usar
- ✓Ao criar vídeos animados com React e Remotion.
- ✓Quando precisar adicionar legendas ou áudio aos seus vídeos.
- ✓Ao usar gráficos ou transições em seus projetos de vídeo.
Exemplo do que pedir para a IA
“Como posso adicionar legendas a um vídeo Remotion usando um arquivo SRT?”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
Esta ferramenta contém um conjunto de regras e exemplos para usar a biblioteca Remotion. Ao consultar as regras específicas, você encontrará instruções detalhadas e trechos de código para implementar diversas funcionalidades de vídeo.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add affaan-m/ECC --skill remotion-video-creationOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/affaan-m/ECC/main/skills/remotion-video-creation/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
When to use
Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge.
How to use
Read individual rule files for detailed explanations and code examples:
- rules/3d.md - 3D content in Remotion using Three.js and React Three Fiber
- rules/animations.md - Fundamental animation skills for Remotion
- rules/assets.md - Importing images, videos, audio, and fonts into Remotion
- rules/audio.md - Using audio and sound in Remotion - importing, trimming, volume, speed, pitch
- rules/calculate-metadata.md - Dynamically set composition duration, dimensions, and props
- rules/can-decode.md - Check if a video can be decoded by the browser using Mediabunny
- rules/charts.md - Chart and data visualization patterns for Remotion
- rules/compositions.md - Defining compositions, stills, folders, default props and dynamic metadata
- rules/display-captions.md - Displaying captions in Remotion with TikTok-style pages and word highlighting
- rules/extract-frames.md - Extract frames from videos at specific timestamps using Mediabunny
- rules/fonts.md - Loading Google Fonts and local fonts in Remotion
- rules/get-audio-duration.md - Getting the duration of an audio file in seconds with Mediabunny
- rules/get-video-dimensions.md - Getting the width and height of a video file with Mediabunny
- rules/get-video-duration.md - Getting the duration of a video file in seconds with Mediabunny
- rules/gifs.md - Displaying GIFs synchronized with Remotion's timeline
- rules/images.md - Embedding images in Remotion using the Img component
- rules/import-srt-captions.md - Importing .srt subtitle files into Remotion using @remotion/captions
- rules/lottie.md - Embedding Lottie animations in Remotion
- rules/measuring-dom-nodes.md - Measuring DOM element dimensions in Remotion
- rules/measuring-text.md - Measuring text dimensions, fitting text to containers, and checking overflow
- rules/sequencing.md - Sequencing patterns for Remotion - delay, trim, limit duration of items
- rules/tailwind.md - Using TailwindCSS in Remotion
- rules/text-animations.md - Typography and text animation patterns for Remotion
- rules/timing.md - Interpolation curves in Remotion - linear, easing, spring animations
- rules/transcribe-captions.md - Transcribing audio to generate captions in Remotion
- rules/transitions.md - Scene transition patterns for Remotion
- rules/trimming.md - Trimming patterns for Remotion - cut the beginning or end of animations
- rules/videos.md - Embedding videos in Remotion - trimming, volume, speed, looping, pitch
Perguntas frequentes
O que é Remotion?
Remotion é uma biblioteca para React que permite criar vídeos programaticamente. Você escreve código React para definir o conteúdo e a animação do seu vídeo.
Preciso saber programar para usar isso?
Sim, esta ferramenta é para quem já está usando ou quer aprender a usar a biblioteca Remotion em React para criar vídeos. Ela assume que você tem algum conhecimento de programação.
Quais tipos de conteúdo de vídeo posso criar?
Você pode criar vídeos com animações, áudio, legendas (incluindo legendas no estilo TikTok), gráficos, transições e até conteúdo 3D.
Detalhes
Descrição original do autor
Best practices for Remotion - Video creation in React. 29 domain-specific rules covering 3D, animations, audio, captions, charts, transitions, and more. Use when building video in React with Remotion — animations, audio, captions, charts, or transitions.
repo: affaan-m/ECC
Popularidade
- Estrelas no GitHub
- 280 mil
- Posição no ranking
- #267
- Licença
- MIT
- Atualizada em
- 15/10/2026
Comentários
- …
Mais skills deste repositório
accessibility
Ajuda seu agente a criar interfaces que todos possam usar. Garante que sites e aplicativos funcionem bem para pessoas com deficiência, como cegos ou com mobilidade reduzida.
affaan-m/ECC
agent-architecture-audit
Faz seu agente verificar se tudo está funcionando corretamente. Ele encontra e conserta problemas em sistemas de IA, garantindo que funcionem como esperado.
affaan-m/ECC
agent-eval
Ajuda seu agente a comparar diferentes ferramentas de programação de IA. Ele mede qual é mais rápido, barato e confiável para realizar tarefas específicas.
affaan-m/ECC
agent-harness-construction
Faz seu agente entender melhor como realizar tarefas. Ele otimiza as ferramentas e instruções que o agente usa para aumentar suas chances de sucesso.
affaan-m/ECC
Skills parecidas
hyperframes
Faz seu agente criar composições de vídeo, animações e legendas em HTML. É útil para adicionar legendas sincronizadas, narrações ou animações que reagem à música.
nexu-io/open-design
motion-frames
Faz seu agente criar animações curtas e em loop para vídeos. Ele gera um pôster de vídeo que pode ser usado em animações de herói ou vídeos curtos. É útil para adicionar movimento e impacto visual.
nexu-io/open-design
sprite-animation
Permite que seu agente crie um slide animado estilo pixel art. Ele parece um quadro de vídeo educacional com mascote animado e texto dinâmico, pronto para gravação.
nexu-io/open-design