Agent skill · design visual · haydenbleasel
remotion-best-practices
Best practices for Remotion - Video creation in React
Why this skill is useful
Provides domain-specific best practices and patterns for using Remotion in video creation that the AI wouldn't reliably generate on its own.
What it needs
About 5k tokens when loaded. Last updated 2026-08-07. 3,119 stars on the source repository.
What this skill does
When to use Use this skills 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: 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 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. Prefer: Over: CSS transitions or animations are FORBIDDEN - they will not render correctly. Tailwind animation class names are FORBIDDEN - they will not render correctly. Place assets in the public/ folder at your project root. Use staticFile() to reference files from the public/ folder. Add images using the <Img> component: Add videos using the <Video> component from @remotion/media: Add audio using the <Audio> component from @remotion/media: Assets can be also referenced as remote URLs: To delay content wrap it in <Sequence> and use from. To limit the duration of an element, use durationInFrames of <Sequence>. <Sequence> by default is an absolute fill. For inline content, use layout="none". The width, height, fps, and duration of a video is defined in src/Root.tsx: Metadata can also be calculated dynamically: Starting preview Start the Remotion Studio to preview a video: Optional: one-frame render check You can render a single frame with the CLI to sanity-check layout, colors, or timing. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills haydenbleasel/remotion-best-practices