Verified:GitHub

ck:remotion

Standardize frame-driven animations and media in Remotion React compositions.

Updated Mar 7, 2026

Search Tags:#react #remotion #usecurrentframe #video composition #animation rules #assets and staticFile #rendering best practices

Ready to run

npx skills add https://github.com/MinhHoangDono/antigravity-kit --skill ck-remotion-minhhoangdono

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ck:remotion
Source: https://github.com/MinhHoangDono/antigravity-kit/tree/main/.agent/skills/remotion
Command: npx skills add https://github.com/MinhHoangDono/antigravity-kit --skill ck-remotion-minhhoangdono

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents common Remotion rendering issues by enforcing frame-driven animation practices and Remotion-specific constraints for media, text, and composition setup.

Core Features & Use Cases

Remotion best-practice rules: Enforces that animations are driven by useCurrentFrame() and avoids forbidden CSS/Tailwind animation classes.
Media-specific guidance: Covers embedding and controlling Remotion media such as videos, audio, images, GIFs, and animated assets with staticFile() and appropriate components.
Composition and timing patterns: Provides guidance for Composition setup, dynamic metadata with calculateMetadata, sequencing, trimming, transitions, and timing/interpolation/spring behaviors.

Quick Start

Ask the AI to summarize the Remotion rule for “animations” and show how to rewrite a component so all motion is driven by useCurrentFrame with frame-to-seconds calculations.

Frequently Asked Questions about ck:remotion

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

FAQPage Schema

How do I fix flickering animations in Remotion React video compositions?▼

Fix Remotion render flicker by driving all motion with the useCurrentFrame() hook instead of CSS or Tailwind animation classes. Standardizing frame-driven animation ensures consistent timeline rendering and prevents visual bugs during video composition export.

Why does my Remotion video timeline render incorrectly during media sequencing?▼

Incorrect Remotion timelines often result from using standard HTML tags instead of Remotion components. Applying Video, Audio, and Img components with staticFile() asset referencing ensures proper frame synchronization during composition rendering.

Can I use CSS animation classes for transitions in Remotion compositions?▼

CSS animation classes are forbidden in Remotion compositions. You must apply Remotion interpolation and spring behaviors driven by useCurrentFrame to calculate frame-to-seconds conversions for accurate, flicker-free transition timing.

What is the correct way to reference local images and audio in Remotion?▼

Reference local images and audio in Remotion using the staticFile() function. Combine staticFile() with Remotion components like Img, Audio, and Video to ensure assets load correctly and avoid rendering bugs in video compositions.

How do I handle dynamic metadata for video composition setup in Remotion?▼

Handle dynamic metadata in Remotion by using the calculateMetadata function. This pattern integrates with Composition setup to dynamically define duration, dimensions, and frame rate based on input data before rendering begins.