Create programmatic videos using Remotion — React-based video generation with animations and compositions.
What it does
Remotion uses React to generate videos — a fundamentally different programming model than ffmpeg or traditional video tools. Claude without this skill treats Remotion like a video editing library rather than a React rendering pipeline: it misses the `useCurrentFrame` and `useVideoConfig` hooks, generates compositions with incorrect timing, and produces code that fails during rendering because it doesn't account for how Remotion's frame-by-frame rendering differs from browser rendering. This skill loads Remotion's component model, animation patterns, and rendering pipeline — including programmatic video generation from data. Made by the Remotion team.
Use case
Creating programmatic videos with React: data-driven animations, code explanation videos, automated video content pipelines, or anything where video content is generated from data rather than recorded. Remotion is #5 on the skills.sh all-time leaderboard.
"Build a Remotion composition that visualises this sorting algorithm step by step." "Create a data-driven video that animates this bar chart from 0 to final values." "Build a code walkthrough video that highlights lines as they're explained." "Generate a video from this JSON dataset — one animated slide per data point." "Create a 30-second intro animation for my YouTube channel."
Describe the video: what it shows, how long it is, and what data or content drives it.
Claude generates a Remotion composition with correct hooks, timing, and sequence structure.
For data-driven videos: provide the data. Claude generates the animation logic that maps data to visuals.
Input
A video concept description: what it shows, duration, any data that drives it, and visual style.
Output
A Remotion composition with correct React component structure, proper use of useCurrentFrame and useVideoConfig, Sequence and Series components for timing, and animation logic that renders correctly frame-by-frame.
npx skillsadd remotion-dev/skills/remotion-video
Requires skills.sh CLI
Build Obsidian.md plugins following official API patterns, TypeScript best practices, and plugin review guidelines.
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.