Skip to content
Remotion Video Creation

Remotion Video CreationSkill

by Remotion
Released
3 views
Remotion License
Repository Docs
markdown DevelopmentDesign & Creative

Summary

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

Features

  • 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

Install This Skill

Add this skill to your favorite AI agent in a few steps.

Any AI agent

This skill is plain instructions — it works with any assistant that accepts custom instructions or system prompts.

  1. Copy the skill content with the button below.
  2. Paste it into your agent's instruction file or system prompt (for example AGENTS.md, .cursorrules, or a custom instructions field).
  3. Ask the agent to apply the skill whenever the task matches.

Skill Content

Markdown Content

Copy this content and use it with your preferred AI agent

---
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:

```bash
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:

```bash
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)

Description

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.

Related Skills

Skill: Use Railway

by Railway

New

Railway's official agent skill: create projects, provision databases and buckets, deploy, manage variables and domains, and read build failures back — from the CLI, API or MCP server.

Development
2 views

Skill: NVIDIA Warp Gradient Debugging

by NVIDIA

New

Diagnoses wrong gradients in differentiable NVIDIA Warp programs by measuring first — comparing autodiff against finite differences on a shrunk reproduction before proposing any fix.

Development
6 views

Skill: Google Workspace CLI (gws)

by Google Workspace

New

Google's official skill for the gws CLI — drive Gmail, Drive, Calendar, Sheets, Docs, Chat and Admin APIs from an agent, with Model Armor screening.

Development
6 views 1 copies

Skill: Netlify Database

by Netlify

New

Netlify's official skill for zero-config managed Postgres — querying from Functions, Drizzle setup, migrations and per-preview database branches.

Development
4 views
Browse all skills →