rizadaniel2-cozy-ritual/remotion-dev

Remotion Claude Skill Documentation

Overview

The Remotion Claude Skill is a comprehensive TypeScript module that enables programmatic video creation and rendering directly within Claude AI. It provides an intuitive API for creating, managing, and rendering video compositions using React components.

Features

• ✅ Create Video Compositions - Define video projects with React components
• ✅ Manage Compositions - Register, retrieve, and organize video compositions
• ✅ Render Queue Management - Queue compositions for batch rendering
• ✅ Multiple Output Formats - Support for h264, h265, VP8, VP9, ProRes, PNG sequences
• ✅ Template System - Pre-built templates for common video patterns
• ✅ Component Library - Ready-to-use components like TextOverlay and animations
• ✅ Type Safety - Full TypeScript support with comprehensive interfaces

Installation

# Clone the Remotion repository
git clone https://github.com/remotion-dev/remotion.git
cd remotion

# Install dependencies
bun install

# The skill is available at:
packages/skills-evals/remotion-claude-skill.ts

Quick Start

1. Create a Skill Instance

import { createRemotionSkill } from './remotion-claude-skill';

const skill = createRemotionSkill({
  projectName: 'my-video-project',
  width: 1920,
  height: 1080,
  fps: 30,
  durationInFrames: 150,
});

2. Create a React Component

import React from 'react';

export const MyVideo: React.FC<{ title: string }> = ({ title }) => {
  return (
    <div style={{
      flex: 1,
      backgroundColor: '#000',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      fontSize: 100,
      color: '#fff',
      fontWeight: 'bold',
    }}>
      {title}
    </div>
  );
};

3. Register a Composition

skill.createComposition(
  'my-video',
  'My Video Title',
  MyVideo,
  {
    durationInFrames: 150,
    fps: 30,
    width: 1920,
    height: 1080,
    defaultProps: { title: 'Hello World' },
  }
);

4. Queue for Rendering

skill.queueForRender('my-video', {
  codec: 'h264',
  outputLocation: './output/my-video.mp4',
  overwrite: true,
});

5. Get Metadata

const metadata = skill.getMetadata();
console.log(metadata);
// {
//   name: 'Remotion Claude Skill',
//   version: '1.0.0',
//   compositionsCount: 1,
//   queueLength: 1,
//   ...
// }

API Reference

RemotionClaudeSkill Class

Constructor

constructor(config: RemotionSkillConfig)

Creates a new skill instance with the provided configuration.

Parameters:

• config: Configuration object with width, height, fps, durationInFrames, projectName

Methods

createComposition(id, name, component, options?): CompositionDefinition

Creates and registers a new composition.

skill.createComposition(
  'intro',
  'Intro Sequence',
  IntroComponent,
  {
    durationInFrames: 200,
    fps: 60,
    width: 1920,
    height: 1080,
    defaultProps: { subtitle: 'My Project' },
  }
);

registerComposition(definition): void

Registers an already-defined composition.

const composition: CompositionDefinition = {
  id: 'outro',
  name: 'Outro Sequence',
  component: OutroComponent,
  durationInFrames: 150,
  fps: 30,
  width: 1920,
  height: 1080,
};

skill.registerComposition(composition);

getCompositions(): CompositionDefinition[]

Returns all registered compositions.

const all = skill.getCompositions();
console.log(`Total compositions: ${all.length}`);

getComposition(id): CompositionDefinition | undefined

Gets a specific composition by ID.

const intro = skill.getComposition('intro');
if (intro) {
  console.log(`Found: ${intro.name}`);
}

queueForRender(compositionId, options): void

Queues a composition for rendering.

skill.queueForRender('intro', {
  codec: 'h264',
  outputLocation: './videos/intro.mp4',
  crf: 18,
  concurrency: 4,
  overwrite: true,
});

getRenderQueue(): RenderOptions[]

Returns all queued render jobs.

const queue = skill.getRenderQueue();
console.log(`Queued jobs: ${queue.length}`);

clearRenderQueue(): void

Clears all queued render jobs.

skill.clearRenderQueue();

getMetadata(): object

Returns skill metadata and statistics.

const metadata = skill.getMetadata();
console.log(metadata.capabilities);

generateTemplate(type?): string

Generates a template for a video component.

// Options: 'intro' | 'animation' | 'slideshow'
const template = skill.generateTemplate('animation');
console.log(template);

Interfaces

RemotionSkillConfig

interface RemotionSkillConfig {
  projectName: string;
  width: number;
  height: number;
  fps: number;
  durationInFrames: number;
}

CompositionDefinition

interface CompositionDefinition {
  id: string;
  name: string;
  component: React.ComponentType;
  durationInFrames: number;
  fps: number;
  width: number;
  height: number;
  defaultProps?: Record<string, unknown>;
}

RenderOptions

interface RenderOptions {
  codec: 'h264' | 'h265' | 'vp8' | 'vp9' | 'prores' | 'png';
  pixelFormat?: 'yuv420p' | 'yuv422p' | 'yuv444p';
  crf?: number;
  audioBitrate?: string;
  videoBitrate?: string;
  outputLocation: string;
  concurrency?: number;
  overwrite?: boolean;
  logFn?: (message: string) => void;
  errorFn?: (error: Error) => void;
}

Built-in Components

TextOverlay

A simple text overlay component.

import { TextOverlay } from './remotion-claude-skill';

