Initial commit: antigravity-claudekit

skills/ck-remotion/SKILL.md

@@ -0,0 +1,56 @@
+---
+name: ck-remotion
+description: 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