home / skills / coleam00 / second-brain-skills / remotion
This skill helps you create and optimize Remotion video projects by applying domain-specific best practices for compositions, assets, and animations.
npx playbooks add skill coleam00/second-brain-skills --skill remotionReview the files below or copy the command above to add this skill to your agents.
---
name: remotion-best-practices
description: |
Create and edit Remotion videos with domain-specific knowledge.
TRIGGERS - Use this skill when:
- User mentions "Remotion" in their request
- User references a Remotion project path (remotion-videos/*, contains remotion.config.ts)
- User asks to create, animate, or edit video content in a Remotion context
- User wants to build compositions, animations, or video sequences in React
Always invoke this skill BEFORE writing any Remotion code.
metadata:
tags: remotion, video, react, animation, composition
---
## When to use
Use this skill whenever you are working with Remotion projects. This includes:
- Creating new video compositions or animations
- Editing existing Remotion components
- Adding assets (images, audio, video) to a Remotion project
- Building animated sequences, transitions, or effects
- Any task involving a Remotion project directory
**Key triggers:** The word "Remotion", paths containing `remotion-videos/`, files like `remotion.config.ts`, or requests to create animated video content in React.
## How to use
Read individual rule files for detailed explanations and code examples:
- [rules/3d.md](rules/3d.md) - 3D content in Remotion using Three.js and React Three Fiber
- [rules/animations.md](rules/animations.md) - Fundamental animation skills for Remotion
- [rules/assets.md](rules/assets.md) - Importing images, videos, audio, and fonts into Remotion
- [rules/audio.md](rules/audio.md) - Using audio and sound in Remotion - importing, trimming, volume, speed, pitch
- [rules/calculate-metadata.md](rules/calculate-metadata.md) - Dynamically set composition duration, dimensions, and props
- [rules/can-decode.md](rules/can-decode.md) - Check if a video can be decoded by the browser using Mediabunny
- [rules/charts.md](rules/charts.md) - Chart and data visualization patterns for Remotion
- [rules/compositions.md](rules/compositions.md) - Defining compositions, stills, folders, default props and dynamic metadata
- [rules/display-captions.md](rules/display-captions.md) - Displaying captions in Remotion with TikTok-style pages and word highlighting
- [rules/extract-frames.md](rules/extract-frames.md) - Extract frames from videos at specific timestamps using Mediabunny
- [rules/fonts.md](rules/fonts.md) - Loading Google Fonts and local fonts in Remotion
- [rules/get-audio-duration.md](rules/get-audio-duration.md) - Getting the duration of an audio file in seconds with Mediabunny
- [rules/get-video-dimensions.md](rules/get-video-dimensions.md) - Getting the width and height of a video file with Mediabunny
- [rules/get-video-duration.md](rules/get-video-duration.md) - Getting the duration of a video file in seconds with Mediabunny
- [rules/gifs.md](rules/gifs.md) - Displaying GIFs synchronized with Remotion's timeline
- [rules/images.md](rules/images.md) - Embedding images in Remotion using the Img component
- [rules/import-srt-captions.md](rules/import-srt-captions.md) - Importing .srt subtitle files into Remotion using @remotion/captions
- [rules/lottie.md](rules/lottie.md) - Embedding Lottie animations in Remotion
- [rules/measuring-dom-nodes.md](rules/measuring-dom-nodes.md) - Measuring DOM element dimensions in Remotion
- [rules/measuring-text.md](rules/measuring-text.md) - Measuring text dimensions, fitting text to containers, and checking overflow
- [rules/sequencing.md](rules/sequencing.md) - Sequencing patterns for Remotion - delay, trim, limit duration of items
- [rules/tailwind.md](rules/tailwind.md) - Using TailwindCSS in Remotion
- [rules/text-animations.md](rules/text-animations.md) - Typography and text animation patterns for Remotion
- [rules/timing.md](rules/timing.md) - Interpolation curves in Remotion - linear, easing, spring animations
- [rules/transcribe-captions.md](rules/transcribe-captions.md) - Transcribing audio to generate captions in Remotion
- [rules/transitions.md](rules/transitions.md) - Scene transition patterns for Remotion
- [rules/trimming.md](rules/trimming.md) - Trimming patterns for Remotion - cut the beginning or end of animations
- [rules/videos.md](rules/videos.md) - Embedding videos in Remotion - trimming, volume, speed, looping, pitch
- [rules/parameters.md](rules/parameters.md) - Make a video parametrizable by adding a Zod schema
- [rules/maps.md](rules/maps.md) - Add a map using Mapbox and animate it
This skill provides domain-specific guidance for creating and editing Remotion videos in React. It bundles practical rules, patterns, and checks to design compositions, animations, assets, audio, and sequencing reliably. Use it to avoid common Remotion pitfalls and produce production-ready renders faster.
Before writing Remotion code, the skill inspects the project context and applies targeted recommendations from modular rule sets (animations, assets, audio, compositions, timing, transitions, etc.). It surfaces concrete patterns, API usage, and small code strategies for tasks like loading fonts, sequencing clips, trimming media, and syncing captions. The skill also points to utilities for measuring text/dom nodes, getting media metadata, and validating parameters.
Do I need to run this skill before writing any Remotion code?
Yes — invoke it first so recommendations and patterns are applied before generating components or compositions.
How do I get media duration or dimensions?
Use the provided utilities (e.g., Mediabunny helpers) to decode files and return duration and width/height before composing.
Can I animate 3D content?
Yes — use the 3D rules that combine React Three Fiber and Three.js patterns adapted for Remotion.