Claude Skill

remotion-create

Create a new Remotion video

LLM Mart · 0 points · 0 0 0

Virus-scanned Reviewed automatically before listing.

Full trust report

Download muzimu217-ui-design-agent-kit-.agents_skills_remotion-create-aa38774.zip · 3 KB

muzimu217/ui-design-agent-kit 19 3 forks Updated 7d ago

Part of muzimu217/ui-design-agent-kit — 23 skills

Install

skills CLI npx skills add https://github.com/muzimu217/ui-design-agent-kit/tree/main/.agents/skills/remotion-create

Claude Code

claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install muzimu217-ui-design-agent-kit@llmmart

Git git clone https://github.com/muzimu217/ui-design-agent-kit.git

The skills CLI installs just this skill, for any of its supported agents. Claude Code installs the whole muzimu217/ui-design-agent-kit collection as a plugin from our marketplace. Git is the plain clone.

Skill manifest

These are instructions for making a new Remotion project and composition.
If this is not the next task, see Remotion Best Practices

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 and Video Layout Rules 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.

Interactivity Best Practices

By structuring the React Markup following Remotion Interactivity Best Practices, you allow the user to make edits in the Studio which write back to code.

TailwindCSS

If Tailwind is requested, see tailwind.md for using TailwindCSS in Remotion.

Open the preview

Start the preview server after building the composition:

npx remotion studio --no-open

This will start a long-running process and print the server URL for the preview.
If the 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.

Render the video

Only render if the user explicitly asks for it.

npx remotion render

For more options, see Rendering.

Follow-up

The video creation process has finished. For follow-up prompts, use Remotion Best Practices

Files (ui-design-agent-kit)

agents

openai.yaml 310 B

interface:
  display_name: '/remotion-create'
  short_description: 'Create a new Remotion video project'
  icon_small: './assets/remotion-icon.png'
  icon_large: './assets/remotion-icon.png'
  brand_color: '#0B84F3'
  default_prompt: '$remotion-create: Create a Remotion video and make a promo for my product'

assets
- remotion-icon.png 1.3 KB · in bundle

SKILL.md 1.8 KB

---
name: remotion-create
description: Create a new Remotion video
metadata:
  version: "4.0.520"
---

These are instructions for making a new Remotion project and composition.  
If this is not the next task, see Remotion Best Practices

## 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 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.

## Interactivity Best Practices

By structuring the React Markup following Remotion Interactivity Best Practices, 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.

## Open the preview

Start the preview server after building the composition:

```bash
npx remotion studio --no-open
```

This will start a long-running process and print the server URL for the preview.  
If the 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`.

## Render the video

Only render if the user explicitly asks for it.

```
npx remotion render
```

For more options, see Rendering.

## Follow-up

The video creation process has finished.
For follow-up prompts, use Remotion Best Practices

tailwind.md 386 B

---
name: tailwind
description: Using TailwindCSS in Remotion.
metadata:
---

You can and should use TailwindCSS in Remotion, if TailwindCSS is installed in the project.

Don't use `transition-*` or `animate-*` classes - always animate using the `useCurrentFrame()` hook.

Tailwind must be installed and enabled first in a Remotion project - see https://www.remotion.dev/docs/tailwind.

video-layout.md 498 B

You are designing a video, not a webpage.

- Decide what the viewer should notice first in each scene. Build the frame around that one thing.
- Keep important content inside a generous safe area. For 1080px-wide videos, keep key text at least 80px from the sides and 100px from the top and bottom.
- Do not add redundant elements.
- For 1080px-wide compositions, use these rough minimums:
  - Main headline: 84px
  - Important supporting text: 44px
- Scale those values with the composition width.