skills.rest
MDSIXONE
MDSIXONECOMMUNITY
Explore all skills by this author →
GitHub

remotion-best-practices

Guides creation of programmatic videos in React using Remotion components and APIs.

Updated Aug 14, 2026
Search Tags:#react#captions#animation#ffmpeg#video generation#remotion#programmatic video
One-click install
npx skills add https://github.com/MDSIXONE/opencode-config --skill remotion-best-practices-mdsixone
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion-best-practices
Source: https://github.com/MDSIXONE/opencode-config/tree/main/skills/remotion-best-practices
Command: npx skills add https://github.com/MDSIXONE/opencode-config --skill remotion-best-practices-mdsixone

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires remotion, @remotion/media, @remotion/captions, @remotion/three, @remotion/lottie, @remotion/google-fonts, @remotion/media-utils, mediabunny, maplibre-gl, @turf/turf, zod, and includes references (resource) and assets (resource) components.

What problem does it solve? Writing videos programmatically with Remotion requires frame-accurate animation, correct asset handling, and knowledge of many specialized APIs; this Skill provides the domain rules and code patterns so generated Remotion code renders correctly the first time. ## Core Features & Use Cases - Project scaffolding and composition setup: Create new Remotion projects, define compositions with width, height, fps, duration, and dynamic metadata via calculateMetadata. - Animation and sequencing patterns: Animate with useCurrentFrame, interpolate, and Bézier easing; delay, trim, and overlap elements with Sequence and Series. - Media and advanced topics: Loadable rule files cover captions, subtitles, audio, video trimming, 3D with Three.js, Lottie, GIFs, fonts, maps with MapLibre, silence detection with FFmpeg, and audio visualization. - Use Case: Ask the assistant to build a TikTok-style captioned video from an audio file; it scaffolds the project, transcribes captions, displays word-highlighted subtitles, and renders a preview frame for verification. ## Quick Start Ask the assistant to create a Remotion video project and animate a title fading in over two seconds at 30 fps.

Frequently Asked Questions about remotion-best-practices

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

FAQPage Schema
How do I create a new Remotion video project?▼

Run npx create-video@latest --yes --blank --no-tailwind my-video in an empty folder, replacing my-video with your project name. Then define compositions in src/Root.tsx with width, height, fps, and durationInFrames.

How do I animate elements in Remotion?▼

Use useCurrentFrame() with interpolate() and Easing.bezier to drive all animations frame by frame. CSS transitions, CSS animations, and Tailwind animation classes are forbidden because they do not render correctly.

Can I use TailwindCSS in a Remotion project?▼

Yes, TailwindCSS can be used once installed and enabled following the official Remotion docs. However, transition-* and animate-* utility classes must be avoided; all motion must come from useCurrentFrame().

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, or display TikTok-style pages with word highlighting via createTikTokStyleCaptions.

Why does my Remotion video flicker during rendering?▼

Flickering usually comes from animations not driven by useCurrentFrame(), such as CSS animations or useFrame() from React Three Fiber. All motion must be deterministic functions of the current frame.

How do I trim a video in Remotion without re-encoding?▼

Use the trimBefore and trimAfter props on the Video component from @remotion/media, with values in frames. Only use FFmpeg command-line trimming when you need a standalone output file, and re-encode to avoid frozen frames.

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
jholhewresjholhewres
3

audio-tts

Convert text to speech and manipulate audio via APIs and command-line tools.

Community
Intermediate
inclusionAIinclusionAI
1.2k

embedded-video-pip-smooth-playback

Re-encode embedded videos to all-intra H.264 for smooth frame-accurate playback in code-driven renderers.

Official
Basic