skills.rest
l0lxl0lw
l0lxl0lwCOMMUNITY
Explore all skills by this author →
GitHub

remotion-best-practices

Provides domain-specific best practices for building videos programmatically with Remotion in React.

Updated Dec 18, 2025
Search Tags:#react#captions#animation#ffmpeg#video generation#remotion#programmatic video
One-click install
npx skills add https://github.com/l0lxl0lw/dotfiles --skill remotion-best-practices-l0lxl0lw
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion-best-practices
Source: https://github.com/l0lxl0lw/dotfiles/tree/main/ai/shared/skills/integrations/remotion
Command: npx skills add https://github.com/l0lxl0lw/dotfiles --skill remotion-best-practices-l0lxl0lw

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Writing Remotion video code without domain knowledge leads to common mistakes like CSS animations that flicker during rendering, incorrect asset loading, and mistimed sequences. This Skill supplies curated rules and code patterns so generated Remotion code renders correctly. ## Core Features & Use Cases - Animation & Timing Rules: Enforces useCurrentFrame()-driven animations, spring physics, easing curves, and sequencing patterns that render correctly frame-by-frame. - Media Handling: Covers importing images, videos, audio, GIFs, Lottie files, and fonts, plus trimming, volume control, and FFmpeg-based operations. - Captions & Subtitles: Guides transcription, SRT import, and TikTok-style caption display with word highlighting. - Use Case: When asked to build a product promo video in React, the Skill loads the relevant rule files so the composition uses <Sequence> timing, staticFile() assets, and frame-driven animations instead of forbidden CSS transitions. ## Quick Start Use the remotion-best-practices skill to create a Remotion composition with a fade-in title and background music.

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 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 with parseSrt(), and display TikTok-style pages using createTikTokStyleCaptions() with word-level highlighting.

Can I use TailwindCSS with Remotion?▼

Yes, TailwindCSS works in Remotion if it is installed and enabled in the project. However, you must avoid transition-* and animate-* classes and instead animate using the useCurrentFrame() hook.

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.

Why does my Remotion animation flicker during rendering?▼

Flickering happens when animations are not driven by useCurrentFrame(), such as CSS animations, useFrame() from React Three Fiber, or third-party library animations. Disable external animation systems and compute all motion from the current frame.

Related Skills

Explore More Software Engineering Skills→
davide97gdavide97g
2

remotion-best-practices

Create programmatic videos in React using Remotion compositions, animations, and media components.

Community
Advanced
openaiopenai
5.3k

remotion-render

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

Official
Basic
chmonitorchmonitor
255

hyperframes-media

Generate audio, captions, and background-removed visuals for HyperFrames video compositions.

Official
Advanced
0xKobold0xKobold
4

video-frames

Extract video frames and thumbnails using an FFmpeg-based script.

Official
Intermediate