How do I install the Remotion Video skill?

Run npx skillmds add majiayu000/remotion-video-2 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Remotion Video safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Remotion Video?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Remotion Video free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Remotion Video?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Remotion Video by majiayu000 — Agent Skill

Name: Remotion Video
Rating: 4.2 (5 reviews)
Author: majiayu000

Remotion Video

Build and render Remotion videos using React compositions. Use when defining `<Composition>` entries (often in `src/Root.tsx`), implementing deterministic frame-based animations with `useCurrentFrame()`, sequencing (`Sequence`/`Series`/`TransitionSeries`), and adding media via `OffthreadVideo`, `Img`, `Audio`, and `staticFile()`.

majiayu000 2da4dd4 2 files · 2.6 KB Updated Sep 9, 2026 567 repo stars

File contents

Remotion Video (React)

Instructions

Define one or more compositions (commonly in src/Root.tsx).
- Use defaults unless specified otherwise: fps={30}, width={1920}, height={1080}, and composition id="MyComp".
- Ensure defaultProps matches the React component props shape and is JSON-serializable.
Implement video components as deterministic, frame-driven React.
- Drive animations from useCurrentFrame() and useVideoConfig().
- Avoid Math.random(); use Remotion’s random(seed).
- Avoid interactive UI patterns (no click handlers / hover state). Prefer pure functions of frame + props.
Use the right primitives for timing, layering, and animation.
- Layer elements with AbsoluteFill.
- Time-shift mounts with Sequence and play back-to-back with Series.
- For transitions between clips, use TransitionSeries from @remotion/transitions.
- Use interpolate() (usually with {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'}) and/or spring() for motion.
Use the correct media tags.
- Video: prefer <OffthreadVideo>.
- Images: use <Img>.
- GIFs: use <Gif> from @remotion/gif.
- Audio: use <Audio>.
- For local assets in public/, use staticFile('...').
Preview and render.
- Start Studio: npx remotion studio (alias: npx remotion preview).
- Render: npx remotion render <composition-id> <output-path> (if you omit the ID, Remotion will prompt).
When unsure, read the bundled references.
- Detailed patterns/snippets: references/remotion-notes.md
- CLI notes: references/remotion-cli.md
- Media notes: references/remotion-media.md

Examples

Minimal composition + frame-based component

See references/remotion-notes.md for the canonical src/Root.tsx + MyComp snippets.

---name: remotion-video-2description: Build and render Remotion videos using React compositions. Use when defining `<Composition>` entries (often in `src/Root.tsx`), implementing deterministic frame-based animations with `useCurrentFrame()`, sequencing (`Sequence`/`Series`/`TransitionSeries`), and adding media via `OffthreadVideo`, `Img`, `Audio`, and `staticFile()`.--- # Remotion Video (React) ## Instructions 1. Define one or more compositions (commonly in `src/Root.tsx`). - Use defaults unless specified otherwise: `fps={30}`, `width={1920}`, `height={1080}`, and composition `id="MyComp"`. - Ensure `defaultProps` matches the React component props shape and is JSON-serializable. 2. Implement video components as deterministic, frame-driven React. - Drive animations from `useCurrentFrame()` and `useVideoConfig()`. - Avoid `Math.random()`; use Remotion’s `random(seed)`. - Avoid interactive UI patterns (no click handlers / hover state). Prefer pure functions of `frame` + props. 3. Use the right primitives for timing, layering, and animation. - Layer elements with `AbsoluteFill`. - Time-shift mounts with `Sequence` and play back-to-back with `Series`. - For transitions between clips, use `TransitionSeries` from `@remotion/transitions`. - Use `interpolate()` (usually with `{extrapolateLeft: 'clamp', extrapolateRight: 'clamp'}`) and/or `spring()` for motion. 4. Use the correct media tags. - Video: prefer `<OffthreadVideo>`. - Images: use `<Img>`. - GIFs: use `<Gif>` from `@remotion/gif`. - Audio: use `<Audio>`. - For local assets in `public/`, use `staticFile('...')`. 5. Preview and render. - Start Studio: `npx remotion studio` (alias: `npx remotion preview`). - Render: `npx remotion render <composition-id> <output-path>` (if you omit the ID, Remotion will prompt). 6. When unsure, read the bundled references. - Detailed patterns/snippets: `references/remotion-notes.md` - CLI notes: `references/remotion-cli.md` - Media notes: `references/remotion-media.md` ## Examples ### Minimal composition + frame-based component See `references/remotion-notes.md` for the canonical `src/Root.tsx` + `MyComp` snippets.

Frequently asked questions