{"id":"1f60e6e3-df95-49f1-9a23-0a6bf6a31b0e","shortId":"ThttzG","kind":"skill","title":"remotion-best-practices","tagline":"Best practices for Remotion - Video creation in React","description":"## When to use\n\nUse this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge.\n\n## How to use\n\nRead individual rule files for detailed explanations and code examples:\n\n- [rules/3d.md](rules/3d.md) - 3D content in Remotion using Three.js and React Three Fiber\n- [rules/animations.md](rules/animations.md) - Fundamental animation skills for Remotion\n- [rules/assets.md](rules/assets.md) - Importing images, videos, audio, and fonts into Remotion\n- [rules/audio.md](rules/audio.md) - Using audio and sound in Remotion - importing, trimming, volume, speed, pitch\n- [rules/calculate-metadata.md](rules/calculate-metadata.md) - Dynamically set composition duration, dimensions, and props\n- [rules/can-decode.md](rules/can-decode.md) - Check if a video can be decoded by the browser using Mediabunny\n- [rules/charts.md](rules/charts.md) - Chart and data visualization patterns for Remotion\n- [rules/compositions.md](rules/compositions.md) - Defining compositions, stills, folders, default props and dynamic metadata\n- [rules/display-captions.md](rules/display-captions.md) - Displaying captions in Remotion with TikTok-style pages and word highlighting\n- [rules/extract-frames.md](rules/extract-frames.md) - Extract frames from videos at specific timestamps using Mediabunny\n- [rules/fonts.md](rules/fonts.md) - Loading Google Fonts and local fonts in Remotion\n- [rules/get-audio-duration.md](rules/get-audio-duration.md) - Getting the duration of an audio file in seconds with Mediabunny\n- [rules/get-video-dimensions.md](rules/get-video-dimensions.md) - Getting the width and height of a video file with Mediabunny\n- [rules/get-video-duration.md](rules/get-video-duration.md) - Getting the duration of a video file in seconds with Mediabunny\n- [rules/gifs.md](rules/gifs.md) - Displaying GIFs synchronized with Remotion's timeline\n- [rules/images.md](rules/images.md) - Embedding images in Remotion using the Img component\n- [rules/import-srt-captions.md](rules/import-srt-captions.md) - Importing .srt subtitle files into Remotion using @remotion/captions\n- [rules/lottie.md](rules/lottie.md) - Embedding Lottie animations in Remotion\n- [rules/measuring-dom-nodes.md](rules/measuring-dom-nodes.md) - Measuring DOM element dimensions in Remotion\n- [rules/measuring-text.md](rules/measuring-text.md) - Measuring text dimensions, fitting text to containers, and checking overflow\n- [rules/sequencing.md](rules/sequencing.md) - Sequencing patterns for Remotion - delay, trim, limit duration of items\n- [rules/tailwind.md](rules/tailwind.md) - Using TailwindCSS in Remotion\n- [rules/text-animations.md](rules/text-animations.md) - Typography and text animation patterns for Remotion\n- [rules/timing.md](rules/timing.md) - Interpolation curves in Remotion - linear, easing, spring animations\n- [rules/transcribe-captions.md](rules/transcribe-captions.md) - Transcribing audio to generate captions in Remotion\n- [rules/transitions.md](rules/transitions.md) - Scene transition patterns for Remotion\n- [rules/trimming.md](rules/trimming.md) - Trimming patterns for Remotion - cut the beginning or end of animations\n- [rules/videos.md](rules/videos.md) - Embedding videos in Remotion - trimming, volume, speed, looping, pitch","tags":["remotion","agent","skills","jdrhyne","agent-skills","agentic-ai","ai-agents","automation","claude-code","clawdbot","codex","cursor"],"capabilities":["skill","source-jdrhyne","skill-remotion","topic-agent-skills","topic-agentic-ai","topic-ai-agents","topic-automation","topic-claude-code","topic-clawdbot","topic-codex","topic-cursor","topic-developer-tools","topic-gemini-cli","topic-github-copilot","topic-llm-agents"],"categories":["agent-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/jdrhyne/agent-skills/remotion","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add jdrhyne/agent-skills","source_repo":"https://github.com/jdrhyne/agent-skills","install_from":"skills.sh"}},"qualityScore":"0.565","qualityRationale":"deterministic score 0.56 from registry signals: · indexed on github topic:agent-skills · 230 github stars · SKILL.md body (3,249 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T00:54:19.868Z","embedding":null,"createdAt":"2026-04-18T22:05:04.446Z","updatedAt":"2026-04-22T00:54:19.868Z","lastSeenAt":"2026-04-22T00:54:19.868Z","tsv":"'3d':48 'anim':61,238,284,297,326 'audio':70,78,173,301 'begin':322 'best':3,5 'browser':108 'caption':134,304 'chart':113 'check':99,259 'code':25,44 'compon':223 'composit':92,123 'contain':257 'content':49 'creation':10 'curv':291 'cut':320 'data':115 'deal':22 'decod':105 'default':126 'defin':122 'delay':267 'detail':41 'dimens':94,246,253 'display':133,207 'dom':244 'domain':30 'domain-specif':29 'durat':93,170,196,270 'dynam':90,129 'eas':295 'element':245 'embed':216,236,329 'end':324 'exampl':45 'explan':42 'extract':147 'fiber':57 'file':39,174,189,200,229 'fit':254 'folder':125 'font':72,160,163 'frame':148 'fundament':60 'generat':303 'get':168,181,194 'gif':208 'googl':159 'height':185 'highlight':144 'imag':68,217 'img':222 'import':67,83,226 'individu':37 'interpol':290 'item':272 'knowledg':32 'limit':269 'linear':294 'load':158 'local':162 'loop':336 'lotti':237 'measur':243,251 'mediabunni':110,155,178,191,204 'metadata':130 'obtain':27 'overflow':260 'page':141 'pattern':117,264,285,311,317 'pitch':87,337 'practic':4,6 'prop':96,127 'react':12,55 'read':36 'remot':2,8,24,51,64,74,82,119,136,165,211,219,231,240,248,266,278,287,293,306,313,319,332 'remotion-best-practic':1 'remotion/captions':233 'rule':38 'rules/3d.md':46,47 'rules/animations.md':58,59 'rules/assets.md':65,66 'rules/audio.md':75,76 'rules/calculate-metadata.md':88,89 'rules/can-decode.md':97,98 'rules/charts.md':111,112 'rules/compositions.md':120,121 'rules/display-captions.md':131,132 'rules/extract-frames.md':145,146 'rules/fonts.md':156,157 'rules/get-audio-duration.md':166,167 'rules/get-video-dimensions.md':179,180 'rules/get-video-duration.md':192,193 'rules/gifs.md':205,206 'rules/images.md':214,215 'rules/import-srt-captions.md':224,225 'rules/lottie.md':234,235 'rules/measuring-dom-nodes.md':241,242 'rules/measuring-text.md':249,250 'rules/sequencing.md':261,262 'rules/tailwind.md':273,274 'rules/text-animations.md':279,280 'rules/timing.md':288,289 'rules/transcribe-captions.md':298,299 'rules/transitions.md':307,308 'rules/trimming.md':314,315 'rules/videos.md':327,328 'scene':309 'second':176,202 'sequenc':263 'set':91 'skill':18,62 'skill-remotion' 'sound':80 'source-jdrhyne' 'specif':31,152 'speed':86,335 'spring':296 'srt':227 'still':124 'style':140 'subtitl':228 'synchron':209 'tailwindcss':276 'text':252,255,283 'three':56 'three.js':53 'tiktok':139 'tiktok-styl':138 'timelin':213 'timestamp':153 'topic-agent-skills' 'topic-agentic-ai' 'topic-ai-agents' 'topic-automation' 'topic-claude-code' 'topic-clawdbot' 'topic-codex' 'topic-cursor' 'topic-developer-tools' 'topic-gemini-cli' 'topic-github-copilot' 'topic-llm-agents' 'transcrib':300 'transit':310 'trim':84,268,316,333 'typographi':281 'use':15,16,35,52,77,109,154,220,232,275 'video':9,69,102,150,188,199,330 'visual':116 'volum':85,334 'whenev':19 'width':183 'word':143","prices":[{"id":"8f0dc367-1c3e-466a-b182-3887aa00de35","listingId":"1f60e6e3-df95-49f1-9a23-0a6bf6a31b0e","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"jdrhyne","category":"agent-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T22:05:04.446Z"}],"sources":[{"listingId":"1f60e6e3-df95-49f1-9a23-0a6bf6a31b0e","source":"github","sourceId":"jdrhyne/agent-skills/remotion","sourceUrl":"https://github.com/jdrhyne/agent-skills/tree/main/skills/remotion","isPrimary":false,"firstSeenAt":"2026-04-18T22:05:04.446Z","lastSeenAt":"2026-04-22T00:54:19.868Z"}],"details":{"listingId":"1f60e6e3-df95-49f1-9a23-0a6bf6a31b0e","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"jdrhyne","slug":"remotion","github":{"repo":"jdrhyne/agent-skills","stars":230,"topics":["agent-skills","agentic-ai","ai-agents","automation","claude-code","clawdbot","codex","cursor","developer-tools","gemini-cli","github-copilot","llm-agents","mcp","openclaw","prompt-engineering","prompts"],"license":null,"html_url":"https://github.com/jdrhyne/agent-skills","pushed_at":"2026-03-27T14:29:53Z","description":"A collection of AI agent skills for Clawdbot, Claude Code, Codex","skill_md_sha":"80d72fe4279eb05d50322a54e64a1a3646823874","skill_md_path":"skills/remotion/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/jdrhyne/agent-skills/tree/main/skills/remotion"},"layout":"multi","source":"github","category":"agent-skills","frontmatter":{"name":"remotion-best-practices","description":"Best practices for Remotion - Video creation in React"},"skills_sh_url":"https://skills.sh/jdrhyne/agent-skills/remotion"},"updatedAt":"2026-04-22T00:54:19.868Z"}}