{"id":"af0bb0ea-3515-4aa9-9103-dfc60b18ccef","shortId":"2TdyDT","kind":"skill","title":"remotion-best-practices","tagline":"Best practices for Remotion - Video creation in React","description":"## When to Use\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\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["remotion","best","practices","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding"],"capabilities":["skill","source-sickn33","skill-remotion-best-practices","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/remotion-best-practices","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34583 github stars · SKILL.md body (3,567 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-22T18:52:08.062Z","embedding":null,"createdAt":"2026-04-18T21:43:31.630Z","updatedAt":"2026-04-22T18:52:08.062Z","lastSeenAt":"2026-04-22T18:52:08.062Z","tsv":"'3d':48 'anim':61,238,284,297,326 'ask':371 'audio':70,78,173,301 'begin':322 'best':3,5 'boundari':379 'browser':108 'caption':134,304 'chart':113 'check':99,259 'clarif':373 'clear':346 'code':25,44 'compon':223 'composit':92,123 'contain':257 'content':49 'creation':10 'criteria':382 'curv':291 'cut':320 'data':115 'deal':22 'decod':105 'default':126 'defin':122 'delay':267 'describ':350 '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 'environ':362 'environment-specif':361 'exampl':45 'expert':367 '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 'input':376 'interpol':290 'item':272 'knowledg':32 'limit':269,338 'linear':294 'load':158 'local':162 'loop':336 'lotti':237 'match':347 'measur':243,251 'mediabunni':110,155,178,191,204 'metadata':130 'miss':384 'obtain':27 'output':356 'overflow':260 'page':141 'pattern':117,264,285,311,317 'permiss':377 '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 'requir':375 'review':368 '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 'safeti':378 'scene':309 'scope':349 'second':176,202 'sequenc':263 'set':91 'skill':18,62,341 'skill-remotion-best-practices' 'sound':80 'source-sickn33' 'specif':31,152,363 'speed':86,335 'spring':296 'srt':227 'still':124 'stop':369 'style':140 'substitut':359 'subtitl':228 'success':381 'synchron':209 'tailwindcss':276 'task':345 'test':365 'text':252,255,283 'three':56 'three.js':53 'tiktok':139 'tiktok-styl':138 'timelin':213 'timestamp':153 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'transcrib':300 'transit':310 'treat':354 'trim':84,268,316,333 'typographi':281 'use':15,16,35,52,77,109,154,220,232,275,339 'valid':364 'video':9,69,102,150,188,199,330 'visual':116 'volum':85,334 'whenev':19 'width':183 'word':143","prices":[{"id":"ead9a914-8d8e-42bb-9b28-64b31e8f6297","listingId":"af0bb0ea-3515-4aa9-9103-dfc60b18ccef","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:43:31.630Z"}],"sources":[{"listingId":"af0bb0ea-3515-4aa9-9103-dfc60b18ccef","source":"github","sourceId":"sickn33/antigravity-awesome-skills/remotion-best-practices","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/remotion-best-practices","isPrimary":false,"firstSeenAt":"2026-04-18T21:43:31.630Z","lastSeenAt":"2026-04-22T18:52:08.062Z"}],"details":{"listingId":"af0bb0ea-3515-4aa9-9103-dfc60b18ccef","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"remotion-best-practices","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34583,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-22T06:40:00Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"2c7e5741cc54eca23f0fa3ff4c73d9feb3b4229d","skill_md_path":"skills/remotion-best-practices/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/remotion-best-practices"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"remotion-best-practices","description":"Best practices for Remotion - Video creation in React"},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/remotion-best-practices"},"updatedAt":"2026-04-22T18:52:08.062Z"}}