skills.rest
xzedm
xzedmCOMMUNITY
Explore all skills by this author →
GitHub

remotion-best-practices

Provides domain-specific rules and patterns for writing Remotion programmatic video code in React.

Updated Sep 3, 2026
Search Tags:#best practices#react#captions#animation#video generation#remotion#programmatic video
One-click install
npx skills add https://github.com/xzedm/clipplic-landing --skill remotion-best-practices-xzedm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion-best-practices
Source: https://github.com/xzedm/clipplic-landing/tree/main/.agents/skills/remotion-best-practices
Command: npx skills add https://github.com/xzedm/clipplic-landing --skill remotion-best-practices-xzedm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developers working with Remotion (programmatic video creation in React) often lack domain-specific guidance on compositions, animations, media assets, and captions, leading to incorrect implementations and wasted debugging time. ## Core Features & Use Cases - Composition & Structure Rules: Guidance on defining compositions, dynamic metadata calculation, and parametrizing videos with Zod schemas. - Media & Animation Patterns: Best practices for images, videos, audio, fonts, GIFs, Lottie, 3D with Three.js, transitions, sequencing, and text animations. - Captions & Utilities: Instructions for importing SRT subtitles, transcribing audio, displaying TikTok-style captions, and using Mediabunny utilities like extracting frames or reading video duration. - Use Case: When building a video that displays animated captions synced to audio, consult the caption and timing rules to implement word highlighting and sequencing correctly. ## Quick Start Ask the AI to apply the Remotion best practices rules when writing or reviewing Remotion video code in your project.

Frequently Asked Questions about remotion-best-practices

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

FAQPage Schema
How do I add captions to a Remotion video?▼

Remotion captions can be imported from .srt files using @remotion/captions, generated by transcribing audio, and displayed with TikTok-style pages and word highlighting. The skill's caption rules cover each approach with code examples.

How to make a Remotion video parametrizable with dynamic props?▼

Add a Zod schema to your composition to define editable parameters, and use calculateMetadata to dynamically set duration, dimensions, and props based on input values.

Does Remotion support 3D content and charts?▼

Yes, Remotion supports 3D content through Three.js and React Three Fiber, and includes patterns for charts and data visualization. The skill provides dedicated rules for both topics.

Can I use TailwindCSS with Remotion?▼

Yes, TailwindCSS can be integrated into Remotion projects for styling video components. The skill includes a dedicated rule explaining the setup and usage patterns.

How do I get video duration or extract frames in Remotion?▼

Use Mediabunny-based utilities to get video or audio duration, read video dimensions, check browser decodability, and extract frames at specific timestamps. The skill documents each utility pattern.

Related Skills

Explore More Software Engineering Skills→
digitalsambadigitalsamba
1.9k

ffmpeg

Automates FFmpeg media processing to convert, resize, compress, and extract audio for Remotion projects.

Official
Advanced
nexu-ionexu-io
93.2k

video-template-frame-warm-grain

Generate motion video compositions using HTML, CSS, and GSAP with a warm grain aesthetic.

Official
Intermediate
louisedesadeleerlouisedesadeleer
82

find-broll

Source and place accurate b-roll cutaways against spoken beats in talking-head videos.

Community
Advanced
gaoqiongxiegaoqiongxie
1

remotion-video

Generate animated MP4 and WebM videos using React and Remotion.

Community
Intermediate