Remotion Rule: Videos

What it is

The Remotion Videos rule is part of the official Remotion Agent Skill that teaches AI coding agents how to embed and manipulate video clips inside Remotion compositions. It covers trimming start and end frames, adjusting volume, changing playback speed, enabling loops, and shifting pitch.

This rule targets developers and AI agents building programmatic videos in React with Remotion. If you use Claude Code or another AI assistant to generate Remotion projects, this rule ensures the agent produces correct video embedding code on the first try.

How it saves time or tokens

Without this rule, an AI agent guesses at Remotion's video API and often produces incorrect prop names or missing imports. The rule preloads the correct patterns so the agent generates working code in one shot, saving iteration cycles and token spend. The rule is estimated at around 500 tokens to install.

How to use

1. Install the Remotion skills pack:

npx skills add remotion-dev/skills

1. The Videos rule activates automatically when the agent detects video embedding tasks in a Remotion project.
2. Write a prompt like 'Add a background video trimmed to 3 seconds with 50% volume' and the agent applies the correct Remotion API.

Example

import { Video, staticFile } from 'remotion';

export const MyComp: React.FC = () => {
  return (
    <Video
      src={staticFile('background.mp4')}
      startFrom={30}
      endAt={120}
      volume={0.5}
      playbackRate={1.2}
      loop
    />
  );
};

Related on TokRepo

• Featured workflows — Browse curated AI workflows and skills
• AI tools for coding — Developer-focused AI tools and agent skills

Common pitfalls

• Forgetting that startFrom and endAt use frame numbers, not seconds. Multiply seconds by fps to get the right value.
• Setting volume above 1.0 causes clipping in most browsers. Stick to the 0-1 range.
• Using loop on very long clips without setting endAt leads to unexpectedly long compositions that break rendering.