Remotion Video Creation

Remotion License

remotionvideoreactrendering

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.

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

Claude Code & Claude apps

Claude loads skills automatically from its skills directory.

Claude Code

Create a skill folder — personal: ~/.claude/skills/remotion-create/, or per-project: .claude/skills/remotion-create/
Save the skill content as SKILL.md inside that folder.
Claude Code picks it up automatically and invokes it when relevant.

mkdir -p ~/.claude/skills/remotion-create

Claude.ai / Claude Desktop

Enable Skills under Settings → Capabilities, then upload the skill (a folder or zip containing SKILL.md).

One-prompt install

Paste this prompt into any agent with web access and it will install the skill for you.

Install the "Remotion Video Creation" skill from Onei AI. Fetch https://onei.ai/skills/remotion-create, extract the full skill content from the page, and save it where you load skills from (for Claude Code: .claude/skills/remotion-create/SKILL.md). From now on, apply this skill whenever it is relevant to my request.

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

by GreenSock

New

GreenSock's official ScrollTrigger skill — scroll-linked animation, pinning, scrub and trigger positioning, with the exact start/end syntax agents get wrong.

DevelopmentDesign & Creative

Skill: Cloud Solution Architect

by Microsoft

New

Microsoft's official skill that turns an agent into an Azure solution architect — 10 design principles, 6 architecture styles, 44 design patterns and a Well-Architected review workflow.

Development