ck-remotion

Stars4

Forks1

UpdatedMay 18, 2026 at 05:57

Best practices for Remotion - Video creation in React

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Source

bestagentkits

bestagentkits/ck-skills

View GitHub Repository View Creator Repositories

Download

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

File Explorer

29 files

SKILL.md

readonly

name	ck:remotion
description	Best practices for Remotion - Video creation in React
metadata	{"tags":"remotion, video, react, animation, composition","author":"claudekit","version":"1.0.0"}
argument-hint	[video or component]

When to use

Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge.

How to use

Read individual rule files for detailed explanations and code examples:

rules/3d.md - 3D content in Remotion using Three.js and React Three Fiber
rules/animations.md - Fundamental animation skills for Remotion
rules/assets.md - Importing images, videos, audio, and fonts into Remotion
rules/audio.md - Using audio and sound in Remotion - importing, trimming, volume, speed, pitch
rules/calculate-metadata.md - Dynamically set composition duration, dimensions, and props
rules/can-decode.md - Check if a video can be decoded by the browser using Mediabunny
rules/charts.md - Chart and data visualization patterns for Remotion
rules/compositions.md - Defining compositions, stills, folders, default props and dynamic metadata
rules/display-captions.md - Displaying captions in Remotion with TikTok-style pages and word highlighting
rules/extract-frames.md - Extract frames from videos at specific timestamps using Mediabunny
rules/fonts.md - Loading Google Fonts and local fonts in Remotion
rules/get-audio-duration.md - Getting the duration of an audio file in seconds with Mediabunny
rules/get-video-dimensions.md - Getting the width and height of a video file with Mediabunny
rules/get-video-duration.md - Getting the duration of a video file in seconds with Mediabunny
rules/gifs.md - Displaying GIFs synchronized with Remotion's timeline
rules/images.md - Embedding images in Remotion using the Img component
rules/import-srt-captions.md - Importing .srt subtitle files into Remotion using @remotion/captions
rules/lottie.md - Embedding Lottie animations in Remotion
rules/measuring-dom-nodes.md - Measuring DOM element dimensions in Remotion
rules/measuring-text.md - Measuring text dimensions, fitting text to containers, and checking overflow
rules/sequencing.md - Sequencing patterns for Remotion - delay, trim, limit duration of items
rules/tailwind.md - Using TailwindCSS in Remotion
rules/text-animations.md - Typography and text animation patterns for Remotion
rules/timing.md - Interpolation curves in Remotion - linear, easing, spring animations
rules/transcribe-captions.md - Transcribing audio to generate captions in Remotion
rules/transitions.md - Scene transition patterns for Remotion
rules/trimming.md - Trimming patterns for Remotion - cut the beginning or end of animations
rules/videos.md - Embedding videos in Remotion - trimming, volume, speed, looping, pitch

More from this repository

same repository

ck-ai-artist

bestagentkits/ck-skills

Generate images via Nano Banana with 129 curated prompts. Mandatory validation interview refines style/mood/colors (use --skip to bypass). 3 modes: search, creative, wild. Styles: Ukiyo-e, Bento grid, cyberpunk, cinematic, vintage patent.

2026-05-184

ck-plan

bestagentkits/ck-skills

Plan implementations, design architectures, create technical roadmaps with detailed phases. Use for feature planning, system design, solution architecture, implementation strategy, phase documentation.

2026-05-184

ck-codex

bestagentkits/ck-skills

Use OpenAI Codex CLI (GPT-5.5 + gpt-image-2) programmatically: second-opinion code review, GitHub PR audit, plan/spec auditing, edge-case discovery, style/persona prompting, and subscription-billed image generation for visual assets, decorations, infographics, banners. Activate whenever the user says 'codex', 'second opinion', 'audit plan', 'review PR with codex', 'generate image', 'create banner/illustration/visual asset', or wants a careful adversarial reader to catch what Claude (especially Opus) might skim past.

2026-05-184

ck-cook

bestagentkits/ck-skills

ALWAYS activate this skill before implementing EVERY feature, plan, or fix.

2026-05-184

ck-copywriting

bestagentkits/ck-skills

Conversion copywriting formulas, headline templates, email copy patterns, landing page structures, CTA optimization, and writing style extraction. Activate for writing high-converting copy, crafting headlines, email campaigns, landing pages, or applying custom writing styles from assets/writing-styles/ directory.

2026-05-184

ck-databases

bestagentkits/ck-skills

Design schemas, write queries for MongoDB and PostgreSQL. Use for database design, SQL/NoSQL queries, aggregation pipelines, indexes, migrations, replication, performance optimization, psql CLI.

2026-05-184

name	ck:remotion
description	Best practices for Remotion - Video creation in React
metadata	{"tags":"remotion, video, react, animation, composition","author":"claudekit","version":"1.0.0"}
argument-hint	[video or component]

When to use

Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge.

How to use

Read individual rule files for detailed explanations and code examples:

rules/3d.md - 3D content in Remotion using Three.js and React Three Fiber
rules/animations.md - Fundamental animation skills for Remotion
rules/assets.md - Importing images, videos, audio, and fonts into Remotion
rules/audio.md - Using audio and sound in Remotion - importing, trimming, volume, speed, pitch
rules/calculate-metadata.md - Dynamically set composition duration, dimensions, and props
rules/can-decode.md - Check if a video can be decoded by the browser using Mediabunny
rules/charts.md - Chart and data visualization patterns for Remotion
rules/compositions.md - Defining compositions, stills, folders, default props and dynamic metadata
rules/display-captions.md - Displaying captions in Remotion with TikTok-style pages and word highlighting
rules/extract-frames.md - Extract frames from videos at specific timestamps using Mediabunny
rules/fonts.md - Loading Google Fonts and local fonts in Remotion
rules/get-audio-duration.md - Getting the duration of an audio file in seconds with Mediabunny
rules/get-video-dimensions.md - Getting the width and height of a video file with Mediabunny
rules/get-video-duration.md - Getting the duration of a video file in seconds with Mediabunny
rules/gifs.md - Displaying GIFs synchronized with Remotion's timeline
rules/images.md - Embedding images in Remotion using the Img component
rules/import-srt-captions.md - Importing .srt subtitle files into Remotion using @remotion/captions
rules/lottie.md - Embedding Lottie animations in Remotion
rules/measuring-dom-nodes.md - Measuring DOM element dimensions in Remotion
rules/measuring-text.md - Measuring text dimensions, fitting text to containers, and checking overflow
rules/sequencing.md - Sequencing patterns for Remotion - delay, trim, limit duration of items
rules/tailwind.md - Using TailwindCSS in Remotion
rules/text-animations.md - Typography and text animation patterns for Remotion
rules/timing.md - Interpolation curves in Remotion - linear, easing, spring animations
rules/transcribe-captions.md - Transcribing audio to generate captions in Remotion
rules/transitions.md - Scene transition patterns for Remotion
rules/trimming.md - Trimming patterns for Remotion - cut the beginning or end of animations
rules/videos.md - Embedding videos in Remotion - trimming, volume, speed, looping, pitch