remotion-best-practices
Best practices and domain knowledge for building videos programmatically with Remotion (videos in React/TypeScript, rendered to MP4). Use whenever writing or editing Remotion code — scaffolding a video project, animating with interpolate/spring over useCurrentFrame(), sequencing scenes and transitions, captions/subtitles, audio, GIFs/Lottie/3D, charts, visual effects, dynamic duration via calculateMetadata, or rendering. Consult before reaching for a Remotion API, since its components and props evolve (e.g. @remotion/media).
npx skills add guanyang/open-agent-hub --skill remotion --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
## When to use Use this skill whenever you are dealing with Remotion code to obtain the domain-specific knowledge. ## New project setup When in an empty folder or workspace with no existing Remotion project, scaffold one using: ```bash npx create-video@latest --yes --blank --no-tailwind my-video ``` Replace `my-video` with a suitable project name. ## Designing a video Before designing visual scenes, layouts, promos, motion graphics, or text-heavy videos, load [rules/video-layout.md](rules/video-layout.md) for video-first layout and text sizing guidance. Animate properties using `useCurrentFrame()` and `interpolate()`. Prefer `interpolate()` over `spring()` unless physics-based motion is explicitly needed. Use `Easing.bezier()` to customize timing, including jumpy or overshooting motion. For animations that should be editable in Remotion Studio, keep the `interpolate()` call inline in the `style` prop and use individual CSS transform properties (`scale`, `translate`, `rotate`) instead of composing a `transform` string. ```tsx import { useCurrentFrame, Easing, interpolate, useVideoConfig } from "remotion"; export const FadeIn = () => { const frame = useCurrentFrame(); const { fps } =
- When to use
- New project setup
- Designing a video
- Starting preview
- Optional: one-frame render check
- Captions
- Using FFmpeg
- Silence detection
- Audio visualization
- Sound effects
- Visual and pixel effects
- 3D content
- Advanced audio
- Dynamic duration, dimensions and data
npx create-video@latest --yes --blank --no-tailwind my-video npx remotion studio npx remotion still [composition-id] --scale=0.25 --frame=30
What does the remotion-best-practices skill do?
Best practices and domain knowledge for building videos programmatically with Remotion (videos in React/TypeScript, rendered to MP4). Use whenever writing or editing Remotion code — scaffolding a video project, animating with interpolate/spring over useCurrentFrame(), sequencing scenes and transitions, captions/subtitles, audio, GIFs/Lottie/3D, charts, visual effects, dynamic duration via calculateMetadata, or rendering. Consult before reaching for a Remotion API, since its components and props evolve (e.g. @remotion/media).
How do I install it?
Run `npx skills add guanyang/open-agent-hub --skill remotion --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From guanyang/open-agent-hub, a repository with 940 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.