Agent skill · creative production · davila7
remotion
Best practices and comprehensive guide for Remotion - programmatic video creation in React with animations, compositions, and media handling
Why this skill is useful
Provides domain-specific knowledge and best practices for creating programmatic videos with Remotion that the AI wouldn't reliably generate on its own.
What it needs
Requires react, remotion installed locally. About 3k tokens when loaded. Last updated 2026-08-06. 30,138 stars on the source repository.
What this skill does
Remotion - Video Creation in React Comprehensive skill set for creating programmatic videos using Remotion, a framework for creating videos programmatically using React. When to use Use this skill whenever you are dealing with Remotion code to obtain domain-specific knowledge about: Creating video compositions with React components Animating elements using frame-based animations Working with audio, video, and image assets Building charts and data visualizations Implementing text animations and captions Using 3D content with Three.js Applying transitions and sequencing Integrating Tailwind CSS and Lottie animations Core Concepts Remotion allows you to create videos using: React Components: Build video content with familiar React syntax Frame-based Animations: All animations driven by useCurrentFrame() hook Compositions: Define video compositions with duration, dimensions, and props Assets: Import and manipulate images, videos, audio, and fonts Rendering: Export videos programmatically with customizable settings Key Features Frame-by-frame control over animations Dynamic metadata calculation Media processing (trimming, volume, speed, pitch) Caption generation and display Data visualization with charts 3D content integration Professional text animations Scene transitions and sequencing How to use Read individual rule files for detailed explanations and code examples: Core Animation & Timing references/animations.md - Fundamental animation techniques for Remotion references/timing.md - Interpolation curves: linear, easing, spring animations references/sequencing.md - Delay, trim, and limit duration of items references/trimming.md - Cut the beginning or end of animations Compositions & Metadata references/compositions.md - Defining compositions, stills, folders, default props references/calculate-metadata.md - Dynamically set composition duration, dimensions, and props Assets & Media references/assets.md - Importing images, videos, audio, and fonts references/images.md - …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills davila7/remotion