[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-remotion-remotion-best-practices":3,"mdc-cwzec9-key":39,"related-org-remotion-remotion-best-practices":245,"related-repo-remotion-remotion-best-practices":390},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":12,"stars":27,"repoUrl":28,"updatedAt":29,"license":30,"forks":31,"topics":32,"repo":34,"sourceUrl":37,"mdContent":38},"remotion-best-practices","build programmatic videos with Remotion","Router for all Remotion skills",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},"remotion","Remotion","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fremotion.png","remotion-dev",[13,17,20,21,24],{"name":14,"slug":15,"type":16},"React","react","tag",{"name":18,"slug":19,"type":16},"TypeScript","typescript",{"name":9,"slug":8,"type":16},{"name":22,"slug":23,"type":16},"Animation","animation",{"name":25,"slug":26,"type":16},"Video","video",54855,"https:\u002F\u002Fgithub.com\u002Fremotion-dev\u002Fremotion","2026-07-27T06:08:28.310856",null,4008,[33,15,26],"javascript",{"repoUrl":28,"stars":27,"forks":31,"topics":35,"description":36},[33,15,26],"🎥      Make videos programmatically with React","https:\u002F\u002Fgithub.com\u002Fremotion-dev\u002Fremotion\u002Ftree\u002FHEAD\u002Fpackages\u002Fskills\u002Fskills\u002Fremotion-best-practices","---\nname: remotion-best-practices\ndescription: Router for all Remotion skills\nmetadata:\n  tags: remotion, video, react, animation, composition\n---\n\n## New project setup\n\nIf no Remotion project currently exists, load [Create a new Remotion project](remotion-create\u002FSKILL.md)\n\n## React Markup Best Practices\n\nIf you are writing Remotion React Markup, load [Remotion Markup Best Practices](remotion-markup\u002FSKILL.md)\n\n## Maps\n\nFor static maps, animated routes and markers, geographic explainers, Mapbox, MapLibre, MapTiler, GeoJSON, or 3D geographic flyovers, load [Remotion Maps](remotion-maps\u002FSKILL.md).\n\n## Multimedia\n\nFor achieving multimedia tasks in the browser, such as trimming, cropping videos, or getting metadata from them, load [Remotion Multimedia](remotion-multimedia\u002FSKILL.md)\n\n## Improving Interactivity\n\nBy structuring the Remotion markup well, we can allow users to interactively change things in the Studio and write back to code. If relevant: [Interactivity Best Practices](remotion-interactivity\u002FSKILL.md)\n\n## Rendering\n\nFor advanced rendering beyond simple `npx remotion render`, see: [Rendering Best Practices](remotion-render\u002FSKILL.md)\n\n## Captions\n\nWhen working with Captions, load [Remotion Captions](remotion-captions\u002FSKILL.md).\n\n## Creating a SaaS, automation or application\n\nUse the [Remotion SaaS skill](remotion-saas\u002FSKILL.md) for knowledge about Remotion-powered SaaS apps, such as `\u003CPlayer>`, rendering on Lambda, Vercel, Cloudflare, via Express.js, client-side rendering, or for finding the right SaaS template.\n\n## Looking up Remotion APIs and documentation\n\nTo find and read current Remotion documentation, load [Remotion Docs](remotion-docs\u002FSKILL.md).\n\n## Upgrading\n\nTo upgrade Remotion, related packages, compatible Mediabunny packages, and installed Remotion Agent Skills, load [Remotion Upgrade](remotion-upgrade\u002FSKILL.md).\n",{"data":40,"body":43},{"name":4,"description":6,"metadata":41},{"tags":42},"remotion, video, react, animation, composition",{"type":44,"children":45},"root",[46,55,68,74,85,91,104,110,121,127,138,144,164,170,182,188,209,215,227,233],{"type":47,"tag":48,"props":49,"children":51},"element","h2",{"id":50},"new-project-setup",[52],{"type":53,"value":54},"text","New project setup",{"type":47,"tag":56,"props":57,"children":58},"p",{},[59,61],{"type":53,"value":60},"If no Remotion project currently exists, load ",{"type":47,"tag":62,"props":63,"children":65},"a",{"href":64},"remotion-create\u002FSKILL.md",[66],{"type":53,"value":67},"Create a new Remotion project",{"type":47,"tag":48,"props":69,"children":71},{"id":70},"react-markup-best-practices",[72],{"type":53,"value":73},"React Markup Best Practices",{"type":47,"tag":56,"props":75,"children":76},{},[77,79],{"type":53,"value":78},"If you are writing Remotion React Markup, load ",{"type":47,"tag":62,"props":80,"children":82},{"href":81},"remotion-markup\u002FSKILL.md",[83],{"type":53,"value":84},"Remotion Markup Best Practices",{"type":47,"tag":48,"props":86,"children":88},{"id":87},"maps",[89],{"type":53,"value":90},"Maps",{"type":47,"tag":56,"props":92,"children":93},{},[94,96,102],{"type":53,"value":95},"For static maps, animated routes and markers, geographic explainers, Mapbox, MapLibre, MapTiler, GeoJSON, or 3D geographic flyovers, load ",{"type":47,"tag":62,"props":97,"children":99},{"href":98},"remotion-maps\u002FSKILL.md",[100],{"type":53,"value":101},"Remotion Maps",{"type":53,"value":103},".",{"type":47,"tag":48,"props":105,"children":107},{"id":106},"multimedia",[108],{"type":53,"value":109},"Multimedia",{"type":47,"tag":56,"props":111,"children":112},{},[113,115],{"type":53,"value":114},"For achieving multimedia tasks in the browser, such as trimming, cropping videos, or getting metadata from them, load ",{"type":47,"tag":62,"props":116,"children":118},{"href":117},"remotion-multimedia\u002FSKILL.md",[119],{"type":53,"value":120},"Remotion Multimedia",{"type":47,"tag":48,"props":122,"children":124},{"id":123},"improving-interactivity",[125],{"type":53,"value":126},"Improving Interactivity",{"type":47,"tag":56,"props":128,"children":129},{},[130,132],{"type":53,"value":131},"By structuring the Remotion markup well, we can allow users to interactively change things in the Studio and write back to code. If relevant: ",{"type":47,"tag":62,"props":133,"children":135},{"href":134},"remotion-interactivity\u002FSKILL.md",[136],{"type":53,"value":137},"Interactivity Best Practices",{"type":47,"tag":48,"props":139,"children":141},{"id":140},"rendering",[142],{"type":53,"value":143},"Rendering",{"type":47,"tag":56,"props":145,"children":146},{},[147,149,156,158],{"type":53,"value":148},"For advanced rendering beyond simple ",{"type":47,"tag":150,"props":151,"children":153},"code",{"className":152},[],[154],{"type":53,"value":155},"npx remotion render",{"type":53,"value":157},", see: ",{"type":47,"tag":62,"props":159,"children":161},{"href":160},"remotion-render\u002FSKILL.md",[162],{"type":53,"value":163},"Rendering Best Practices",{"type":47,"tag":48,"props":165,"children":167},{"id":166},"captions",[168],{"type":53,"value":169},"Captions",{"type":47,"tag":56,"props":171,"children":172},{},[173,175,181],{"type":53,"value":174},"When working with Captions, load ",{"type":47,"tag":62,"props":176,"children":178},{"href":177},"remotion-captions\u002FSKILL.md",[179],{"type":53,"value":180},"Remotion Captions",{"type":53,"value":103},{"type":47,"tag":48,"props":183,"children":185},{"id":184},"creating-a-saas-automation-or-application",[186],{"type":53,"value":187},"Creating a SaaS, automation or application",{"type":47,"tag":56,"props":189,"children":190},{},[191,193,199,201,207],{"type":53,"value":192},"Use the ",{"type":47,"tag":62,"props":194,"children":196},{"href":195},"remotion-saas\u002FSKILL.md",[197],{"type":53,"value":198},"Remotion SaaS skill",{"type":53,"value":200}," for knowledge about Remotion-powered SaaS apps, such as ",{"type":47,"tag":150,"props":202,"children":204},{"className":203},[],[205],{"type":53,"value":206},"\u003CPlayer>",{"type":53,"value":208},", rendering on Lambda, Vercel, Cloudflare, via Express.js, client-side rendering, or for finding the right SaaS template.",{"type":47,"tag":48,"props":210,"children":212},{"id":211},"looking-up-remotion-apis-and-documentation",[213],{"type":53,"value":214},"Looking up Remotion APIs and documentation",{"type":47,"tag":56,"props":216,"children":217},{},[218,220,226],{"type":53,"value":219},"To find and read current Remotion documentation, load ",{"type":47,"tag":62,"props":221,"children":223},{"href":222},"remotion-docs\u002FSKILL.md",[224],{"type":53,"value":225},"Remotion Docs",{"type":53,"value":103},{"type":47,"tag":48,"props":228,"children":230},{"id":229},"upgrading",[231],{"type":53,"value":232},"Upgrading",{"type":47,"tag":56,"props":234,"children":235},{},[236,238,244],{"type":53,"value":237},"To upgrade Remotion, related packages, compatible Mediabunny packages, and installed Remotion Agent Skills, load ",{"type":47,"tag":62,"props":239,"children":241},{"href":240},"remotion-upgrade\u002FSKILL.md",[242],{"type":53,"value":243},"Remotion Upgrade",{"type":53,"value":103},{"items":246,"total":389},[247,255,268,280,296,310,322,336,347,360,375],{"slug":4,"name":4,"fn":5,"description":6,"org":248,"tags":249,"stars":27,"repoUrl":28,"updatedAt":29},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[250,251,252,253,254],{"name":22,"slug":23,"type":16},{"name":14,"slug":15,"type":16},{"name":9,"slug":8,"type":16},{"name":18,"slug":19,"type":16},{"name":25,"slug":26,"type":16},{"slug":256,"name":256,"fn":257,"description":258,"org":259,"tags":260,"stars":27,"repoUrl":28,"updatedAt":267},"remotion-interactivity","create interactive Remotion animations","Structure Remotion markup for interactivity",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[261,262,265,266],{"name":22,"slug":23,"type":16},{"name":263,"slug":264,"type":16},"Design","design",{"name":14,"slug":15,"type":16},{"name":9,"slug":8,"type":16},"2026-07-30T05:25:35.376625",{"slug":269,"name":269,"fn":270,"description":271,"org":272,"tags":273,"stars":27,"repoUrl":28,"updatedAt":279},"remotion-multimedia","interact with Mediabunny in Remotion","Interacting with Mediabunny",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[274,277,278],{"name":275,"slug":276,"type":16},"Media","media",{"name":9,"slug":8,"type":16},{"name":25,"slug":26,"type":16},"2026-07-27T06:28:53.1297",{"slug":281,"name":281,"fn":282,"description":283,"org":284,"tags":285,"stars":27,"repoUrl":28,"updatedAt":295},"remotion-saas","build Remotion-powered SaaS applications","Build an app with Remotion",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[286,287,288,291,292],{"name":14,"slug":15,"type":16},{"name":9,"slug":8,"type":16},{"name":289,"slug":290,"type":16},"SaaS","saas",{"name":25,"slug":26,"type":16},{"name":293,"slug":294,"type":16},"Web Development","web-development","2026-07-27T06:08:27.300451",{"slug":297,"name":297,"fn":298,"description":299,"org":300,"tags":301,"stars":307,"repoUrl":308,"updatedAt":309},"remotion-captions","manage video captions in Remotion","Transcribing, displaying and animating captions",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[302,303,306],{"name":9,"slug":8,"type":16},{"name":304,"slug":305,"type":16},"Transcription","transcription",{"name":25,"slug":26,"type":16},4160,"https:\u002F\u002Fgithub.com\u002Fremotion-dev\u002Fskills","2026-07-30T05:25:30.695925",{"slug":311,"name":311,"fn":312,"description":313,"org":314,"tags":315,"stars":307,"repoUrl":308,"updatedAt":321},"remotion-create","create new Remotion video projects","Create a new Remotion video",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[316,319,320],{"name":317,"slug":318,"type":16},"Creative","creative",{"name":9,"slug":8,"type":16},{"name":25,"slug":26,"type":16},"2026-07-30T05:25:29.406181",{"slug":323,"name":323,"fn":324,"description":325,"org":326,"tags":327,"stars":307,"repoUrl":308,"updatedAt":335},"remotion-docs","search Remotion documentation","Search Remotion documentation",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[328,331,334],{"name":329,"slug":330,"type":16},"Documentation","documentation",{"name":332,"slug":333,"type":16},"Reference","reference",{"name":9,"slug":8,"type":16},"2026-07-30T05:25:32.714247",{"slug":337,"name":337,"fn":338,"description":339,"org":340,"tags":341,"stars":307,"repoUrl":308,"updatedAt":346},"remotion-maps","animate maps using Remotion","Remotion Map animation knowledge",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[342,343,344,345],{"name":22,"slug":23,"type":16},{"name":90,"slug":87,"type":16},{"name":9,"slug":8,"type":16},{"name":25,"slug":26,"type":16},"2026-07-30T05:25:28.60293",{"slug":348,"name":348,"fn":349,"description":350,"org":351,"tags":352,"stars":307,"repoUrl":308,"updatedAt":359},"remotion-markup","write Remotion React markup","Content, animation and effects best practices",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[353,356,357,358],{"name":354,"slug":355,"type":16},"Frontend","frontend",{"name":14,"slug":15,"type":16},{"name":9,"slug":8,"type":16},{"name":25,"slug":26,"type":16},"2026-07-30T05:25:33.787523",{"slug":361,"name":361,"fn":362,"description":363,"org":364,"tags":365,"stars":307,"repoUrl":308,"updatedAt":374},"remotion-render","render videos with Remotion","Export a Remotion video",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[366,369,372,373],{"name":367,"slug":368,"type":16},"Deployment","deployment",{"name":370,"slug":371,"type":16},"Performance","performance",{"name":9,"slug":8,"type":16},{"name":25,"slug":26,"type":16},"2026-07-30T05:25:31.705328",{"slug":376,"name":376,"fn":377,"description":378,"org":379,"tags":380,"stars":307,"repoUrl":308,"updatedAt":388},"remotion-upgrade","upgrade Remotion projects and dependencies","Upgrade Remotion, its related packages, compatible Mediabunny packages, and installed Remotion Agent Skills. Use when asked to upgrade or update a Remotion project.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[381,384,387],{"name":382,"slug":383,"type":16},"Engineering","engineering",{"name":385,"slug":386,"type":16},"Migration","migration",{"name":9,"slug":8,"type":16},"2026-07-21T06:07:40.273712",11,{"items":391,"total":421},[392,400,407,413],{"slug":4,"name":4,"fn":5,"description":6,"org":393,"tags":394,"stars":27,"repoUrl":28,"updatedAt":29},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[395,396,397,398,399],{"name":22,"slug":23,"type":16},{"name":14,"slug":15,"type":16},{"name":9,"slug":8,"type":16},{"name":18,"slug":19,"type":16},{"name":25,"slug":26,"type":16},{"slug":256,"name":256,"fn":257,"description":258,"org":401,"tags":402,"stars":27,"repoUrl":28,"updatedAt":267},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[403,404,405,406],{"name":22,"slug":23,"type":16},{"name":263,"slug":264,"type":16},{"name":14,"slug":15,"type":16},{"name":9,"slug":8,"type":16},{"slug":269,"name":269,"fn":270,"description":271,"org":408,"tags":409,"stars":27,"repoUrl":28,"updatedAt":279},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[410,411,412],{"name":275,"slug":276,"type":16},{"name":9,"slug":8,"type":16},{"name":25,"slug":26,"type":16},{"slug":281,"name":281,"fn":282,"description":283,"org":414,"tags":415,"stars":27,"repoUrl":28,"updatedAt":295},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[416,417,418,419,420],{"name":14,"slug":15,"type":16},{"name":9,"slug":8,"type":16},{"name":289,"slug":290,"type":16},{"name":25,"slug":26,"type":16},{"name":293,"slug":294,"type":16},4]