Master Remotion Video Creation Best Practices

This skill provides domain-specific Remotion knowledge through 26 individual rule files, each covering a distinct area of Remotion video-code development with detailed explanations and code examples. Visual and rendering rules cover 3D content via Three.js and React Three Fiber, fundamental animation skills, chart and data-visualization patterns, and interpolation curves (linear, easing, spring) for timing. Media-handling rules cover importing images, video, audio, and fonts as assets; embedding images via the Img component; embedding and syncing GIFs with Remotion's timeline; embedding Lottie animations; and audio-specific work like trimming, volume, speed, and pitch alongside the same controls for video.

Composition and structure rules cover defining compositions, stills, folders, default props, and dynamic metadata; calculating composition duration, dimensions, and props dynamically; sequencing patterns for delaying, trimming, and limiting the duration of items; and dedicated trimming patterns for cutting the start or end of animations. Text and typography rules cover typography and text-animation patterns, measuring text dimensions and fitting text to containers or checking overflow, and measuring DOM element dimensions more generally. Caption rules cover displaying TikTok-style captions with word highlighting, importing .srt subtitle files via @remotion/captions, and transcribing audio to generate captions. Video-inspection rules use Mediabunny to check whether a video can be decoded by the browser, and to get audio duration, video duration, and video dimensions. Styling and transition rules cover using TailwindCSS in Remotion and scene-transition patterns.

Use this skill whenever working with Remotion code and needing the domain-specific knowledge behind it - reading the individual rule file matching the task at hand rather than guessing at Remotion's APIs and conventions. Use it only when the task clearly matches one of the areas above; it isn't a substitute for environment-specific validation, testing, or expert review, and it should stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

Input is the specific Remotion task at hand (animation, media embedding, composition structure, captions, or video inspection). Output is the matching rule file's guidance and code examples, applied to that task.

It covers Remotion's own APIs plus its ecosystem integrations: Three.js and React Three Fiber for 3D, Mediabunny for video/audio inspection and frame extraction, @remotion/captions for subtitle import, and TailwindCSS for styling.

Developers building Remotion video projects who need targeted, topic-specific guidance - animation, media embedding, composition structure, captions, or video inspection - rather than searching Remotion's full documentation from scratch.