skills.rest
X-manist
X-manistCOMMUNITY
Explore all skills by this author →
GitHub

remotion-best-practices

Provides domain rules and code patterns for building videos programmatically with Remotion and React.

Updated Jul 16, 2026
Search Tags:#react#video#captions#composition#animation#ffmpeg#remotion
One-click install
npx skills add https://github.com/X-manist/Cohmira --skill remotion-best-practices-x-manist
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion-best-practices
Source: https://github.com/X-manist/Cohmira/tree/main/src/builtin-plugins/openmontage/.agents/skills/remotion-best-practices
Command: npx skills add https://github.com/X-manist/Cohmira --skill remotion-best-practices-x-manist

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires remotion, @remotion/media, @remotion/captions, @remotion/three, @remotion/lottie, @remotion/google-fonts, @remotion/fonts, @remotion/paths, @remotion/light-leaks, @remotion/layout-utils, @remotion/media-utils, @remotion/zod-types, @remotion/gif, mediabunny, mapbox-gl, @turf/turf, zod, and includes references (resource) components.

What problem does it solve? Writing Remotion video code without framework-specific knowledge leads to common failures like flickering animations, unloaded assets, and broken renders. This Skill supplies the correct patterns for animations, media, captions, and rendering so generated Remotion code works on the first render. ## Core Features & Use Cases - Animation & Timing Rules: Enforces useCurrentFrame()-driven animations, spring configs, easing curves, and sequencing patterns while forbidding CSS transitions that break rendering. - Media Handling: Covers importing images, videos, audio, GIFs, Lottie files, and fonts via staticFile(), plus trimming, volume, pitch, and looping controls. - Captions & Subtitles: Guides transcription, SRT import, TikTok-style caption pages, and word-level highlighting using @remotion/captions. - Advanced Scenarios: Includes 3D with Three.js, Mapbox map animations, audio visualizations, charts, dynamic metadata via calculateMetadata, and FFmpeg trimming workflows. - Use Case: Ask the agent to create a promotional video with animated captions and a voiceover; it loads the relevant rule files and produces correct Remotion composition code. ## Quick Start Create a Remotion composition with a fade-in title, background music, and TikTok-style captions for my video file.

Frequently Asked Questions about remotion-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I animate elements in Remotion?▼

Drive all animations with the useCurrentFrame() hook combined with interpolate() or spring(). CSS transitions and Tailwind animation classes are forbidden because they do not render correctly during video export.

How do I add captions or subtitles to a Remotion video?▼

Use the @remotion/captions package with the Caption type. You can transcribe audio, import .srt files via parseSrt(), then group captions into TikTok-style pages with createTikTokStyleCaptions() and highlight words per frame.

How do I trim a video in Remotion?▼

Use the trimBefore and trimAfter props on the Video component from @remotion/media for non-destructive trimming. Alternatively, run bunx remotion ffmpeg with re-encoding to cut the file on disk.

Can I use Three.js 3D content in Remotion?▼

Yes, install @remotion/three and wrap content in ThreeCanvas with explicit width and height. All 3D animations must be driven by useCurrentFrame(); using useFrame() from @react-three/fiber is forbidden to avoid flickering.

Why does my Remotion animation flicker during rendering?▼

Flickering occurs when animations are not driven by useCurrentFrame(), such as CSS transitions, Tailwind animate classes, or self-animating shaders. Convert all motion to frame-based interpolation or springs.

How do I get a video's duration or dimensions in Remotion?▼

Use Mediabunny's Input with UrlSource or FileSource to call computeDuration() or read the primary video track's displayWidth and displayHeight. These values can feed calculateMetadata to set composition duration and size dynamically.

Related Skills

Explore More Software Engineering Skills→
sunzcdevsunzcdev

remotion-best-practices

Enforce deterministic Remotion implementation rules for media, timing, and overlays.

Community
Intermediate
openaiopenai
5.3k

remotion-render

Render Remotion videos and stills via CLI with transparent ProRes and WebM output options.

Official
Basic
mooch10mooch10
1

doubao-tts

Generate Mandarin narration audio with word-level timestamps using Volcengine Doubao Speech 2.0.

Community
Intermediate
barefootfordbarefootford
589

cut

Builds video edit timelines from processed footage libraries and exports them to NLE editors.

Community
Advanced