Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Remotion Motion Graphics

Turns Claude into a motion designer that builds Remotion (React) videos with strict craft rules and a mandatory render-and-inspect verification loop.

Image & VideoIntermediate★ 137⑂ 13AI score 9/10Last updated: Aug 12, 2026

What it does

  • Scaffolds a new Remotion project (theme, Root, scenes, components) or reads and refactors an existing one to meet motion-design rules.
  • Blocks the "generic AI video" look: no linear easing, no opacity-only entrances, mandatory 3–6 frame stagger, exits faster than entrances, fps-derived timing.
  • Enforces a five-layer scene stack (background mesh → assets → graphics/type → color grade → grain + vignette) plus Ken Burns on stills and <OffthreadVideo> for footage.
  • Requires a verification loop: render, extract key frames as PNGs with remotion still or ffmpeg -ss, visually inspect against a bug checklist, fix, re-render.
  • Includes render-environment troubleshooting (Chromium auto-download failures, headless_shell, ffprobe for clip duration/fps) and a reusable pattern/reference library.

Who it's for

  • React/frontend developers who want to produce video programmatically.
  • Marketers and creators shipping Reels/Shorts, launch videos, intros and logo animations.
  • Anyone whose AI-generated videos keep coming out flat, basic, or amateur.

Example uses

  1. "Make a 15s 1080×1920 product launch Reel in our brand colors" → theme setup, scene composition, render, frame-by-frame check.
  2. "Add word-synced captions, a color grade and an intro to public/clip.mp4" → the clip becomes the asset layer with graphics and grain stacked above.
  3. "My existing Remotion project looks amateur" → reads all of src/, replaces linear interpolations with springs, adds stagger and the missing layers.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/haidrrrry/claude-remotion-skill/HEAD/remotion-motion-graphics/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the remotion-motion-graphics folder from the GitHub repo haidrrrry/claude-remotion-skill into my ~/.claude/skills/remotion-motion-graphics/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/haidrrrry/claude-remotion-skill.git /tmp/claude-remotion-skill && mkdir -p ~/.claude/skills && cp -r /tmp/claude-remotion-skill/remotion-motion-graphics ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Confirm Node.js 18+ and npm are installed: node -v
  2. Clone the skill repository: git clone https://github.com/haidrrrry/claude-remotion-skill.git
  3. Copy the skill into Claude's skills directory: mkdir -p ~/.claude/skills && cp -r claude-remotion-skill/remotion-motion-graphics ~/.claude/skills/
  4. Verify that references/ and assets/theme.ts came along inside ~/.claude/skills/remotion-motion-graphics.
  5. Restart Claude Code and ask for something like "build a promo Reel" — the skill triggers automatically.
  6. On the first render Remotion downloads Chromium; in offline or sandboxed environments pass a local browser with --browser-executable as described in SKILL.md.
View source on GitHub ↗License: MIT