Remotion AI Skill — Programmatic Video in React

All 37 Rules

Core Animation & Timing

• Animations
• Timing
• Sequencing
• Trimming
• Transitions

Media

• Videos
• Audio
• Images
• Gifs
• Assets
• Fonts
• Light Leaks
• Transparent Videos

Text & Typography

• Text Animations
• Measuring Text

Captions & Voiceover

• Subtitles
• Display Captions
• Import Srt Captions
• Transcribe Captions
• Voiceover
• Sfx

Audio Visualization

• Audio Visualization

Data & Charts

• Charts
• Maps

3D

• 3D

Video Processing

• Ffmpeg
• Extract Frames
• Get Video Duration
• Get Video Dimensions
• Get Audio Duration
• Can Decode

Project Structure

• Compositions
• Calculate Metadata
• Parameters
• Tailwind
• Measuring Dom Nodes
• Lottie

Key Rules

All animations must use useCurrentFrame()

const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 60], [0, 1], { extrapolateRight: "clamp" });

CSS transitions, CSS animations, and Tailwind animation classes are forbidden.

FFmpeg is built-in

bunx remotion ffmpeg -i input.mp4 output.mp3

Captions use the Caption type

type Caption = { text: string; startMs: number; endMs: number; timestampMs: number | null; confidence: number | null; };

FAQ

Q: What is the Remotion AI Skill? A: An official Agent Skill with 37 rule files that teach AI coding tools best practices for creating programmatic videos in React using Remotion.

Q: Is Remotion free? A: Free for individuals and small teams. Companies above a revenue threshold need a license. The AI Skill itself is free and open-source.

Q: How do I install the Remotion skill? A: Run npx skills add remotion-dev/skills.