Remotion Rule: Assets

What it is

The Remotion Assets rule is a focused skill instruction for AI agents building programmatic videos with Remotion. It covers the correct patterns for importing static and dynamic media files -- images, video clips, audio tracks, and custom fonts -- into a Remotion composition.

This rule is intended for developers and AI coding agents that generate video content in React using Remotion and need reliable media import patterns.

How it saves time or tokens

Without this rule, an AI agent frequently guesses import paths or uses incompatible bundler configurations, producing broken builds. The rule eliminates trial-and-error by specifying exactly which API to use (staticFile() for public assets, ES module imports for bundled assets) and which file types each approach supports.

How to use

1. Add this rule to your Remotion project as part of the agent skill configuration.
2. When your AI agent needs to include media in a composition, it references this rule for the correct import pattern.
3. Use staticFile('filename.mp4') for files in the public/ folder, or import statements for assets processed by the bundler.

Example

import { staticFile, Video, Img, Audio } from 'remotion';

// Public folder assets
const MyComp: React.FC = () => (
  <>
    <Video src={staticFile('background.mp4')} />
    <Img src={staticFile('logo.png')} />
    <Audio src={staticFile('narration.mp3')} />
  </>
);

// Bundled import
import heroImage from './assets/hero.png';
const Hero: React.FC = () => <Img src={heroImage} />;

Related on TokRepo

• Prompt library -- Explore curated prompt and skill templates for AI-assisted development.
• AI tools for video -- Other video-related AI tools and workflows.

Common pitfalls

• Using relative file paths instead of staticFile() causes assets to fail in the rendered output even if they work in preview.
• Large video files in the public/ folder bloat the bundle. Use external URLs or pre-signed S3 links for assets over 50 MB.
• Forgetting to install font files or register them with @font-face leads to fallback fonts in the final render.
• Audio files must be WAV or MP3; some codecs (like AAC in .m4a containers) are not supported by all Remotion renderers.
• Importing assets via dynamic require() at runtime is unsupported in Remotion's Webpack config by default.