skills.rest
davide97g
davide97gCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

remotion-best-practices

Create programmatic videos in React using Remotion compositions, animations, and media components.

2|Updated Apr 18, 2026
Search Tags:#react#captions#composition#animation#video generation#remotion#programmatic video
One-click install
npx skills add https://github.com/davide97g/pulse-hr --skill remotion-best-practices-davide97g
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion-best-practices
Source: https://github.com/davide97g/pulse-hr/tree/main/.agents/skills/remotion-best-practices
Command: npx skills add https://github.com/davide97g/pulse-hr --skill remotion-best-practices-davide97g

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires remotion, @remotion/media, @remotion/captions, @remotion/three, @remotion/lottie, @remotion/google-fonts, @remotion/transitions, mediabunny, maplibre-gl, @turf/turf, zod, and includes references (resource) and assets (resource) components.

What problem does it solve? Writing video generation code in Remotion requires framework-specific knowledge—CSS animations break during rendering, assets must be referenced via staticFile(), and timing must be driven by useCurrentFrame(). This Skill provides the domain rules and patterns needed to write Remotion code that renders correctly. ## Core Features & Use Cases - Project scaffolding and composition setup: Create new Remotion projects, define compositions with width, height, fps, and duration, and compute metadata dynamically with calculateMetadata. - Animation and timing patterns: Animate properties with useCurrentFrame(), interpolate(), and Bézier easing; sequence elements with <Sequence> and <Series>. - Media and asset handling: Embed images, videos, audio, GIFs, Lottie animations, fonts, captions, maps, and 3D content via dedicated rule files loaded on demand. - Use Case: Ask the AI to build a 30-second product promo video with animated titles, background music, and TikTok-style captions—the Skill supplies the correct Remotion patterns for each element. ## Quick Start Use the remotion-best-practices skill to scaffold a new Remotion project and create an animated title composition.

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 React and Remotion?▼

Scaffold a project with npx create-video@latest, define a <Composition> in src/Root.tsx with width, height, fps, and durationInFrames, then build scenes using React components. Preview the result with npx remotion studio.

How do I animate elements in Remotion?▼

Animate with useCurrentFrame() and interpolate(), optionally adding Easing.bezier() for custom timing curves. CSS transitions, CSS animations, and Tailwind animation classes are forbidden because they do not render correctly.

Why do my CSS animations not render in Remotion?▼

Remotion renders each frame deterministically, so time-based CSS animations and transitions produce incorrect output. All motion must be driven by useCurrentFrame() so every frame is computed from the frame number.

How do I add audio or video to a Remotion composition?▼

Use the <Audio> and <Video> components from @remotion/media, referencing local files with staticFile() from the public folder or remote URLs directly. Props like trimBefore, trimAfter, volume, and playbackRate control playback.

Can I use TailwindCSS and Google Fonts in Remotion?▼

Yes. TailwindCSS works if installed in the project, but transition-* and animate-* classes must be avoided. Google Fonts load via @remotion/google-fonts with loadFont(), which blocks rendering until the font is ready.

How do I add captions or subtitles to a Remotion video?▼

Use the @remotion/captions package with the Caption type. You can transcribe audio, import .srt files with parseSrt(), and display TikTok-style pages with word highlighting using createTikTokStyleCaptions().

Related Skills

Explore More Software Engineering Skills→
sunzcdevsunzcdev

remotion-best-practices

Enforce deterministic Remotion implementation rules for media, timing, and overlays.

Community
Intermediate
openaiopenai
5.3k

remotion-render

Render Remotion videos and stills via CLI with transparent ProRes and WebM output options.

Official
Basic
jholhewresjholhewres
3

audio-tts

Convert text to speech and manipulate audio via APIs and command-line tools.

Community
Intermediate
pelcherspelchers

automating-premiere-pro

Automates Adobe Premiere Pro editing workflows via ExtendScript for batch rendering and templated sequences.

Community
Intermediate