# Remotion > Best practices for Remotion - Video creation in React Use when this capability is needed. - Skill: `tomevault-io/remotion` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/remotion` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/remotion/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/remotion --- > This skill is adapted from the official Remotion Agent Skills. > See [SOURCE.md](SOURCE.md) for attribution details. ## When to use Use this skill whenever you are dealing with Remotion code to obtain the domain-specific knowledge. ## Prerequisites Before starting a new Remotion project, run `scripts/check-prereqs.sh` (in this skill directory). **Interpreting results:** - `"status":"ok"` → proceed - `"status":"missing"` or `"status":"outdated"` → help user install/upgrade **Installation guidance by status:** | Dependency | If missing/outdated | |------------|---------------------| | node | Link to https://nodejs.org/ or suggest `nvm install 20` | | npm | Comes with Node; if missing, Node install is broken | | ffmpeg | macOS: `brew install ffmpeg`. Linux: `apt install ffmpeg`. Windows: https://ffmpeg.org/. Note: Remotion auto-installs if missing during render, so this is soft-fail | **When to skip checks:** - User already has a working Remotion project (check for `package.json` with `remotion` dependency) - User explicitly says they have prerequisites ## Quick start commands ```bash # New project npx create-video@latest my-video # Add to existing React project npm install --save-exact remotion @remotion/cli # Run studio (dev server) npx remotion studio # Render video npx remotion render src/index.ts CompositionId out/video.mp4 ``` ## Official docs For deeper questions beyond this skill's references: https://remotion.dev/docs ## How to use Read individual reference files for detailed explanations and code examples: - [references/3d.md](references/3d.md) - 3D content in Remotion using Three.js and React Three Fiber - [references/animations.md](references/animations.md) - Fundamental animation skills for Remotion - [references/assets.md](references/assets.md) - Importing images, videos, audio, and fonts into Remotion - [references/audio.md](references/audio.md) - Using audio and sound in Remotion - importing, trimming, volume, speed, pitch - [references/calculate-metadata.md](references/calculate-metadata.md) - Dynamically set composition duration, dimensions, and props - [references/can-decode.md](references/can-decode.md) - Check if a video can be decoded by the browser using Mediabunny - [references/charts.md](references/charts.md) - Chart and data visualization patterns for Remotion - [references/compositions.md](references/compositions.md) - Defining compositions, stills, folders, default props and dynamic metadata - [references/display-captions.md](references/display-captions.md) - Displaying captions in Remotion with TikTok-style pages and word highlighting - [references/extract-frames.md](references/extract-frames.md) - Extract frames from videos at specific timestamps using Mediabunny - [references/fonts.md](references/fonts.md) - Loading Google Fonts and local fonts in Remotion - [references/get-audio-duration.md](references/get-audio-duration.md) - Getting the duration of an audio file in seconds with Mediabunny - [references/get-video-dimensions.md](references/get-video-dimensions.md) - Getting the width and height of a video file with Mediabunny - [references/get-video-duration.md](references/get-video-duration.md) - Getting the duration of a video file in seconds with Mediabunny - [references/gifs.md](references/gifs.md) - Displaying GIFs synchronized with Remotion's timeline - [references/images.md](references/images.md) - Embedding images in Remotion using the Img component - [references/import-srt-captions.md](references/import-srt-captions.md) - Importing .srt subtitle files into Remotion using @remotion/captions - [references/lottie.md](references/lottie.md) - Embedding Lottie animations in Remotion - [references/maps.md](references/maps.md) - Add a map using Mapbox and animate it - [references/measuring-dom-nodes.md](references/measuring-dom-nodes.md) - Measuring DOM element dimensions in Remotion - [references/measuring-text.md](references/measuring-text.md) - Measuring text dimensions, fitting text to containers, and checking overflow - [references/parameters.md](references/parameters.md) - Make a video parametrizable by adding a Zod schema - [references/sequencing.md](references/sequencing.md) - Sequencing patterns for Remotion - delay, trim, limit duration of items - [references/tailwind.md](references/tailwind.md) - Using TailwindCSS in Remotion - [references/text-animations.md](references/text-animations.md) - Typography and text animation patterns for Remotion - [references/timing.md](references/timing.md) - Interpolation curves in Remotion - linear, easing, spring animations - [references/transcribe-captions.md](references/transcribe-captions.md) - Transcribing audio to generate captions in Remotion - [references/transitions.md](references/transitions.md) - Scene transition patterns for Remotion - [references/trimming.md](references/trimming.md) - Trimming patterns for Remotion - cut the beginning or end of animations - [references/videos.md](references/videos.md) - Embedding videos in Remotion - trimming, volume, speed, looping, pitch --- ## After Execution After completing the skill output, log feedback to track quality over time. **Priority cascade:** 1. If `scripts/evaluate.sh` exists in this skill directory, run it and use the JSON result 2. Otherwise, self-assess using the scale below **Self-assessment scale:** 1=failed, 2=poor, 3=acceptable, 4=good, 5=excellent **To log feedback**, append one JSON line to `FEEDBACK.jsonl` in this skill directory: ```json {"ts":"","skill":"remotion","version":"","prompt":"","outcome":<1-5>,"note":"","source":"llm","schema_version":1} ``` Then increment `iteration_count` under `compaction` in `CONFIG.yaml`. --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/k7lim) — claim your Tome and manage your conversions.