Remotion Video Production

A skill for producing programmable videos using Remotion. Generate automated videos from text instructions and produce brand-consistent videos at scale.

When to use this skill

• Automated video generation: Create videos from text instructions
• Brand video production: Consistent-style videos at scale
• Programmable content: Integrated narration, visuals, and animation
• Marketing content: Product introductions, onboarding, and promotional videos

Instructions

Step 1: Define the Video Spec

video_spec:
  audience: [target audience]
  goal: [video purpose]
  duration: [total length - 30s, 60s, 90s]
  aspect_ratio: "16:9" | "1:1" | "9:16"
  tone: "fast" | "calm" | "cinematic"
  voice:
    style: [narration style]
    language: [language]

Step 2: Outline Scenes

Scene structure template:

## Scene Plan

### Scene 1: Hook (0:00 - 0:05)
- **Visual**: Product logo fade-in
- **Audio**: Upbeat intro
- **Text**: "Transform Your Workflow"
- **Transition**: Fade → Scene 2

### Scene 2: Problem (0:05 - 0:15)
- **Visual**: Problem scenario illustration
- **Audio**: Narration begins
- **Text**: Key message overlay
- **Transition**: Slide left

### Scene 3: Solution (0:15 - 0:30)
...

Step 3: Prepare Assets

# Asset checklist
assets/
├── logos/
│   ├── logo-main.svg
│   └── logo-white.svg
├── screenshots/
│   ├── dashboard.png
│   └── feature-1.png
├── audio/
│   ├── bgm.mp3
│   └── narration.mp3
└── fonts/
    └── brand-font.woff2

Asset preparation rules:

• Logos: SVG or high-resolution PNG
• Screenshots: Normalized to match aspect ratio
• Audio: MP3 or WAV, volume normalized
• Fonts: Web fonts or local font files

Step 4: Implement Remotion Composition

// src/Video.tsx
import { Composition } from 'remotion';
import { IntroScene } from './scenes/IntroScene';
import { ProblemScene } from './scenes/ProblemScene';
import { SolutionScene } from './scenes/SolutionScene';
import { CTAScene } from './scenes/CTAScene';

export const RemotionVideo: React.FC = () => {
  return (
    <>
      <Composition
        id="ProductIntro"
        component={ProductIntro}
        durationInFrames={1800} // 60s at 30fps
        fps={30}
        width={1920}
        height={1080}
      />
    </>
  );
};

// Scene Component Example
const IntroScene: React.FC<{ frame: number }> = ({ frame }) => {
  const opacity = interpolate(frame, [0, 30], [0, 1]);

  return (
    <AbsoluteFill style={{ opacity }}>
      <Logo />
      <Title>Transform Your Workflow</Title>
    </AbsoluteFill>
  );
};

Step 5: Render and QA

# 1. Preview render (low quality)
npx remotion preview src/Video.tsx

# 2. QA checks
- [ ] Timing verification
- [ ] Audio sync
- [ ] Text readability
- [ ] Smooth transitions

# 3. Final render
npx remotion render src/Video.tsx ProductIntro out/video.mp4

Examples

Example 1: Product Intro Video

Prompt:

Create a 60s product intro video with 6 scenes,
upbeat tone, and 16:9 output. Include a CTA at the end.

Expected output:

## Scene Breakdown
1. Hook (0:00-0:05): Logo + tagline
2. Problem (0:05-0:15): Pain point visualization
3. Solution (0:15-0:30): Product demo
4. Features (0:30-0:45): Key benefits (3 items)
5. Social Proof (0:45-0:55): Testimonial/stats
6. CTA (0:55-1:00): Call to action + contact

## Remotion Structure
- src/scenes/HookScene.tsx
- src/scenes/ProblemScene.tsx
- src/scenes/SolutionScene.tsx
- src/scenes/FeaturesScene.tsx
- src/scenes/SocialProofScene.tsx
- src/scenes/CTAScene.tsx

Example 2: Onboarding Walkthrough

Prompt:

Generate a 45s onboarding walkthrough using screenshots,
with callouts and 9:16 format for mobile.

Expected output:

• Scene plan with 5 steps
• Asset list (screenshots, callout arrows)
• Text overlays and transitions
• Mobile-safe margins applied

Best practices

1. Short scenes: Keep scenes clear at 5-10 seconds each
2. Consistent typography: Define a typography scale
3. Audio sync: Align narration cues with visuals
4. Template reuse: Save reusable compositions
5. Safe zones: Ensure margins for mobile aspect ratios

Common pitfalls

• Text overload: Limit the amount of text per scene
• Ignoring mobile safe zones: Check edges for 9:16 aspect ratio
• Final render before QA: Always check preview first

Troubleshooting

Issue: Audio and visuals out of sync

Cause: Frame timing mismatch Solution: Recalculate frames and align timestamps

Issue: Render is slow or fails

Cause: Heavy assets or effects Solution: Compress assets and simplify animations

Issue: Text unreadable

Cause: Insufficient font size or contrast Solution: Use minimum 24px font and high-contrast colors

Output format

## Video Production Report

### Spec
- Duration: 60s
- Aspect Ratio: 16:9
- FPS: 30

### Scene Plan
| Scene | Duration | Visual | Audio | Transition |
|-------|----------|--------|-------|------------|
| Hook  | 0:00-0:05 
how to use remotion-video-production
CursorClaude CodeClineCodexWindsurfGooseGitHub CopilotVS CodeGemini CLIKiloOpencodeKimi CLIRoo ClineAiderContinueZedBolt.newLovablev0Replit AgentSweepSmol DeveloperDevinCavemanAmpAntigravity
How to use remotion-video-production on Cursor
AI-first code editor with Composer
1
Prerequisites
Before installing skills in Cursor, ensure your development environment meets these requirements:
›Cursor installed and configured on your development machine
›Node.js version 16.0+ with npm package manager (verify with node --version)
›Active project directory or workspace where you want to add remotion-video-production
2
Execute installation command
Execute the skills CLI command in your project's root directory to begin installation:
$npx skills add https://github.com/supercent-io/skills-template --skill remotion-video-productioncopy
The skills CLI fetches remotion-video-production from GitHub repository supercent-io/skills-template and configures it for Cursor.
3
Select Cursor when prompted
The CLI will show a list of available agents. Use arrow keys to navigate and space to select Cursor:
◆ Which agents do you want to install to?
│
│ ── Universal (.agents/skills) ── always included ────
│   • Amp
│   • Antigravity
│   • Cline
│   • Codex
│ ●Cursor(selected)
│   • Cursor
│   • Windsurf
4
Verify installation
Confirm successful installation by checking the skill directory location:
.cursor/skills/remotion-video-production
Reload or restart Cursor to activate remotion-video-production. Access the skill through slash commands (e.g., /remotion-video-production) or your agent's skill management interface.
⚠
Security & Verification Notice
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your development environment. Always verify the publisher's identity, review recent commits, and test in isolated environments before production deployment.
Additional Resources
›View source code on GitHub›Skills CLI documentation›Learn more about Cursor›What are agent skills?