Remotion Video Assistant

中文

A Claude Code skill for the full Remotion video production pipeline: planning, per-segment code generation, merge rendering, and subtitle creation.

Features

• Advisor Mode: Conversational planning that produces a structured video-plan.json
• Assistant Mode: Auto-generates Remotion components, merge compositions, themes, and subtitles
• Segment Architecture: Each scene lives in its own folder — easy to debug and modify independently
• Dual Subtitles: Generates both .srt files and animated Remotion subtitle overlays
• Merge Rendering: Combines all segments into a single previewable/exportable composition

Requirements

• Node.js 18+ and npm
• Claude Code with skill support
• A Remotion project (the skill can scaffold one for you if needed)

Installation

1. Copy remotion-video-assistant.skill.md into your Claude Code skills directory:

   # macOS / Linux
   mkdir -p ~/.claude/skills
   cp remotion-video-assistant.skill.md ~/.claude/skills/

2. Restart Claude Code or reload skills.
3. Navigate to a Remotion project directory and run /remotion-video.
   • If the current directory is not a Remotion project, the skill will offer to scaffold one.

Quick Start (Example Project)

Clone this repository and run the included example:

git clone https://github.com/YOUR_USERNAME/remotion-video-assistant.git
cd remotion-video-assistant/example
npm install
npm start        # open Remotion preview in browser
npm run build    # render the example video to out/video.mp4

Skill Commands

Run /remotion-video inside a Remotion project, then use one of these sub-commands:

Command	Description
plan	Interview-style planning → video-plan.json
generate	Create all segment components from the plan
add <name>	Add a new segment and regenerate dependent files
subtitles	Generate .srt + Subtitles.tsx
render	Refresh merge composition and render script
theme	Choose colors/fonts and write theme.ts
status	Check project health

Project Structure

A skill-managed project looks like this:

my-video-project/
├── video-plan.json
├── src/
│   ├── segments/
│   │   └── segment-NN-name/
│   │       ├── index.tsx
│   │       └── props.json
│   ├── shared/
│   │   ├── theme.ts
│   │   ├── Subtitles.tsx
│   │   └── transitions/
│   ├── compositions.tsx
│   ├── merge-render.tsx
│   └── index.tsx
├── subtitles/
│   └── video.srt
└── scripts/
    └── render-final.sh

How It Works

1. Plan: The skill interviews you about your video and writes a video-plan.json.
2. Generate: It creates a Remotion component for each segment, registers them in compositions.tsx, and builds a merge-render.tsx that stitches everything together.
3. Subtitles: It parses the script and timings to produce both an SRT file and an animated subtitle overlay.
4. Render: Run the generated shell script (./scripts/render-final.sh) or your own Remotion CLI command to export the final video.

Example

The example/ directory contains a fully working 38-second demo video with three segments (intro, body, outro), shared theme and transitions, and word-highlight subtitles.

Contributing

Issues and pull requests are welcome!

License

MIT