[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-9e925a5a-cee7-4a08-a4fe-03718f9cf477":3,"$fmLsXaSN4S8Dr1Aqq__lWYPXRwNTDo5ePlZ1pdamkiio":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"9e925a5a-cee7-4a08-a4fe-03718f9cf477","remotion-best-practices","Remotion最佳实践 - React中的视频制作","cat_coding_frontend","mod_coding","sickn33,coding","---\nname: remotion-best-practices\ndescription: \"Best practices for Remotion - Video creation in React\"\nrisk: safe\nsource: community\ntags: \"remotion, video, react, animation, composition\"\ndate_added: \"2026-02-27\"\n---\n\n## 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\u002F3d.md](rules\u002F3d.md) - 3D content in Remotion using Three.js and React Three Fiber\n- [rules\u002Fanimations.md](rules\u002Fanimations.md) - Fundamental animation skills for Remotion\n- [rules\u002Fassets.md](rules\u002Fassets.md) - Importing images, videos, audio, and fonts into Remotion\n- [rules\u002Faudio.md](rules\u002Faudio.md) - Using audio and sound in Remotion - importing, trimming, volume, speed, pitch\n- [rules\u002Fcalculate-metadata.md](rules\u002Fcalculate-metadata.md) - Dynamically set composition duration, dimensions, and props\n- [rules\u002Fcan-decode.md](rules\u002Fcan-decode.md) - Check if a video can be decoded by the browser using Mediabunny\n- [rules\u002Fcharts.md](rules\u002Fcharts.md) - Chart and data visualization patterns for Remotion\n- [rules\u002Fcompositions.md](rules\u002Fcompositions.md) - Defining compositions, stills, folders, default props and dynamic metadata\n- [rules\u002Fdisplay-captions.md](rules\u002Fdisplay-captions.md) - Displaying captions in Remotion with TikTok-style pages and word highlighting\n- [rules\u002Fextract-frames.md](rules\u002Fextract-frames.md) - Extract frames from videos at specific timestamps using Mediabunny\n- [rules\u002Ffonts.md](rules\u002Ffonts.md) - Loading Google Fonts and local fonts in Remotion\n- [rules\u002Fget-audio-duration.md](rules\u002Fget-audio-duration.md) - Getting the duration of an audio file in seconds with Mediabunny\n- [rules\u002Fget-video-dimensions.md](rules\u002Fget-video-dimensions.md) - Getting the width and height of a video file with Mediabunny\n- [rules\u002Fget-video-duration.md](rules\u002Fget-video-duration.md) - Getting the duration of a video file in seconds with Mediabunny\n- [rules\u002Fgifs.md](rules\u002Fgifs.md) - Displaying GIFs synchronized with Remotion's timeline\n- [rules\u002Fimages.md](rules\u002Fimages.md) - Embedding images in Remotion using the Img component\n- [rules\u002Fimport-srt-captions.md](rules\u002Fimport-srt-captions.md) - Importing .srt subtitle files into Remotion using @remotion\u002Fcaptions\n- [rules\u002Flottie.md](rules\u002Flottie.md) - Embedding Lottie animations in Remotion\n- [rules\u002Fmeasuring-dom-nodes.md](rules\u002Fmeasuring-dom-nodes.md) - Measuring DOM element dimensions in Remotion\n- [rules\u002Fmeasuring-text.md](rules\u002Fmeasuring-text.md) - Measuring text dimensions, fitting text to containers, and checking overflow\n- [rules\u002Fsequencing.md](rules\u002Fsequencing.md) - Sequencing patterns for Remotion - delay, trim, limit duration of items\n- [rules\u002Ftailwind.md](rules\u002Ftailwind.md) - Using TailwindCSS in Remotion\n- [rules\u002Ftext-animations.md](rules\u002Ftext-animations.md) - Typography and text animation patterns for Remotion\n- [rules\u002Ftiming.md](rules\u002Ftiming.md) - Interpolation curves in Remotion - linear, easing, spring animations\n- [rules\u002Ftranscribe-captions.md](rules\u002Ftranscribe-captions.md) - Transcribing audio to generate captions in Remotion\n- [rules\u002Ftransitions.md](rules\u002Ftransitions.md) - Scene transition patterns for Remotion\n- [rules\u002Ftrimming.md](rules\u002Ftrimming.md) - Trimming patterns for Remotion - cut the beginning or end of animations\n- [rules\u002Fvideos.md](rules\u002Fvideos.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.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,120,549,"2026-05-16 13:37:03",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"编程开发","coding","mdi-code-braces","代码生成、调试、审查，提升开发效率",2,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"前端开发","frontend","mdi-language-html5","HTML\u002FCSS\u002FJavaScript\u002F框架相关",1,96,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"a83c9e94-afc0-4e26-915e-2d34d2789df4","1.0.0","remotion-best-practices.zip",33394,"uploads\u002Fskills\u002F9e925a5a-cee7-4a08-a4fe-03718f9cf477\u002Fremotion-best-practices.zip","d55d2545c6dfbbd7a8b2a8ce9b6faf3cd7f3a5cff00295a78d79ea1ff7331ef4","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":3785},{\"path\":\"rules\u002F3d.md\",\"isDirectory\":false,\"size\":2290},{\"path\":\"rules\u002Fanimations.md\",\"isDirectory\":false,\"size\":790},{\"path\":\"rules\u002Fassets\u002Fcharts-bar-chart.tsx\",\"isDirectory\":false,\"size\":3429},{\"path\":\"rules\u002Fassets\u002Ftext-animations-typewriter.tsx\",\"isDirectory\":false,\"size\":2183},{\"path\":\"rules\u002Fassets\u002Ftext-animations-word-highlight.tsx\",\"isDirectory\":false,\"size\":2387},{\"path\":\"rules\u002Fassets.md\",\"isDirectory\":false,\"size\":1590},{\"path\":\"rules\u002Faudio.md\",\"isDirectory\":false,\"size\":3822},{\"path\":\"rules\u002Fcalculate-metadata.md\",\"isDirectory\":false,\"size\":2920},{\"path\":\"rules\u002Fcan-decode.md\",\"isDirectory\":false,\"size\":1587},{\"path\":\"rules\u002Fcharts.md\",\"isDirectory\":false,\"size\":1720},{\"path\":\"rules\u002Fcompositions.md\",\"isDirectory\":false,\"size\":3445},{\"path\":\"rules\u002Fdisplay-captions.md\",\"isDirectory\":false,\"size\":3698},{\"path\":\"rules\u002Fextract-frames.md\",\"isDirectory\":false,\"size\":5496},{\"path\":\"rules\u002Ffonts.md\",\"isDirectory\":false,\"size\":3484},{\"path\":\"rules\u002Fget-audio-duration.md\",\"isDirectory\":false,\"size\":1354},{\"path\":\"rules\u002Fget-video-dimensions.md\",\"isDirectory\":false,\"size\":1627},{\"path\":\"rules\u002Fget-video-duration.md\",\"isDirectory\":false,\"size\":1341},{\"path\":\"rules\u002Fgifs.md\",\"isDirectory\":false,\"size\":3868},{\"path\":\"rules\u002Fimages.md\",\"isDirectory\":false,\"size\":2783},{\"path\":\"rules\u002Fimport-srt-captions.md\",\"isDirectory\":false,\"size\":2113},{\"path\":\"rules\u002Flottie.md\",\"isDirectory\":false,\"size\":1779},{\"path\":\"rules\u002Fmeasuring-dom-nodes.md\",\"isDirectory\":false,\"size\":974},{\"path\":\"rules\u002Fmeasuring-text.md\",\"isDirectory\":false,\"size\":3000},{\"path\":\"rules\u002Fsequencing.md\",\"isDirectory\":false,\"size\":2389},{\"path\":\"rules\u002Ftailwind.md\",\"isDirectory\":false,\"size\":422},{\"path\":\"rules\u002Ftext-animations.md\",\"isDirectory\":false,\"size\":700},{\"path\":\"rules\u002Ftiming.md\",\"isDirectory\":false,\"size\":3939},{\"path\":\"rules\u002Ftranscribe-captions.md\",\"isDirectory\":false,\"size\":850},{\"path\":\"rules\u002Ftransitions.md\",\"isDirectory\":false,\"size\":3730},{\"path\":\"rules\u002Ftrimming.md\",\"isDirectory\":false,\"size\":1210},{\"path\":\"rules\u002Fvideos.md\",\"isDirectory\":false,\"size\":3509}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]