Why are CSS transitions forbidden in this skill?

CSS transitions and animations are browser-controlled and not frame-synchronized, which leads to flickering or desynced frames during the video rendering process. This skill enforces frame-based logic for perfect results.

Remotion is a framework that allows you to create videos programmatically using React, HTML, CSS, and JavaScript, rendering them into high-quality video files.

Can I create 3D videos with this skill?

Yes, the skill includes support and technical patterns for @remotion/three to integrate Three.js for programmatic 3D animations.

How does the verification workflow work?

The skill follows a mandatory loop where it generates code, attempts a CLI render, and automatically fixes any errors found until a successful video output is confirmed.

What file formats can I export?

It supports a wide range of formats including MP4 (H.264 and H.265), WebM (VP9), MOV (ProRes), and even animated GIFs.

Remotion Video Generation

Name: Remotion Video Generation
Author: mquhuy

bymquhuy

•

디자인 도구

Generates high-quality MP4 videos from natural language prompts using the Remotion React framework.

This Claude Code Skill empowers developers to create programmatic videos using React and Remotion. It bridges the gap between natural language prompts and frame-accurate video production by enforcing best practices like frame-synchronized animations and avoiding asynchronous CSS transitions. The skill includes a mandatory verification workflow that ensures code renders successfully via the Remotion CLI before presenting it to the user, making it an essential tool for automated video content creation, dynamic social media assets, and data visualization.

주요 기능

01Enforcement of best practices to prevent rendering flickers and desync

021 GitHub stars

03Automated rendering verification workflow with CLI error handling

04Integrated reference library for audio, video, and 3D (Three.js) patterns

05Frame-synchronized animation logic using useCurrentFrame and interpolate

06Support for H.264, H.265, WebM, and ProRes video codecs

사용 사례

01Programmatically building personalized video messages or tutorials

02Generating automated marketing or social media videos from text prompts

03Creating dynamic data visualizations and charts for video reports

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mquhuy/remotion-skill claude

For use in Claude.ai and ChatGPT

Download Skill