skills.rest
MinhHoangDono
MinhHoangDonoCOMMUNITY
Explore all skills by this author →
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
One-click install
npx skills add https://github.com/MinhHoangDono/antigravity-kit --skill ck-remotion-minhhoangdono
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
firstsun-devfirstsun-dev

remotion

Generate Remotion walkthrough videos from Stitch project screens.

Official
Advanced
anis-marrouchianis-marrouchi

motion-animation

Integrate Framer Motion with Remotion for frame-synced animations.

Community
Intermediate
Sma1lboySma1lboy
94

hyperframes-core

Author deterministic video compositions from HTML, CSS, and GSAP.

Community
Advanced
NaimalArain13NaimalArain13
2

framer-motion

Generates animated React components with the Moti library for iOS and Android apps.

Community
Intermediate