Remotion AI Skill — Programmatic Video in React

What it is

The Remotion AI Skill is the official agent skill from the Remotion team, designed for Claude Code and Codex. It includes 37 rule files that teach AI coding agents how to build programmatic videos using React and Remotion. The rules cover animations, transitions, captions, FFmpeg integration, audio visualization, voiceover, and rendering pipelines.

Video developers creating automated content, marketing teams building dynamic video templates, and developers who want to generate videos from data use this skill to guide their AI agent in producing correct Remotion code.

How it saves time or tokens

Remotion has a large API surface covering composition, animation, audio, rendering, and deployment. Without the skill, an AI agent would need extensive prompting to produce correct Remotion code. The 37 rule files encode best practices, common patterns, and API usage directly into the agent context, reducing the number of back-and-forth corrections needed to get working video code.

How to use

1. Install the skill:

npx skills add remotion-dev/skills

1. Or create a new Remotion project with the skill pre-installed:

bun create video

1. Start Claude Code in your Remotion project and ask for video creation tasks:

> Create a 30-second intro video with animated text and background music
> Add subtitle captions from a transcript file
> Build a data-driven chart animation from a CSV

Example

// A simple Remotion composition (produced by Claude with this skill)
import { AbsoluteFill, useCurrentFrame, interpolate, spring, useVideoConfig } from 'remotion';

export const TitleSlide: React.FC<{ text: string }> = ({ text }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: 'clamp',
  });

  const scale = spring({
    frame,
    fps,
    config: { damping: 12, stiffness: 100 },
  });

  return (
    <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center', backgroundColor: '#0a0a0a' }}>
      <h1 style={{ color: 'white', fontSize: 72, opacity, transform: `scale(${scale})` }}>
        {text}
      </h1>
    </AbsoluteFill>
  );
};

Related on TokRepo

• AI Tools for Video -- explore tools for AI-powered video creation
• AI Tools for Content -- discover content creation tools and frameworks

Common pitfalls

• Remotion renders each frame individually. Heavy computations in your component slow down rendering significantly. Pre-compute data outside the component and pass it as props.
• Audio and video assets must be placed in the public/ folder or loaded via staticFile(). Relative imports of media files do not work in Remotion.
• The spring() function uses frame count, not seconds. Always pass the fps from useVideoConfig() to get consistent timing across different frame rates.