remotion-best-practices

Name: remotion-best-practices
Author: MoizIbnYousaf

27stars5forks

How to install remotion-best-practices?

moizibnyousaf/marketing-cli/remotion-best-practices

$npx -y skills add MoizIbnYousaf/marketing-cli --skill remotion-best-practices

Installs into the current project.

Summary

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, calcu

Files · 1

View on GitHub

SKILL.md

1	# Remotion Best Practices
2
3	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.
4
5	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.
6
7	## On Activation
8
9	Read brand files in this order. Each is a soft input — every section below works at L0 with no brand at all:
10
11	1. `brand/creative-kit.md` — colors, typography, visual brand style. Drives palette, font choice, and the look of any composition you scaffold.
12	2. `brand/voice-profile.md` — tone, vocabulary. Drives any visible text (titles, captions, subtitle phrasing).
13	3. `brand/audience.md` — who watches. Drives pacing (tight cuts for B2C scroll feeds, longer holds for B2B explainers).
14	4. `brand/positioning.md` — what the video is selling. Drives narrative beats and CTA copy.
15
16	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."
17
18	## When to use
19
20	- User mentions Remotion, `useCurrentFrame`, `interpolate`, `spring`, `<Sequence>`, `<Composition>`, `staticFile`.
21	- User wants to scaffold a programmatic React video (`npx create-video@latest`).
22	- User wants HtmlInCanvas, CRT terminal, glitch, video shader, or WebGL post-processing.
23	- User is debugging captions, subtitles, voiceover, audio visualization, or ffmpeg-piped Remotion work.
24	- User is rendering with `npx remotion render` and hitting WebGL / GPU / fps issues.
25
26	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`).
27
28	## Hard Rules
29
30	These are non-negotiable. Violating them produces black frames, stuttered playback, or render failures.
31
32	\| Rule \| Why \|
33	\|---\|---\|
34	\| 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. \|
35	\| *Tailwind animation classes (`animate-`) are FORBIDDEN.** \| Same reason — they compile to CSS animations. Tailwind for layout/colors is fine; Tailwind for motion is broken. \|
36	\| Drive every motion off `useCurrentFrame()` + `interpolate()` or `spring()`. \| Frame is the only source of truth Remotion can serialize across the render worker pool. \|
37	\| 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. \|
38	\| 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. \|
39	\| Render-then-inspect. \| A composition that looks right in Studio can still ship bro

People who liked this also viewed

6 picks

Type

remotion-best-practices

27stars5forks

View on GitHub

How to install remotion-best-practices?

moizibnyousaf/marketing-cli/remotion-best-practices

$npx -y skills add MoizIbnYousaf/marketing-cli --skill remotion-best-practices

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Remotion Best Practices
2
3	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.
4
5	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.
6
7	## On Activation
8
9	Read brand files in this order. Each is a soft input — every section below works at L0 with no brand at all:
10
11	1. `brand/creative-kit.md` — colors, typography, visual brand style. Drives palette, font choice, and the look of any composition you scaffold.
12	2. `brand/voice-profile.md` — tone, vocabulary. Drives any visible text (titles, captions, subtitle phrasing).
13	3. `brand/audience.md` — who watches. Drives pacing (tight cuts for B2C scroll feeds, longer holds for B2B explainers).
14	4. `brand/positioning.md` — what the video is selling. Drives narrative beats and CTA copy.
15
16	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."
17
18	## When to use
19
20	- User mentions Remotion, `useCurrentFrame`, `interpolate`, `spring`, `<Sequence>`, `<Composition>`, `staticFile`.
21	- User wants to scaffold a programmatic React video (`npx create-video@latest`).
22	- User wants HtmlInCanvas, CRT terminal, glitch, video shader, or WebGL post-processing.
23	- User is debugging captions, subtitles, voiceover, audio visualization, or ffmpeg-piped Remotion work.
24	- User is rendering with `npx remotion render` and hitting WebGL / GPU / fps issues.
25
26	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`).
27
28	## Hard Rules
29
30	These are non-negotiable. Violating them produces black frames, stuttered playback, or render failures.
31
32	\| Rule \| Why \|
33	\|---\|---\|
34	\| 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. \|
35	\| *Tailwind animation classes (`animate-`) are FORBIDDEN.** \| Same reason — they compile to CSS animations. Tailwind for layout/colors is fine; Tailwind for motion is broken. \|
36	\| Drive every motion off `useCurrentFrame()` + `interpolate()` or `spring()`. \| Frame is the only source of truth Remotion can serialize across the render worker pool. \|
37	\| 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. \|
38	\| 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. \|
39	\| Render-then-inspect. \| A composition that looks right in Studio can still ship bro

People who liked this also viewed

6 picks

Type