skills.rest
hugotown
hugotownCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

remotion-best-practices

Create programmatic videos in React using Remotion components, animations, and rendering rules.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Writing Remotion videos requires frame-driven animation patterns, correct media handling, and deterministic rendering rules that differ from normal React development; this Skill supplies the domain knowledge needed to produce correct Remotion code. ## Core Features & Use Cases - Project scaffolding and composition setup: Create new Remotion projects, define compositions with width, height, fps, and duration, and compute metadata dynamically with calculateMetadata. - Animation and sequencing patterns: Animate with useCurrentFrame, interpolate, and Bézier easing, and control timing with Sequence, Series, and premounting. - Media and effects rules: Loadable rule files cover captions, subtitles, audio, video trimming, FFmpeg, silence detection, audio visualization, 3D with Three.js, Lottie, maps with MapLibre, fonts, transitions, and parameterized videos with Zod schemas. - Use Case: Ask the assistant to build a captioned promotional video with a voiceover, background music, and an animated map route, and it will apply the correct Remotion patterns for each part. ## Quick Start Use the remotion-best-practices skill to scaffold a new Remotion project and create an animated title composition with fade-in text.

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 followed by your project name in an empty folder. Then define compositions in src/Root.tsx with width, height, fps, and durationInFrames, and preview with npx remotion studio.

How do I animate elements in Remotion?▼

Animate with useCurrentFrame() and interpolate(), optionally adding Easing.bezier for timing curves. CSS transitions, CSS animations, and Tailwind animation classes are forbidden because they do not render correctly in Remotion.

Can I use TailwindCSS with Remotion?▼

Yes, TailwindCSS can be used in Remotion once installed and enabled in the project. However, transition-* and animate-* classes must be avoided; all animation must be driven by the useCurrentFrame() hook.

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

Use the @remotion/captions package with the Caption type. You can transcribe audio to generate captions, import existing .srt files with parseSrt(), and display them with createTikTokStyleCaptions() for word-by-word highlighting.

Why does my Remotion animation flicker during rendering?▼

Flickering occurs when animations are not driven by useCurrentFrame(), such as self-animating shaders or useFrame() from React Three Fiber. All motion must derive from the current frame to stay deterministic across renders.

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. This is non-destructive and preferred over FFmpeg, which requires re-encoding 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
barefootfordbarefootford
589

cut

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

Community
Advanced