remotion-video-creation

A Claude Code skill from Affaan M's everything-claude-code repo that bundles 29 domain-specific Remotion rule files behind a single dispatcher — 3D (Three.js / R3F), animations, audio, captions, charts, transitions, Lottie, Tailwind, sequencing, trimming — read only the rules that match the React video task at hand.

Pick the right Remotion rule file for the task instead of dumping the whole Remotion docs into context

Source Affaan M

License MIT

First documented 2026-05-12

Receipts TODO

Content

Trigger phrases

Phrases that activate this skill when typed to Claude Code:

build a Remotion composition with captions
Remotion 3D scene with React Three Fiber
TikTok-style word-highlight captions in Remotion

What it does

remotion-video-creation is the React-video skill in Affaan M’s everything-claude-code — see skills/remotion-video-creation. It’s a dispatcher over 29 individual rule files covering the parts of Remotion that change shape per task: how to do 3D with Three.js and React Three Fiber, animation primitives (interpolation, springs, easing), audio import / trim / volume / pitch, importing .srt captions vs. TikTok-style page captions with word highlighting, charts, transitions, Lottie embedding, sequencing, trimming, and timing.

The pattern is the same as MiniMax-AI’s shader-dev: routing-first, lazy-read. Rather than load the whole Remotion knowledge base into context, the skill reads only the rule files that match the user’s request — rules/captions.md and rules/display-captions.md for a captioned video, rules/3d.md for a Three.js shot, rules/timing.md and rules/sequencing.md for the choreography.

Each rule covers one concern with code examples and the relevant @remotion/* package imports (@remotion/captions, @remotion/three, @remotion/lottie, etc.). Mediabunny-backed helpers (can-decode, get-audio-duration, get-video-duration, get-video-dimensions, extract-frames) are isolated into their own rule files since they cover the metadata-extraction concerns Remotion punts to the browser.

When to use it

Building a React-based programmatic video — Remotion’s strength is JSX/React for composition, not standalone CLI rendering
Captioned video where you want either .srt import or TikTok-style per-word highlighting
3D scene composed in React Three Fiber that needs to render at video framerates
Chart-driven explainer where the chart is the visual primitive
Audio-heavy composition that needs trimming, volume curves, or speed/pitch control

When not to reach for it:

Mathematical-animation explainers (graphs, geometric proofs, state-machine diagrams) — that’s manim-video
Real-time interactive video — Remotion is for rendered output, not live playback
Quick social-media cuts that don’t need React composition — heavier toolchain than the use case warrants

Install

From affaan-m/everything-claude-code at skills/remotion-video-creation/. Drop the folder into ~/.claude/skills/remotion-video-creation/. The runtime needs a Remotion project scaffolded (npm create remotion-app@latest produces the entry point) plus React 18+, Node 22+, and any of the @remotion/* companion packages the chosen rule file calls for (captions / three / lottie / paths). Different toolchain from manim-video — Manim is Python CLI + ffmpeg, Remotion is React + Node + bundled rendering.

What a session looks like

State the composition goal. “I want a 30-second explainer with a 3D rotating product shot, voiceover, and TikTok-style captions that highlight word-by-word.”
Skill picks rule files. Routes to rules/3d.md, rules/audio.md, rules/transcribe-captions.md, rules/display-captions.md, rules/timing.md. Reads only those.
Scaffold the composition. Sets the duration, dimensions, and FPS via calculate-metadata.md patterns so the composition props drive everything else.
Wire the audio + captions. Pulls get-audio-duration from Mediabunny so the composition length matches the voiceover; transcription rule generates the caption JSON.
Compose the 3D shot. R3F rule covers the canvas, camera, lighting. Sequencing rule decides when the 3D shot enters and exits.
Render and iterate. Single render, inspect, adjust timing curves via rules/timing.md (interpolation vs. spring presets), re-render.

The discipline that makes it work: rule-file boundary. Each Remotion concern (audio, captions, 3D, transitions) is self-contained — the skill enforces reading only what the task needs rather than loading 29 files of context for a 3-file task.

Receipts

TODO — to be filled in from a real session. Once the skill has been used to produce a real Remotion composition, this section will capture: which rule files the dispatcher actually picked vs. what the composition turned out to need, whether the TikTok-style caption renderer matched the voiceover timing on first try or needed get-audio-duration correction, the per-frame render cost for the chosen resolution/FPS, and any @remotion/* package version pin that broke after a npm install (R3F integration is the usual breakage seam).

Source and attribution

From Affaan M’s everything-claude-code — an MIT-licensed skill collection covering harness construction, agent ops, video, payments, and platform-specific patterns.

License: MIT.