remotion-video-creation
Guides your agent in creating videos using React with the Remotion library. It covers best practices for animations, audio, captions, and other visual elements.
What it does
This tool helps you create videos using the Remotion library in React. It provides rules and examples for adding animations, audio, captions, charts, and transitions to your videos.
When to use it
- ✓When creating animated videos with React and Remotion.
- ✓When you need to add captions or audio to your videos.
- ✓When using charts or transitions in your video projects.
Example of what to ask your AI
“How can I add captions to a Remotion video using an SRT file?”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
This tool contains a set of rules and examples for using the Remotion library. By consulting the specific rules, you will find detailed instructions and code snippets to implement various video functionalities.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add affaan-m/ECC --skill remotion-video-creationOr download just the file:
curl -L https://raw.githubusercontent.com/affaan-m/ECC/main/skills/remotion-video-creation/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
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
FAQ
What is Remotion?
Remotion is a library for React that allows you to create videos programmatically. You write React code to define the content and animation of your video.
Do I need to know how to code to use this?
Yes, this tool is for those who are already using or want to learn how to use the Remotion library in React to create videos. It assumes you have some programming knowledge.
What kind of video content can I create?
You can create videos with animations, audio, captions (including TikTok-style captions), charts, transitions, and even 3D content.
Details
Original description by the author
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
Popularity
- GitHub stars
- 280k
- Ranking position
- #267
- License
- MIT
- Updated
- 10/15/2026
Comments
- …
More skills from this repository
accessibility
Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.
affaan-m/ECC
agent-architecture-audit
Makes your agent check if everything is working correctly. It finds and fixes problems in AI systems, ensuring they perform as expected.
affaan-m/ECC
agent-eval
Helps your agent compare different AI coding tools. It measures which one is faster, cheaper, and more reliable for specific tasks.
affaan-m/ECC
agent-harness-construction
Makes your agent better understand how to perform tasks. It optimizes the tools and instructions the agent uses to increase its chances of success.
affaan-m/ECC
Similar skills
hyperframes
Lets your agent create video compositions, animations, and titles in HTML. It's useful for adding synced captions, voiceovers, or music-reactive animations.
nexu-io/open-design
motion-frames
Has your agent create short, looping animations for videos. It generates a video poster that can be used for hero animations or short videos. It's useful for adding motion and visual impact.
nexu-io/open-design
sprite-animation
Lets your agent create a pixel-art style animated explainer slide. It looks like an educational video frame with an animated mascot and kinetic text, ready for recording.
nexu-io/open-design