Programmatic React video best practices for Remotion. Use this skill whenever the user is writing, debugging, or rendering Remotion code — compositions, useCurrentFrame animations, interpolate, spring, Sequence timing, <Img>/<Video>/<Audio> from @remotion/media, staticFile, calculateMetadata, the Studio preview, `npx remotion render`, captions, subtitles, voiceover, audio visualization, ffmpeg, transitions, light leaks, transparent video, Lottie, 3D scenes, Mapbox flyovers. Triggers especially on HtmlInCanvas / "html in canvas" requests, CRT terminal effects, glitch effects, video shaders, WebGL video, and any request to scaffold a new programmatic React video. Owns `remotion render` and everything about Remotion code. Do NOT trigger for finished MP4 ad assembly from existing slides (that is `/video-content`) or for the inspiration-to-MP4 reference-video pipeline (that is `/cmo-video`).
El comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.
¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
Explorador de archivos
61 archivos
Mostrando SKILL.md
SKILL.md
Instrucciones de origen · Vista previa de solo lectura
name
remotion-best-practices
description
Programmatic React video best practices for Remotion. Use this skill whenever the user is writing, debugging, or rendering Remotion code — compositions, useCurrentFrame animations, interpolate, spring, Sequence timing, <Img>/<Video>/<Audio> from @remotion/media, staticFile, calculateMetadata, the Studio preview, `npx remotion render`, captions, subtitles, voiceover, audio visualization, ffmpeg, transitions, light leaks, transparent video, Lottie, 3D scenes, Mapbox flyovers. Triggers especially on HtmlInCanvas / "html in canvas" requests, CRT terminal effects, glitch effects, video shaders, WebGL video, and any request to scaffold a new programmatic React video. Owns `remotion render` and everything about Remotion code. Do NOT trigger for finished MP4 ad assembly from existing slides (that is `/video-content`) or for the inspiration-to-MP4 reference-video pipeline (that is `/cmo-video`).
Domain-specific knowledge for writing, animating, and rendering Remotion videos in React. Mirrored from the upstream remotion-dev/skills and remotion-dev/remotion.claude snapshots — see upstream.json for SHAs and scripts/check-upstream.sh for drift detection.
This is a knowledge skill. Other skills (/cmo-remotion, /video-content, /tiktok-slideshow) chain into it for the rules. Don't invoke it directly to render a video — invoke it to ground yourself before you touch composition code.
On Activation
Read brand files in this order. Each is a soft input — every section below works at L0 with no brand at all:
brand/creative-kit.md — colors, typography, visual brand style. Drives palette, font choice, and the look of any composition you scaffold.
brand/voice-profile.md — tone, vocabulary. Drives any visible text (titles, captions, subtitle phrasing).
brand/audience.md — who watches. Drives pacing (tight cuts for B2C scroll feeds, longer holds for B2B explainers).
brand/positioning.md — what the video is selling. Drives narrative beats and CTA copy.
If any file is missing or template, fall back to neutral defaults: 1920×1080 @ 30fps, system font stack, 6-second hold per beat. Tell the user once: "Brand files thin — using neutral defaults. Run /cmo foundation to ground future videos."
When to use
User mentions Remotion, useCurrentFrame, interpolate, spring, <Sequence>, <Composition>, staticFile.
User wants to scaffold a programmatic React video (npx create-video@latest).
User wants HtmlInCanvas, CRT terminal, glitch, video shader, or WebGL post-processing.
User is debugging captions, subtitles, voiceover, audio visualization, or ffmpeg-piped Remotion work.
User is rendering with npx remotion render and hitting WebGL / GPU / fps issues.
Do not use for: assembling a finished MP4 from existing slide PNGs (/video-content), inspiration-to-MP4 from a reference URL (/cmo-video), or TikTok slideshow chains (/tiktok-slideshow).
Hard Rules
These are non-negotiable. Violating them produces black frames, stuttered playback, or render failures.
Rule
Why
CSS transitions / @keyframes are FORBIDDEN.
Remotion renders frame-by-frame. CSS animations are time-based and will not advance during a still or video render.
Tailwind animation classes (animate-*) are FORBIDDEN.
Same reason — they compile to CSS animations. Tailwind for layout/colors is fine; Tailwind for motion is broken.
Drive every motion off useCurrentFrame() + interpolate() or spring().
Frame is the only source of truth Remotion can serialize across the render worker pool.
Use <Img>, <Video>, <Audio> from @remotion/media — never native <img> / <video> / <audio>.
Native elements don't participate in Remotion's frame-locking, so video frames desync from the timeline and audio drifts.
Reference public assets via staticFile("path") — never hardcoded /path or ./path.
staticFile resolves correctly in Studio, in the renderer, and in deployed Lambda functions. Hardcoded paths break in Lambda.
Render-then-inspect.
A composition that looks right in Studio can still ship broken frames. Render a still or short clip and look at it before declaring done.
One-frame sanity check before any long render.
npx remotion still <id> --frame=30 --scale=0.25 is ~2 seconds. Catches missing assets, font fallbacks, layout overflow, and Tailwind misconfigs before you burn 20 minutes on a 30-second render.
New project setup
When in an empty folder or a workspace with no existing Remotion project:
npx create-video@latest --yes --blank --no-tailwind my-video
cd my-video
npx remotion studio
Flags:
--yes — skip the interactive prompt.
--blank — minimal scaffold, no demo composition.
--no-tailwind — Tailwind ships with animate-* utilities that will tempt the next agent to use forbidden CSS animations. Skip it. Add Tailwind later only if you need its layout utilities and you're disciplined about animation.
For mktg projects, scaffold under marketing/video/<name>/ so renders land alongside the rest of the marketing artifacts.
Rule Index — load on demand
The full rule corpus lives in rules/. Load only what you need for the current task — don't preload everything.
Width / height / fps / duration belong on the <Composition> in src/Root.tsx. For dynamic durations (e.g., audio-driven length), use calculateMetadata — see rules/calculate-metadata.md.
Render pipeline
# Preview interactively
npx remotion studio
# One-frame sanity check (always do this first)
npx remotion still MyComposition --frame=30 --scale=0.25 --output=out/check.png
# Full render
npx remotion render MyComposition out/video.mp4
# WebGL effects (HtmlInCanvas + WebGL, shaders, Three.js)
npx remotion render MyComposition out/video.mp4 --gl=angle
Set --gl=angle as the default in remotion.config.ts once a project uses WebGL anywhere — it avoids "blank frames in render but fine in Studio" surprises.
<HtmlInCanvas> renders DOM children into a <canvas> so you can post-process them with the Canvas 2D API or WebGL. This is how you build CRT terminals, glitch effects, video shaders, and other "DOM but with a filter on top" looks.
Constraints:
Chrome 149+ with chrome://flags/#canvas-draw-element enabled. Tell the user this once.
Non-Chromium machines cannot render — flag it before starting work.
Do NOT nest <HtmlInCanvas> inside another <HtmlInCanvas>. Remotion throws.
Use --gl=angle whenever the inner effect uses WebGL.
Working 2D blur example (frame-driven blur radius via onPaint):
The script compares pinned SHAs in upstream.json against the latest commits in both upstream repos and reports added/changed rule files. Owned by ironmint — do not edit upstream.json or scripts/ from this skill.
How this composes
Three sibling skills overlap. Pick the right entry point — they are not interchangeable.
Skill
Use when
Inputs
Output
remotion-best-practices
You are writing or debugging Remotion code itself. Domain knowledge only.
Composition source, rendering question
Guidance + rule pointers
/cmo-remotion
You want a polished programmatic video built end-to-end with mktg brand context.
Brief, brand files
Scaffolded composition + render
/video-content
You already have slide PNGs and want them assembled into an MP4 (ffmpeg or Remotion tier).
PNG slides, audio
Finished MP4
/tiktok-slideshow
You want the full pipeline from positioning angle to TikTok-ready video.
Positioning angle
Script → slides → video
remotion-best-practices is the shared knowledge layer under /cmo-remotion and /video-content (Remotion tier). Skills do not call it directly — they chain in the rules they need by file path.
Attribution
Mirrored from:
Primary:remotion-dev/skills — skills/remotion/SKILL.md and the full skills/remotion/rules/ tree (35 files).
Secondary:remotion-dev/remotion — .claude/ patterns referenced in references/upstream-internal/MAP.md.
Snapshot SHAs and pinned tags live in upstream.json. Curated and adapted via /mktg-steal on 2026-05-04.
Credit to @JonnyBurger and the Remotion contributors. Upstream is MIT-licensed; see each upstream repo for the canonical license text. The mktg adaptation only changes the entry-point SKILL.md (this file) and adds provenance scaffolding — the rule corpus is mirrored verbatim.
