Remotion Rule: Extract Frames

What it is

This is a Remotion skill rule that teaches AI coding agents how to extract frames from videos at specific timestamps using Mediabunny. It is part of the official Remotion Agent Skill for programmatic video creation in React.

The rule targets developers using Remotion for video generation who need to extract thumbnails, create filmstrips, or process individual frames from video files. It works with Claude Code, OpenAI Codex, and Cursor.

How it saves time or tokens

The rule activates automatically when the agent detects frame extraction work in a Remotion project. It provides the exact function signatures and usage patterns for Mediabunny's extractFrames API, eliminating the need to look up documentation or experiment with parameters.

With an estimated 500 tokens per activation, the rule adds minimal overhead to the agent's context while providing precise, actionable guidance.

How to use

1. Install the Remotion skills collection with npx skills add remotion-dev/skills.
2. Open your Remotion project and ask your coding agent to extract frames from a video.
3. The rule activates automatically and the agent generates the correct Mediabunny code.

Example

import { extractFrames } from '@mediabunny/core';

const frames = await extractFrames({
  src: 'https://example.com/video.mp4',
  timestamps: [0, 5, 10, 15],
  format: 'png',
  width: 1920,
  height: 1080,
});

for (const frame of frames) {
  console.log(`Frame at ${frame.timestamp}s: ${frame.url}`);
}

Related on TokRepo

• AI tools for video -- Video production and processing tools
• AI tools for coding -- AI coding assistants and skills

Common pitfalls

• The extractFrames function requires a valid video URL accessible from the server. Local file paths must be served via a local HTTP server or use file:// protocol.
• Extracting many frames from a long video can be memory-intensive. Process frames in batches rather than requesting all timestamps at once.
• The output format (png vs jpg) affects file size and quality. Use png for lossless quality when compositing, jpg for smaller file sizes in thumbnails.