Remotion AI Skill — Programmatic Video in React

All 30+ Rules

Core Animation & Timing

• animations — Frame-driven animations with useCurrentFrame() and interpolate(). CSS transitions are forbidden.
• timing — Interpolation curves: linear, easing, spring animations
• sequencing — Delay, trim, and limit duration of items in a composition
• trimming — Cut the beginning or end of animations non-destructively
• transitions — Scene transitions: crossfade, slide, wipe using TransitionSeries

Media

• videos — Embed, trim, loop, speed up, and adjust pitch of videos
• audio — Import, trim, adjust volume/speed/pitch of audio
• images — Embed images with the Img component
• gifs — Display GIFs synchronized with Remotion's timeline
• assets — Import images, videos, audio, and fonts
• fonts — Load Google Fonts and local fonts
• light-leaks — Overlay light leak effects using @remotion/light-leaks
• transparent-videos — Render videos with alpha transparency

Text & Typography

• text-animations — Typography and text animation patterns
• measuring-text — Measure text dimensions, fit text to containers, check overflow

Captions & Voiceover

• subtitles — Caption processing in JSON, the Caption type, displaying and styling captions
• voiceover — AI-generated voiceover with ElevenLabs TTS, dynamic composition duration

Audio Visualization

• audio-visualization — Spectrum bars, waveforms, bass-reactive effects with useWindowedAudioData()
• sound-effects — Using sound effects in compositions

Data & Charts

• charts — Bar, pie, line, stock chart patterns for Remotion
• maps — Animated maps using Mapbox

3D

• 3d — 3D content with Three.js and React Three Fiber in Remotion

Video Processing

• ffmpeg — FFmpeg and FFprobe via bunx remotion ffmpeg (no install needed)
• extract-frames — Extract frames from videos at specific timestamps
• get-video-duration — Get video duration in seconds
• get-video-dimensions — Get video width and height
• get-audio-duration — Get audio duration in seconds
• can-decode — Check if a video can be decoded by the browser

Project Structure

• compositions — Define compositions, stills, folders, default props
• calculate-metadata — Dynamically set duration, dimensions, and props
• parameters — Make videos parametrizable with Zod schemas
• tailwind — Using TailwindCSS in Remotion
• measuring-dom-nodes — Measure DOM element dimensions
• lottie — Embed Lottie animations

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 — they won't render correctly in video output.

FFmpeg is built-in

bunx remotion ffmpeg -i input.mp4 output.mp3
bunx remotion ffprobe input.mp4

No need to install FFmpeg separately.

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 30+ rule files that teach AI coding tools (Claude Code, Codex, Cursor) best practices for creating programmatic videos in React using Remotion.

Q: Is Remotion free? A: Remotion is free for individuals and small teams. Companies with revenue above a 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 to install into your Claude Code or Codex setup.