Remotion Rule: Compositions

What it is

This is a Remotion agent skill rule that teaches AI coding assistants how to define compositions, stills, folders, default props, and dynamic metadata in Remotion projects. Remotion is a framework for creating videos programmatically using React components. This rule is part of the official Remotion Agent Skill.

The rule is designed for developers using AI coding tools like Claude Code to build Remotion video projects. It provides the patterns and constraints the AI needs to generate correct composition configurations.

How it saves time or tokens

Without this rule, an AI assistant might generate incorrect Remotion composition code -- wrong prop types, missing duration parameters, or invalid folder structures. The rule encodes Remotion's composition API conventions so the AI produces correct code on the first attempt, avoiding back-and-forth debugging.

The rule also documents dynamic metadata patterns for calculating video duration and dimensions from external data, which is non-obvious from the Remotion documentation alone.

How to use

1. Install the Remotion skills:

npx skills add remotion-dev/skills

1. The rule activates automatically when working with compositions in a Remotion project.

1. Ask your AI assistant to create compositions, and it will follow the patterns defined in this rule.

Example

import { Composition, Folder, Still } from 'remotion';

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Folder name='main'>
        <Composition
          id='MyVideo'
          component={MyVideoComponent}
          durationInFrames={300}
          fps={30}
          width={1920}
          height={1080}
          defaultProps={{
            title: 'Hello World',
            backgroundColor: '#000000'
          }}
        />
      </Folder>
      <Folder name='thumbnails'>
        <Still
          id='Thumbnail'
          component={ThumbnailComponent}
          width={1280}
          height={720}
          defaultProps={{ title: 'My Video' }}
        />
      </Folder>
    </>
  );
};

This defines a video composition at 1080p/30fps with default props, organized in folders with a still image for thumbnail generation.

Related on TokRepo

• AI coding tools -- Explore tools for AI-assisted development
• AI video tools -- Browse video creation and editing tools

Common pitfalls

• Compositions must have durationInFrames, fps, width, and height properties. Omitting any of these produces a build error. Stills do not require durationInFrames or fps.
• Default props must match the component's prop types exactly. TypeScript will catch mismatches at build time, but runtime errors from incorrect prop types can be confusing.
• Folder names must be unique at the same level. Duplicate folder names cause rendering issues in the Remotion Studio sidebar.