| name | remotionui-agent |
| description | Build Remotion videos with RemotionUI: recipes, CLI install workflow, composition registration, and agent indexes. Use when the user wants captioned social clips, creator reels, data stories, or programmatic video. |
| metadata | {"tags":"remotion, remotion-ui, video, compositions, cli"} |
RemotionUI Agent
Use this skill when helping users build full Remotion compositions with RemotionUI, not one-off effects.
Hard rules
- Use Remotion docs for framework fundamentals.
- Use RemotionUI for ready-made source components copied into the user's repo.
- Run
npx remotion-ui@latest add <component> before importing a component.
- Prefer recipes:
npx remotion-ui@latest add --recipe captioned-social-video
- Import from local paths:
@/compositions/..., @/remotion/scenes/..., @/remotion/primitives/...
- Never import UI components from the
remotion-ui npm package.
- Animate with
useCurrentFrame(), interpolate(), spring(), and <Sequence />.
- Do not use CSS transitions or Tailwind animation classes for render-time motion.
Workflow
- Understand the video goal (social clip, podcast, data story, product intro).
- Pick a recipe from https://remotionui.com/ai/recipes.json
- Run
npx remotion-ui doctor if setup looks broken.
- Install:
npx remotion-ui add --recipe <slug> or npx remotion-ui add <name>
- Import from local source paths and compose in
Root.tsx.
- Customize copied source for brand, timing, and layout.
Agent indexes
CLI (agent-friendly)
npx remotion-ui init --existing
npx remotion-ui doctor --json
npx remotion-ui search -q caption --json
npx remotion-ui view social-clip --json
npx remotion-ui list --json
npx remotion-ui add --recipe captioned-social-video
Existing Remotion projects
cd your-remotion-project
npx remotion-ui init --existing
npx remotion-ui add social-clip
npm run dev
Composition-first defaults
| Goal | Recipe | Flagship composition |
|---|
| 9:16 social clip | captioned-social-video | social-clip |
| Creator reel | (none) | creator-reel |
| Podcast clip | podcast-clip | podcast-clip |
| Data explainer | data-story | data-story |
| Product launch | product-intro | intro |
