TIPS 56 · VIDEO

Claude edited this video

Videos made of code with Remotion and Claude Code: the official skills, the flow from script to final file, the frame check, and how to wrap it all in a skill that starts with one command.

What it is and why it matters

Editing 45 seconds of vertical video by hand means hours: cuts, word-by-word subtitles, timing. And if you change one line of the script, you redo half the work.

Remotion changes the game: it's a library that makes videos with React. Each video is a React project, each scene is a component, meaning a piece of code that says what's on screen at every frame. Because it's code, Claude Code can write it, change it and export it. You change a line, regenerate, and the video changes.

We make our videos this way, with a skill of our own: I write it the idea and it does the script, voices, subtitles, scenes, export, then checks the frames one by one. This guide is for anyone who has to publish videos and doesn't have the time, or the will, to learn editing.

1. The project and the official skills

You need Node.js and Claude Code. Remotion has a page just for Claude Code, and these are its commands, in order:

The commands
npx create-video --yes --blank my-video
cd my-video
npx remotion skills add
npm run dev

The first creates an empty project, the third installs Remotion's skills for agents, the last opens Remotion Studio: the video preview in the browser. Then, in a second terminal, in the same folder, you start claude. The skills can also be installed with npx skills add remotion-dev/skills. Each one is called with a slash:

  • /remotion-best-practices: it contains all the others. If you don't know which one to use, use this one.
  • /remotion-create: a new project or composition (a composition is a video, with size, frames per second and duration).
  • /remotion-markup: animations, layout, text, fonts, audio and timing.
  • /remotion-captions: subtitles.
  • /remotion-render: exports a video or a single frame.
  • /remotion-upgrade: updates Remotion and the installed skills.

2. From script to final file

  1. The script. Short sentences, one thing per sentence. For us, 45-55 seconds is about 120 words.
  2. The voices: ElevenLabs or OmniVoice. One audio file per line: that way each scene lasts exactly as long as its sentence, and if you change one you regenerate only that one.
  3. Subtitles on the words. You transcribe the audio with the timing of every word. Remotion can do it locally too, for free, with Whisper.cpp (the @remotion/install-whisper-cpp package), and with createTikTokStyleCaptions() it groups the words into pages like on social media.
  4. The scenes. One component per scene, lined up with the timing taken from the audio, never typed by hand. The composition sets the size: for a vertical video, 1080×1920.
  5. The export, with npx remotion render. Then the check, which deserves its own section.
The message
Create a 45-second vertical video from this script: [script]. Use Remotion, 1080×1920, one scene per sentence, voices with [ElevenLabs or OmniVoice], one audio file per line, subtitles on the words. Take the timing from the audio, don't type it by hand. Before exporting, show me the list of scenes with start and end.

3. The frame check

It's the part that makes the difference, and it's the one I'd never do by hand. Claude doesn't watch a video like you do, but it does look at images. So it exports still frames at the moments that matter, one with npx remotion still, many at once with npx remotion render and the --frames option, and puts them on a contact sheet: one page with all the frames in a grid. Then it looks at it and searches for:

  • text that runs off the edges or ends up under the social app's buttons;
  • a subtitle that doesn't match the word being said at that moment;
  • an empty or black frame right on the cut;
  • an element that shows up before its time, or a screen that doesn't show what the voice is saying.
The message
Check every cut on a contact sheet: export one frame just before and one just after every cut, plus one in the middle of each subtitle, put them in a grid with the frame number underneath and look at it. Find me cut-off text, wrong subtitles, empty frames. Fix, export again and redo the sheet until it's clean. Then tell me what you fixed.

4. All in one skill, one command with the idea

Once the flow works, you wrap it in a skill. A skill is a folder with a SKILL.md file inside: the instructions Claude Code follows when you type /skill-name. Put it in ~/.claude/skills/<name>/SKILL.md to have it in all your projects, or in .claude/skills/<name>/SKILL.md to have it only in this one. Whatever you type after the command reaches the skill as $ARGUMENTS. Ours works like this: I type the command and the idea, it does the rest.

The file
---
name: video
description: Creates a vertical video with Remotion, from the idea to the final file.
disable-model-invocation: true
argument-hint: [video idea]
---

Idea: $ARGUMENTS

1. Write the script: <length>, short sentences. Show it to me and wait for my OK.
2. Generate the voices with <ElevenLabs or OmniVoice>, one file per line.
3. Transcribe the audio with the timing of every word and put the subtitles on the words.
4. Build the scenes following style.md.
5. Export at 1080×1920.
6. Make the contact sheet of every cut and check it against checks.md. Fix until it's clean.
7. Tell me where the file is and what you fixed.

disable-model-invocation: true means it only starts when you call it: a video costs time and voice credits, better not to start one by mistake. The style and the list of checks live in separate files, in the same folder: Claude reads them only when needed. The documentation recommends keeping SKILL.md under 500 lines.

The message
Turn what we did today into a skill: create .claude/skills/video/SKILL.md with the steps in order, put the style in style.md, and the checks and the mistakes we found in checks.md. Use disable-model-invocation: true and the idea in $ARGUMENTS.

5. Remotion's license

Remotion is free, commercial use included, if you're an individual, a company with up to 3 employees or a non-profit, and also for trying it out before using it for work. Above 3 employees you need the Company License. You can't resell Remotion or a modified version of your own. Before you start, reread the license page, because the terms can change, and also check the terms of the service you use for the voices.

Common mistakes

  • Typing the scene timings by hand. As soon as you change a line, everything shifts: the timings come from the length of the audio.
  • Only watching the final video. A mistake that lasts one frame is invisible at normal speed: on the contact sheet it isn't.
  • Subtitles from a sentence-level transcript. You need the timing of every word, or the text arrives before or after the voice.
  • A skill that starts on its own. Without disable-model-invocation: true, Claude can launch it when a request looks like it.
  • Taking the license for granted. If the company has more than 3 employees, you need the Company License.

Checklist

  • The Remotion project starts and Remotion Studio shows the preview
  • The Remotion skills are installed and /remotion-best-practices responds
  • One audio file per line, and the scene timings come from the audio
  • The subtitles follow the words, not the sentences
  • The contact sheet of every cut is clean
  • The skill starts with /name and the idea, and only when I call it
  • I checked that Remotion's license covers my company

Frequently asked questions

Do I need to know React?

No, Claude writes the code. But being able to read a scene helps: when you don't like something, you can say “move the title higher in scene 3” instead of “I'm not convinced”.

What if I change a line after the export?

You change the line in the script, regenerate only that line's voice, and Claude redoes the timing, exports again and rechecks the contact sheet. That's why one audio file per line pays off.

Does it only work with Claude Code?

No. Remotion's page on agents also mentions Codex, Kimi Code and OpenCode, and the skills follow the open Agent Skills standard. This guide uses Claude Code because it's what I use.

← All guides