🎥 Remotion Setup Guide — Claude Code Video Skill

🚀 The Fastest Way to Set This Up

Paste this entire doc into Claude Code and it will install Remotion automatically. No terminal commands, no steps, nothing. Then just type /remotion-video followed by whatever you want to make.

✨ What You're Building

An AI-powered video creation setup inside Claude Code that lets you go from "I need a video ad" → rendered MP4 in minutes. No After Effects. No motion designers. Just describe what you want.

Perfect for: 🛍️ Product ads • 📱 Instagram Reels • 📊 Animated stats • 🎥 Social content

📋 Before You Start

You only need two things:

[ ] Node.js 18 or higher — check with node --version in your terminal. If needed, grab the LTS from nodejs.org
[ ] Claude Code desktop app — download from claude.ai/download

💡 You don't need to be a developer. You don't need to know React. If you can install an app and paste a line of code, you can do this.

⚡ Instant Setup (2 seconds)

Copy this entire doc
Paste it into Claude Code
Claude reads the embedded instructions and installs everything automatically
Type /remotion-video + your video description → Claude builds it

That's it.

🛠️ Manual Setup (30 seconds)

If you prefer the manual route:

1️⃣ Open Claude Code & Paste the Install Command

Open the Claude Code desktop app, head to remotion.dev, grab the install command, and paste it straight into Claude Code:

npx create-video@latest

Claude runs the command, installs dependencies, and sets up your entire Remotion project automatically.

2️⃣ Use `/remotion-video` to Make Any Video

Once setup is done, just type:

/remotion-video Create a 30-second product ad for my coffee brand with animated text overlays, dark background, and warm orange accents

Claude handles file creation, animations, preview, and rendering.

🧠 What Is a Claude Code Skill?

A Claude Code skill is a custom slash command that teaches Claude new capabilities. It's a set of instructions living in a file on your computer.

Without the Skill	With `/remotion-video`
General-purpose assistant	Specialized video creator
Doesn't know Remotion workflows	Knows exact composition structure
You explain every time	Teach once, use forever

🔑 Key insight: Skills turn Claude from a "smart assistant" into a "specialized collaborator." One file changes everything.

🎬 Your First `/remotion-video` Command

Here's what happens the first time:

💬 You type the command — /remotion-video + your description
📖 Claude reads the skill file — loads all Remotion context
✍️ You describe the video — specifics on duration, colors, content
🎨 Claude creates the composition — a React component defining every frame
👀 Claude opens Remotion Studio — browser-based preview, scrub frame by frame
📀 Claude renders the video — finished MP4 ready to post

🚀 Three Starter Prompts

🛍️ Prompt 1: Product Showcase

Create a 30-second product showcase video for [product name]. Use animated text overlays on a dark background with blue (#3B82F6) accent color. Include a hook that grabs attention in the first 3 seconds, 3 feature highlights that animate in one at a time, and a call-to-action with a website URL. Resolution: 1080x1920 (vertical for Instagram Reels).

Great for e-commerce, SaaS tools, any product highlight.

🎤 Prompt 2: Talking Head Reel Template

Create a 45-second talking head reel template. Layout: Hook (0-5s) camera fills frame with bold subtitle at bottom. Middle (5-35s) split screen — camera bottom half, content/graphics top half, synced subtitle bars. CTA (35-45s) camera fills frame with branded lower third and CTA text. Use [brand color] as accent. White subtitle text with slight shadow for readability.

Perfect for coaches, consultants, educational content.

📊 Prompt 3: Animated Statistics

Create an animated statistics video showing these numbers: 47% increase in conversion rate, 2.3x return on ad spend, 150+ clients served, $1.2M in revenue generated. Each stat animates in with a count-up effect. Dark background (#0f0f0f) with alternating bright accent colors. Smooth transitions. Total: 20 seconds.

Perfect for case studies, social proof, pitch decks.

🔧 Troubleshooting

❌ "Skill not found" / "Unknown command"

Check these in order:

File must be at exactly .claude/skills/remotion-video/skill.md
Folder name must be remotion-video (with the hyphen)
File must be named skill.md (not .txt)
Make sure you're in the correct project folder

Verify with:

ls -la .claude/skills/remotion-video/skill.md

❌ "Remotion is not installed"

Run:

npx create-video@latest

Or if project already exists:

npm install remotion @remotion/cli @remotion/player

❌ Render fails / "Cannot find module"

Issue	Fix
Node.js version too low	Must be 18+. Run `node --version`
Missing dependencies	Run `npm install`
Wrong composition name	ID in render command must match `Root.tsx`
Port 3000 in use	Run `npx remotion studio --port 3005`

💡 Pro Tips for Better Results

AI works best with specific instructions.

- 🕒 Specify exact durations: "30 seconds" not "short video"

- 🎨 Include hex colors: #3B82F6 not "blue"

- 📐 Describe structure: Hook 0-5s, Body 5-25s, CTA 25-30s

- 🔁 Iterate freely — ask Claude to adjust timing, swap text, add sections

🌟 What Else Can You Build?

The /remotion-video skill is one example. The same pattern works for anything:

📅 Content planning skills that generate full content calendars
🔍 Code review skills checking your codebase against standards
📊 Data analysis skills processing CSVs into visualizations
✍️ Email copywriting skills trained on AIDA or PAS frameworks
📦 Client onboarding skills scaffolding project folders and templates

The pattern: Write a markdown file teaching Claude a workflow → save it in the skills folder → type the slash command.

📚 Reference: The Skill File Contents

For reference, here's what the /remotion-video skill teaches Claude:

# /remotion-video

## Overview
Create professional video ads using Remotion, a React-based video framework.
Handles composition setup, animation patterns, text overlays, and rendering.

## Capabilities
- Create new Remotion compositions from text descriptions
- Add animated text overlays, transitions, and effects
- Configure video duration, resolution, and frame rate
- Preview in Remotion Studio
- Render to MP4

## Workflow
1. User describes the video they want
2. Run npx create-video@latest if no project exists
3. Create a new composition file in src/compositions/
4. Build the React component with Remotion primitives
5. Open Remotion Studio for preview (npx remotion studio)
6. Render the final MP4 (npx remotion render)

## Key Patterns
- Use useCurrentFrame() and useVideoConfig() hooks
- Use interpolate() for animations
- Use spring() for natural motion
- Use <AbsoluteFill> for layering
- Use <Sequence> for timing sections
- Register compositions in Root.tsx

## Rendering
- Preview: npx remotion studio
- Render: npx remotion render [CompositionId] out.mp4
- Vertical video: --width 1080 --height 1920

*Source: The Complete Remotion Setup Guide 2026 — **@mavgpt*