antigravity-claudekit/skills/ck-remotion/SKILL.md

name, description

name	description
ck-remotion	Create programmatic videos with React using Remotion. Use when building video compositions, animations, captions, charts, audio sync, transitions, or rendering video from code.

Remotion — Video Creation in React

Domain-specific knowledge for building videos programmatically with React.

When to Use

• Creating video compositions with React components
• Building animations, transitions, and sequencing
• Embedding audio, video, images, GIFs, or Lottie in video
• Generating captions, subtitles, or text animations
• Rendering charts and data visualizations as video
• Working with Three.js 3D content in video

Don't Use When

• Simple static image exports (use canvas or Puppeteer)
• Live streaming (Remotion is for pre-rendered video)
• Video editing of existing footage without code changes

Reference Files

Load individual rule files for domain-specific knowledge:

• rules/animations.md — fundamental animation skills, interpolation
• rules/timing.md — interpolation curves, linear, easing, spring
• rules/sequencing.md — delay, trim, limit duration of items
• rules/trimming.md — cut beginning or end of animations
• rules/transitions.md — scene transition patterns
• rules/compositions.md — defining compositions, stills, folders, default props
• rules/calculate-metadata.md — dynamically set duration, dimensions, props
• rules/assets.md — importing images, videos, audio, fonts
• rules/audio.md — audio import, trimming, volume, speed, pitch
• rules/videos.md — embedding videos, trimming, looping, pitch
• rules/images.md — embedding images with Img component
• rules/gifs.md — displaying GIFs synchronized with timeline
• rules/fonts.md — loading Google Fonts and local fonts
• rules/text-animations.md — typography and text animation patterns
• rules/display-captions.md — TikTok-style captions with word highlighting
• rules/import-srt-captions.md — importing .srt subtitle files
• rules/transcribe-captions.md — transcribing audio to generate captions
• rules/charts.md — chart and data visualization patterns
• rules/lottie.md — embedding Lottie animations
• rules/3d.md — Three.js and React Three Fiber in Remotion
• rules/tailwind.md — using TailwindCSS in Remotion
• rules/measuring-text.md — measuring text dimensions, fitting to containers
• rules/measuring-dom-nodes.md — measuring DOM element dimensions
• rules/can-decode.md — check if video can be decoded via Mediabunny
• rules/extract-frames.md — extract frames at specific timestamps
• rules/get-audio-duration.md — getting audio file duration
• rules/get-video-duration.md — getting video file duration
• rules/get-video-dimensions.md — getting video width and height