Remotion

If you're building videos programmatically with Remotion, this skill gives you the full toolkit: frame-based animations with useCurrentFrame, media handling for audio and video trimming, caption generation with word-level highlighting, and data viz with charts. It covers the fundamentals like interpolation and sequencing, plus less obvious stuff like calculating metadata dynamically and integrating Three.js for 3D content. The core insight here is that everything runs on frame counts, not CSS animations, so you multiply seconds by fps and use interpolate with clamping. Good reference when you need to remember how to sync GIFs to the timeline or measure text dimensions for fitting.

skills.sh installs: 1.5K
GitHub stars: 33.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add davila7/claude-code-templates --skill remotion --agent claude-code

Installs into .claude/skills of the current project.

Files

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