skills.rest
zester4
zester4COMMUNITY
Explore all skills by this author →
GitHub

remotion-best-practices

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

2|1|Updated Jun 9, 2026
Search Tags:#react#video#captions#composition#animation#remotion#programmatic video
One-click install
npx skills add https://github.com/zester4/zilmate --skill remotion-best-practices-zester4
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion-best-practices
Source: https://github.com/zester4/zilmate/tree/main/.agents/skills/remotion-best-practices
Command: npx skills add https://github.com/zester4/zilmate --skill remotion-best-practices-zester4

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Writing Remotion video code without domain knowledge leads to common mistakes like CSS animations that fail to render, incorrect asset handling, and broken timing. This Skill provides the domain-specific rules and code patterns needed to build correct, renderable React-based videos. ## Core Features & Use Cases - Project Scaffolding & Animation: Set up new Remotion projects and animate properties with useCurrentFrame(), interpolate(), and Bézier easing instead of forbidden CSS transitions. - Media Handling: Add images, videos, audio, GIFs, Lottie animations, and fonts using staticFile(), <Img>, <Video>, and <Audio> components. - Specialized Rule Files: Load on-demand guidance for captions, subtitles, 3D with Three.js, audio visualization, maps with MapLibre, silence detection with FFmpeg, transitions, and parameterized compositions with Zod. - Use Case: When asked to build a promotional video with animated titles, background music, and TikTok-style captions, this Skill supplies the correct composition structure, sequencing patterns, and caption rendering code. ## Quick Start Use the remotion-best-practices skill to scaffold a new Remotion video project and add an animated title sequence.

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 video with React and Remotion?▼

Scaffold a project with npx create-video@latest, define a Composition in src/Root.tsx with width, height, fps, and durationInFrames, then build scenes using components like AbsoluteFill and Sequence. Preview with npx remotion studio.

How do I animate elements in Remotion?▼

Animate using useCurrentFrame() and interpolate() with Easing.bezier for timing curves. CSS transitions, CSS animations, and Tailwind animation classes are forbidden because they do not render correctly in Remotion's frame-based rendering.

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 using createTikTokStyleCaptions() and Sequence components.

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

Yes, install @remotion/three and wrap 3D content in ThreeCanvas with width and height props. All animations must be driven by useCurrentFrame(); using useFrame() from @react-three/fiber is forbidden because it causes flickering during rendering.

Why does my Remotion animation flicker or not render?▼

Flickering usually comes from animations not driven by useCurrentFrame(), such as CSS transitions, Tailwind animate classes, or self-animating shaders. Remotion renders frame-by-frame, so every visual change must be a deterministic function of the current frame.

How do I trim videos or detect silence in Remotion?▼

Prefer the trimBefore and trimAfter props on the Video component for non-destructive trimming. For silence detection, use npx remotion ffmpeg with loudnorm to measure loudness, then silencedetect with that threshold to find silent segments.

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
LazyIsEfficientLazyIsEfficient
15

elevenlabs-tts

Convert text to speech and generate MP3 narration files.

Official
Intermediate
barefootfordbarefootford
589

cut

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

Community
Advanced