Name: RemotionUI
Author: RemotionUI

RemotionUI is the component layer for Remotion: production-ready source you install with the CLI. Use Remotion for framework fundamentals, rendering, Studio, Player, and APIs. Use RemotionUI when you need ready-made components for captions, charts, scenes, transitions, and composition templates.

Starter prompt

For an agent with no MCP server and no installed skill, paste this and go:

Starter promptPaste into Claude, ChatGPT, Cursor, or any coding agent

You are building a video with Remotion and RemotionUI.

RemotionUI is a copy-paste component registry for Remotion. The npm package is the CLI only — components are installed as source files into my project.

Read these first:
- https://remotionui.com/llms.txt — short entry point
- https://remotionui.com/llms-full.txt — full usage guide
- https://remotionui.com/ai/components.json — every component, with install command, import path, and tasks

Workflow:
1. Run `npx remotion-ui@latest init --existing` if there is no remotion-ui.json (or `init my-video` for a new project).
2. Find components with `npx remotion-ui@latest search -q <term> --json`.
3. Install with `npx remotion-ui@latest add <name>` before importing anything. This also installs dependencies and registers compositions in Root.tsx.
4. Import from local paths — @/remotion/primitives/..., @/remotion/scenes/..., @/compositions/... — never from the remotion-ui package.
5. Read props from https://remotionui.com/ai/components/<name>.json.
6. Edit the copied source files directly when I want design changes.

Rules:
- Drive all motion with useCurrentFrame(), interpolate(), spring(), and <Sequence />.
- Never use CSS transitions, CSS keyframes, or Tailwind animation classes — they do not render in video.
- Every command accepts --json and returns { ok: false, error: { code, message } } on failure.

Now help me build: <describe your video here>

Agent workflow

Create or open a Remotion project.
Install RemotionUI components with the CLI.
Import components from local source paths after installation.
Customize the copied files directly.
Use Remotion frame APIs for motion.

$ npx remotion-ui@latest search -q caption

Install

$ npx remotion-ui@latest add caption-highlight lower-third

Code

import { CaptionHighlight } from "@/remotion/primitives/caption-highlight";
import { LowerThird } from "@/remotion/scenes/lower-third";

Do not import RemotionUI components from the npm package. The npm package is the CLI only. Components are installed as source files into the user's project.

Hard rules for agents

Run npx remotion-ui@latest add <component> before importing a component.
Import from local project paths such as @/remotion/primitives/..., @/remotion/scenes/..., or @/compositions/....
Use useCurrentFrame(), interpolate(), spring(), and <Sequence /> for render-time motion.
Do not use CSS transitions or Tailwind animation classes for video motion.
Preserve source ownership: edit copied component files when customization is needed.

AI-readable files

/llms.txt: short agent entry point
/llms-full.txt: full usage guide for LLMs
/ai/components.json: component discovery index
/ai/components/<name>.json: per-component detail — props (name, type, required, default, description), usage snippets, install command, import path, and related components
/ai/remotionui-agent.md: reusable agent prompt
/llms.mdx/docs/<path>: any docs page as raw Markdown — the Copy page for AI button at the top of each page copies exactly this

Agent-native tooling

npx remotion-ui init --agent-skill installs a Claude Code skill into the project at .claude/skills/remotionui-agent/SKILL.md, covering the CLI workflow and animation rules above.
Every CLI command supports --json for structured output and structured {code, message} errors — safe for agents to parse instead of scraping stdout.
remotion-ui-mcp is an MCP server exposing the registry as agent tools (list-components, search-components, get-component-detail, get-install-command) over stdio, for MCP-capable agents. See MCP Server for install and config.
Registry items may declare compat.remotion; add warns on a mismatch with the installed Remotion version. See Remotion version compatibility.