Skip to content
Remotion Video Creation

Remotion Video Creation Skill

by Remotion remotion-dev/skills skills/remotion-create

Remotion's official skill for scaffolding a programmatic video project in React and iterating on it in the Studio preview instead of re-rendering.

GitHub Docs
DevelopmentDesign & Creative
Released
Remotion License

Install

Install with the skills CLI

One command for Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf and dozens of other agents. Needs Node.js; the skill is fetched straight from remotion-dev/skills.

$ npx skills add remotion-dev/skills --skill remotion-create

Run it in a terminal. The CLI finds the agents installed on your machine, asks which ones to add the skill to, and whether to install it into the folder you ran it from or for all your projects.

Other ways to install

Copy the whole skill folder — SKILL.md and any scripts or references beside it — into ~/.claude/skills/remotion-create/, where Claude Code picks it up in every project. Only git is needed.

tmp=$(mktemp -d) && \
  git clone --depth 1 --branch main https://github.com/remotion-dev/skills.git "$tmp" && \
  mkdir -p ~/.claude/skills && \
  cp -R "$tmp"/skills/remotion-create ~/.claude/skills/remotion-create

No scripts or references next to it? Saving the SKILL.md alone as ~/.claude/skills/remotion-create/SKILL.md works too.

Using another agent? Its personal skills folder
Codex
~/.agents/skills/
Cursor
~/.cursor/skills/
GitHub Copilot
~/.copilot/skills/
Gemini CLI
~/.gemini/skills/
Windsurf
~/.codeium/windsurf/skills/
OpenCode
~/.config/opencode/skills/
Open folder on GitHub

About

  • Scaffolds a blank Remotion project with create-video
  • Routes to layout, multi-scene and interactivity guidance as needed
  • Starts the Studio preview server instead of rendering on every change
  • Navigates directly to a composition by id for review

Remotion makes videos out of React components, which is exactly the kind of framework an agent can half-know: the JSX is familiar, the frame-based timing model is not. This is Remotion's own skill for the starting point — creating a project and getting a composition on screen.

It scaffolds with npx create-video@latest --yes --blank --no-tailwind, then routes the agent to the rest of the official set depending on what is being built: markup and video-first layout rules for sizing text that has to read at video resolution, multi-scene structure for videos assembled from subsequences, interactivity best practices so edits made in the Studio write back to the code, and a separate path for Tailwind if it is requested.

The operationally useful part is the last step: instead of rendering a file to check the work, it starts remotion studio --no-open as a long-running preview server and navigates to a specific composition by id. For an agent that is otherwise inclined to run a full render on every change, that is the difference between a fast iteration loop and a slow one.

One of eleven skills in Remotion's official repository, versioned against the Remotion 4.0 release line.

SKILL.md

The instructions your agent loads, as published by Remotion.

SKILL.md
name
remotion-create
description
Create a new Remotion video
version
4.0.503
metadata
tags: remotion

These are instructions for making a new Remotion project and composition.
If this is not the next task, see [Remotion Best Practices](../remotion-best-practices/SKILL.md)

Scaffold a project

If a project already exists, skip this.
Ensure Node.js and Git is installed, and the current folder is appropriate for starting a new project.

Scaffold one using:

npx create-video@latest --yes --blank --no-tailwind my-video
cd my-video
npm i

Replace my-video with a suitable project name.

Designing a video

Keep the scaffold and add React Markup.
Follow [Remotion React Markup Best Practices](../remotion-markup/SKILL.md) and [Video Layout Rules](video-layout.md) for video-first layout and text sizing guidance.

Is this a multi-scene video?

If this is a video with multiple subsequence videos, follow guidance at [Multi-scene videos](../remotion-markup/multi-scene-video.md).

Interactivity Best Practices

By structuring the React Markup following [Remotion Interactivity Best Practices](../remotion-interactivity/SKILL.md), you allow the user to make edits in the Studio which write back to code.

TailwindCSS

If Tailwind is requested, see [tailwind.md](tailwind.md) for using TailwindCSS in Remotion.

Starting preview

Instead of rendering the video, consider starting the preview server for faster iteration:

npx remotion studio --no-open

This will start a long-running process and print the server URL for the preview.
If server is already started, it will print the URL.
If an in-harness browser is available, open it there.
You can visit a specific composition by navigating to /[composition-id], for example http://localhost:3000/MapAnimation.

Follow-up

The video creation process has finished.
For follow-up prompts, use [Remotion Best Practices](../remotion-best-practices/SKILL.md)

Install

Related Skills

See all Remotion Video Creation alternatives

Skill: video-shotcraft

by Vincent Wei

Featured

Agent skill that turns Claude Code or Codex into a motion-design studio: real page captures, 150 tested Remotion shots, beat-synced cuts and an editable MP4.

Design & Creative
342 views 52 copies

Skill: VideoDB

by VideoDB

VideoDB's official skill giving an agent one interface to ingest, index, search and edit video — including live RTSP feeds and real-time desktop capture.

Development
Browse all skills →