export const MyVideo = () => (
  <TextOverlay
    text="Hello Claude!"
    fontSize={80}
    color="#fff"
    backgroundColor="rgba(0,0,0,0.7)"
  />
);

Animation Utilities

createFadeInAnimation

Generates CSS for a fade-in animation.

import { createFadeInAnimation } from './remotion-claude-skill';

const animation = createFadeInAnimation(150, 30);
// Returns: "@keyframes fadeIn { ... }"

Templates

Intro Template

const template = skill.generateTemplate('intro');

Creates a simple text title displayed on a black background.

Animation Template

const template = skill.generateTemplate('animation');

Demonstrates spring animations and scaling effects.

Slideshow Template

const template = skill.generateTemplate('slideshow');

Shows how to create multiple sequences for a slideshow effect.

Complete Example

import React from 'react';
import { createRemotionSkill, TextOverlay } from './remotion-claude-skill';
import { useCurrentFrame, useVideoConfig } from 'remotion';

// Create skill instance
const skill = createRemotionSkill({
  projectName: 'demo',
  width: 1920,
  height: 1080,
  fps: 30,
  durationInFrames: 300,
});

// Define component
const DemoVideo: React.FC<{ message: string }> = ({ message }) => {
  const frame = useCurrentFrame();
  const { durationInFrames, fps } = useVideoConfig();
  
  const progress = frame / durationInFrames;
  const opacity = Math.min(progress * 2, 1);
  
  return (
    <div style={{
      flex: 1,
      backgroundColor: '#1a1a2e',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      opacity,
    }}>
      <TextOverlay
        text={message}
        fontSize={100}
        color="#00d4ff"
        backgroundColor="rgba(0,0,0,0.8)"
      />
    </div>
  );
};

// Register composition
skill.createComposition('demo', 'Demo Video', DemoVideo, {
  durationInFrames: 300,
  fps: 30,
  width: 1920,
  height: 1080,
  defaultProps: { message: 'Welcome to Remotion + Claude' },
});

// Queue for rendering
skill.queueForRender('demo', {
  codec: 'h264',
  outputLocation: './output/demo.mp4',
  crf: 18,
  overwrite: true,
});

// Check metadata
console.log(skill.getMetadata());

Advanced Features

Multiple Compositions

skill.createComposition('intro', 'Intro', IntroComponent, {...});
skill.createComposition('main', 'Main Content', MainComponent, {...});
skill.createComposition('outro', 'Outro', OutroComponent, {...});

// Queue all for rendering
for (const comp of skill.getCompositions()) {
  skill.queueForRender(comp.id, {
    codec: 'h264',
    outputLocation: `./videos/${comp.id}.mp4`,
    overwrite: true,
  });
}

Custom Props

interface VideoProps {
  title: string;
  subtitle: string;
  duration: number;
}

const MyVideo: React.FC<VideoProps> = ({ title, subtitle, duration }) => {
  // Component code
};

skill.createComposition('custom', 'Custom Video', MyVideo, {
  defaultProps: {
    title: 'My Title',
    subtitle: 'My Subtitle',
    duration: 5,
  },
});

Conditional Rendering

const ConditionalVideo: React.FC<{ showSubtitle?: boolean }> = ({ showSubtitle }) => {
  return (
    <div>
      <h1>Main Content</h1>
      {showSubtitle && <h2>Subtitle</h2>}
    </div>
  );
};

Best Practices

1. Use TypeScript - Leverage full type safety for components and props
2. Create Reusable Components - Build a library of components for common patterns
3. Optimize Performance - Use memoization for heavy computations
4. Batch Rendering - Queue multiple compositions to reduce startup overhead
5. Handle Errors - Use errorFn in RenderOptions for error handling
6. Validate Props - Always validate default props and user inputs

Troubleshooting

Composition Not Found

try {
  skill.queueForRender('nonexistent', {...});
} catch (error) {
  console.error('Composition not found:', error.message);
}

Render Queue Management

// Clear queue before adding new jobs
skill.clearRenderQueue();

// Check queue length
console.log(`Pending renders: ${skill.getRenderQueue().length}`);

Configuration Validation

const config = skill.getMetadata();
console.log('Current Configuration:');
console.log(`- Resolution: ${config.config.width}x${config.config.height}`);
console.log(`- FPS: ${config.config.fps}`);
console.log(`- Duration: ${config.config.durationInFrames} frames`);

Integration with Claude

In Claude Conversations

1. Reference the skill to create videos interactively
2. Modify components in real-time
3. Queue multiple versions for comparison
4. Export configuration as JSON

Example Claude Interaction

User: "Create an intro video for my podcast"

Claude: I'll create an intro video using the Remotion Claude Skill.

skill.createComposition('podcast-intro', 'Podcast Intro', PodcastIntro, {
  durationInFrames: 180,
  fps: 30,
  width: 1920,
  height: 1080,
  defaultProps: {
    podcastName: 'Your Podcast Name',
    tagline: 'Conversations that Matter',
  },
});

Resource Links

• Remotion Documentation
• Remotion API Reference
• Remotion GitHub Repository
• Remotion Discord Community

License

This skill follows the same license as Remotion. See LICENSE.md for details.

Contributing

To contribute improvements to this skill:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

See CONTRIBUTING.md for more information.

Support

• 📖 Documentation
• 💬 Discord Community
• 🐛 Issue Tracker
• 🌐 Website