remotion-best-practices

Routes Remotion video creation tasks to specialized reference guides for markup, rendering, captions, and maps.

1|Updated Mar 27, 2026
One-click install
npx skills add https://github.com/lrstanley/skills --skill remotion-best-practices-lrstanley
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion-best-practices
Source: https://github.com/lrstanley/skills/tree/main/remotion-best-practices
Command: npx skills add https://github.com/lrstanley/skills --skill remotion-best-practices-lrstanley

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building videos programmatically with Remotion spans many subdomains—React markup, animations, captions, maps, 3D, rendering, and SaaS deployment—and knowing which rules apply to each task is difficult. This Skill acts as a router that directs the agent to the correct specialized reference guide for the task at hand. ## Core Features & Use Cases - Task Routing: Detects the user's intent (creating videos, writing markup, adding captions, rendering, upgrading) and loads the matching reference file. - Specialized Sub-Guides: Covers markup best practices, interactivity, maps (Mapbox, MapLibre, MapTiler, CesiumJS), captions, multimedia via Mediabunny, Studio preview, rendering, SaaS templates, docs lookup, and upgrades. - Use Case: A user asks to build an animated map explainer video. The router loads the Remotion Maps reference, which then directs to the MapLibre technique guide, ensuring frame-driven animations that render without flicker. ## Quick Start Ask the agent to create a Remotion video composition with animated captions and let it load the appropriate guides automatically.

Frequently Asked Questions about remotion-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a video with Remotion?▼

Scaffold a project with npx create-video@latest, then write React markup using useCurrentFrame() and interpolate() for animations. Preview with npx remotion studio and render with npx remotion render only when explicitly requested.

How do I add captions to a Remotion video?▼

Install @remotion/captions and process captions as JSON using the Caption type with text, startMs, and endMs fields. Use createTikTokStyleCaptions() to group words into pages and render each page in a Sequence with word highlighting.

Which map library should I use in Remotion?▼

MapLibre requires no API key and is fully free, Mapbox offers nicer default styles and 3D buildings but needs a key, MapTiler supports annotations over geographic features, and CesiumJS handles 3D terrain flythroughs.

Why does my Remotion animation flicker during rendering?▼

Flickering occurs when animations are not driven by useCurrentFrame(), such as CSS transitions, Tailwind animation classes, or useFrame() from React Three Fiber. Refactor all animations to use useCurrentFrame() with interpolate().

Can I use Remotion with Next.js or other frameworks?▼

Yes, Remotion provides templates for Next.js App and Pages Router, React Router 7, Vercel, and Express.js render servers. It also works with Vue, Angular, and Svelte through dedicated documentation guides.