remotion-best-practices
$
npx mdskill add vercel-labs/json-render/remotion-best-practicesMaster Remotion best practices for building complex, high-quality video content within React.
- Guides development on structuring video projects, handling assets, and managing dynamic metadata.
- Integrates knowledge regarding Three.js, audio manipulation, and frame extraction utilities.
- Provides structured documentation by referencing specific rules for various video components.
- Delivers detailed, actionable guides and code examples for implementing advanced video features.
SKILL.md
.github/skills/remotion-best-practicesView on GitHub ↗
--- name: remotion-best-practices description: Best practices for Remotion - Video creation in React metadata: tags: remotion, video, react, animation, composition --- ## When to use Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge. ## Captions When dealing with captions or subtitles, load the [./rules/subtitles.md](./rules/subtitles.md) file for more information. ## 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/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/light-leaks.md](rules/light-leaks.md) - Light leak overlay effects using @remotion/light-leaks - [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/transitions.md](rules/transitions.md) - Scene transition patterns for Remotion - [rules/transparent-videos.md](rules/transparent-videos.md) - Rendering out a video with transparency - [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
More from vercel-labs/json-render
- codegenCode generation utilities for json-render. Use when generating code from UI specs, building custom code exporters, traversing specs, or serializing props for @json-render/codegen.
- devtoolsDrop-in inspector panel for any json-render app. Use when the user wants to debug a generative UI, inspect the spec tree, edit state at runtime, see dispatched actions, follow stream patches live, browse a catalog, or pick DOM elements to find their spec keys. Triggers include "add devtools", "debug json-render", "inspect the spec", "why is this element not rendering", "see the state at runtime", or requests to tap streams / capture action logs for `@json-render/devtools`.
- directivesPre-built custom directives for json-render — formatting, math, string manipulation, and i18n. Use when working with @json-render/directives, defining custom directives with defineDirective, or adding $format, $math, $concat, $count, $truncate, $pluralize, $join, or $t to specs.
- imageImage renderer for json-render that turns JSON specs into SVG and PNG images via Satori. Use when working with @json-render/image, generating OG images from JSON, creating social cards, or rendering AI-generated image specs.
- inkInk terminal renderer for json-render that turns JSON specs into interactive terminal UIs. Use when working with @json-render/ink, building terminal UIs from JSON, creating terminal component catalogs, or rendering AI-generated specs in the terminal.
- jotaiJotai adapter for json-render's StateStore interface. Use when integrating json-render with Jotai for state management via @json-render/jotai.
- mcpMCP Apps integration for json-render. Use when building MCP servers that render interactive UIs in Claude, ChatGPT, Cursor, or VS Code, or when integrating json-render with the Model Context Protocol.
- nextNext.js renderer for json-render that turns JSON specs into full Next.js applications with routes, layouts, SSR, and metadata. Use when working with @json-render/next, building Next.js apps from JSON specs, or creating AI-generated multi-page applications.
- reactReact renderer for json-render that turns JSON specs into React components. Use when working with @json-render/react, building React UIs from JSON, creating component catalogs, or rendering AI-generated specs.
- react-emailReact Email renderer for json-render that turns JSON specs into HTML or plain-text emails using @react-email/components and @react-email/render. Use when working with @json-render/react-email, building transactional or marketing emails from JSON, creating email catalogs, rendering AI-generated email specs, or when the user mentions react-email, HTML email, or transactional email.