skills.rest
Tgoldi
TgoldiCOMMUNITY
Explore all skills by this author →
GitHub

remotion-best-practices

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

1|Updated May 10, 2026
Search Tags:#react#captions#animation#ffmpeg#video generation#remotion#programmatic video
One-click install
npx skills add https://github.com/Tgoldi/claude-skills --skill remotion-best-practices-tgoldi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion-best-practices
Source: https://github.com/Tgoldi/claude-skills/tree/main/remotion-best-practices
Command: npx skills add https://github.com/Tgoldi/claude-skills --skill remotion-best-practices-tgoldi

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/gif, @remotion/layout-utils, @remotion/zod-types, @remotion/media-utils, 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 images, videos, audio, GIFs, Lottie, fonts, 3D (Three.js), maps (Mapbox), charts, and audio visualization with copy-paste-ready code. - Captions & Metadata: Guides transcription, SRT import, TikTok-style caption display, and dynamic composition metadata via calculateMetadata and Mediabunny utilities. - Use Case: When asked to build a video with animated captions synced to a voiceover, load this Skill to get the correct @remotion/captions workflow, word highlighting pattern, and audio duration calculation. ## Quick Start Ask the AI to create a Remotion composition with animated text and background music, and it will apply these rules automatically.

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, CSS animations, and Tailwind animate 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. Transcribe audio to generate captions, import existing .srt files with parseSrt(), then display them with createTikTokStyleCaptions() for word-by-word highlighting.

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 FFmpeg via bunx remotion ffmpeg with re-encoding to avoid frozen frames at the start.

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

Yes, install @remotion/three and wrap 3D 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 prevent flickering.

Why does my Remotion animation flicker during rendering?▼

Flickering occurs when animations are not driven by useCurrentFrame(), such as CSS transitions, library-built-in animations, or Mapbox fade effects. Disable third-party animations and compute all motion from the current frame.

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

Use Mediabunny's Input class 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→
openaiopenai
5.3k

remotion-markup

Write Remotion React markup with frame-driven animations, media components, and visual effects.

Official
Advanced
openaiopenai
5.3k

remotion-render

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

Official
Basic
calesthiocalesthio
55.1k

elevenlabs

Generate voiceovers, sound effects, and music using the ElevenLabs API.

Community
Intermediate
gaoqiongxiegaoqiongxie
1

remotion-video

Generate animated MP4 and WebM videos using React and Remotion.

Community
Intermediate