skills.rest
Rabbit-Ivan
Rabbit-IvanCOMMUNITY
Explore all skills by this author →
GitHub

remotion-best-practices

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

Updated Jan 10, 2026
Search Tags:#react#captions#animation#video generation#remotion#compositions#programmatic video
One-click install
npx skills add https://github.com/Rabbit-Ivan/Ivan-skills --skill remotion-best-practices-rabbit-ivan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion-best-practices
Source: https://github.com/Rabbit-Ivan/Ivan-skills/tree/main/skills/remotion-best-practices
Command: npx skills add https://github.com/Rabbit-Ivan/Ivan-skills --skill remotion-best-practices-rabbit-ivan

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Writing Remotion video code without framework-specific knowledge leads to common failures like flickering animations, broken rendering from CSS transitions, and incorrect asset loading. This Skill supplies the domain rules needed to write correct Remotion compositions. ## Core Features & Use Cases - Animation Rules: Enforces frame-driven animations via useCurrentFrame() and spring/interpolate patterns instead of forbidden CSS transitions. - Media Handling: Covers importing images, videos, audio, fonts, GIFs, and Lottie files using staticFile() and Remotion components. - Specialized Guides: Includes rules for captions/subtitles, audio visualization, charts, 3D with Three.js, Mapbox map animations, FFmpeg trimming, and dynamic metadata via calculateMetadata. - Use Case: When asked to build a TikTok-style captioned video or an animated bar chart in Remotion, load the relevant rule files to get copy-paste-ready code patterns. ## Quick Start Ask the AI to create a Remotion composition with animated captions and it will load the relevant rule files for correct implementation.

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

Can I use TailwindCSS in a Remotion project?▼

Yes, TailwindCSS works in Remotion once installed and enabled per the official docs. However, avoid transition-* and animate-* classes; always animate using the useCurrentFrame() hook instead.

Why does my Remotion video flicker during rendering?▼

Flickering occurs when animations are not driven by useCurrentFrame(), such as CSS animations, useFrame() from React Three Fiber, or third-party library animations. Disable library animations and tie all motion to the current 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 FFmpeg via bunx remotion ffmpeg with re-encoding to avoid frozen frames at the start.

How do I make a Remotion video parametrizable?▼

Add a Zod schema to the composition via the schema prop, with a top-level z.object() defining the props. Users can then edit parameters visually in the Remotion Studio sidebar, including color pickers via zColor() from @remotion/zod-types.

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