How do I install the Remotion skill?

Run npx skillmds@latest add ggprompts-my-plugins/remotion 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 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?

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 free to use?

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

Who published Remotion?

GGPrompts (@ggprompts-my-plugins) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Remotion by ggprompts-my-plugins — Agent Skill

Name: Remotion
Rating: 4.2 (5 reviews)
Author: GGPrompts

File contents

Remotion Best Practices

Create videos programmatically using React. Use this skill when working with Remotion code for domain-specific knowledge.

Quick Start

npx create-video@latest

Core Concepts

Concept	Reference
Compositions & structure	@references/compositions.md
Animation fundamentals	@references/animations.md
Timing & interpolation	@references/timing.md
Sequencing patterns	@references/sequencing.md
Transitions	@references/transitions.md
Trimming	@references/trimming.md

Media

Topic	Reference
Videos	@references/videos.md
Audio & sound	@references/audio.md
Images	@references/images.md
GIFs	@references/gifs.md
Assets (importing)	@references/assets.md
Fonts	@references/fonts.md

Captions & Text

Topic	Reference
Display captions	@references/display-captions.md
Import SRT files	@references/import-srt-captions.md
Transcribe audio	@references/transcribe-captions.md
Text animations	@references/text-animations.md
Measuring text	@references/measuring-text.md

Advanced

Topic	Reference
3D with Three.js	@references/3d.md
Charts & data viz	@references/charts.md
Lottie animations	@references/lottie.md
Maps (Mapbox)	@references/maps.md
Parameters (Zod)	@references/parameters.md
Calculate metadata	@references/calculate-metadata.md
TailwindCSS	@references/tailwind.md

Utilities

Topic	Reference
Get video duration	@references/get-video-duration.md
Get video dimensions	@references/get-video-dimensions.md
Get audio duration	@references/get-audio-duration.md
Extract frames	@references/extract-frames.md
Check decode support	@references/can-decode.md
Measure DOM nodes	@references/measuring-dom-nodes.md

Key Rules

No self-animating content - All animations must be driven by useCurrentFrame()
Never use useFrame() - React Three Fiber's hook causes flickering during render
Sequence layout - Use layout="none" on <Sequence> inside <ThreeCanvas>
Declarative animations - Write animations in markup, not imperative loops

---name: remotiondescription: Remotion video creation in React - compositions, animations, timing, audio/video, captions, 3D. Use when creating programmatic videos, animations, or working with Remotion code.---# Remotion Best PracticesCreate videos programmatically using React. Use this skill when working with Remotion code for domain-specific knowledge.## Quick Start```bashnpx create-video@latest```## Core Concepts| Concept | Reference ||---------|-----------|| Compositions & structure | @references/compositions.md || Animation fundamentals | @references/animations.md || Timing & interpolation | @references/timing.md || Sequencing patterns | @references/sequencing.md || Transitions | @references/transitions.md || Trimming | @references/trimming.md |## Media| Topic | Reference ||-------|-----------|| Videos | @references/videos.md || Audio & sound | @references/audio.md || Images | @references/images.md || GIFs | @references/gifs.md || Assets (importing) | @references/assets.md || Fonts | @references/fonts.md |## Captions & Text| Topic | Reference ||-------|-----------|| Display captions | @references/display-captions.md || Import SRT files | @references/import-srt-captions.md || Transcribe audio | @references/transcribe-captions.md || Text animations | @references/text-animations.md || Measuring text | @references/measuring-text.md |## Advanced| Topic | Reference ||-------|-----------|| 3D with Three.js | @references/3d.md || Charts & data viz | @references/charts.md || Lottie animations | @references/lottie.md || Maps (Mapbox) | @references/maps.md || Parameters (Zod) | @references/parameters.md || Calculate metadata | @references/calculate-metadata.md || TailwindCSS | @references/tailwind.md |## Utilities| Topic | Reference ||-------|-----------|| Get video duration | @references/get-video-duration.md || Get video dimensions | @references/get-video-dimensions.md || Get audio duration | @references/get-audio-duration.md || Extract frames | @references/extract-frames.md || Check decode support | @references/can-decode.md || Measure DOM nodes | @references/measuring-dom-nodes.md |## Key Rules1. **No self-animating content** - All animations must be driven by `useCurrentFrame()`2. **Never use `useFrame()`** - React Three Fiber's hook causes flickering during render3. **Sequence layout** - Use `layout="none"` on `<Sequence>` inside `<ThreeCanvas>`4. **Declarative animations** - Write animations in markup, not imperative loops

Frequently asked questions

Remotion