[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-remotion-remotion-create":3,"mdc--8liv4f-key":32,"related-org-remotion-remotion-create":331,"related-repo-remotion-remotion-create":482},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":12,"stars":21,"repoUrl":22,"updatedAt":23,"license":24,"forks":25,"topics":26,"repo":27,"sourceUrl":30,"mdContent":31},"remotion-create","create new Remotion video projects","Create a new Remotion video",{"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,18],{"name":14,"slug":15,"type":16},"Creative","creative","tag",{"name":9,"slug":8,"type":16},{"name":19,"slug":20,"type":16},"Video","video",4160,"https:\u002F\u002Fgithub.com\u002Fremotion-dev\u002Fskills","2026-07-30T05:25:29.406181",null,481,[],{"repoUrl":22,"stars":21,"forks":25,"topics":28,"description":29},[],"Agent Skills","https:\u002F\u002Fgithub.com\u002Fremotion-dev\u002Fskills\u002Ftree\u002FHEAD\u002Fskills\u002Fremotion-create","---\nname: remotion-create\ndescription: Create a new Remotion video\nmetadata:\n  tags: remotion\n---\n\nThese are instructions for making a new Remotion project and composition.  \nIf this is not the next task, see [Remotion Best Practices](..\u002Fremotion-best-practices\u002FSKILL.md)\n\n## Scaffold a project\n\nIf a project already exists, skip this.\nEnsure Node.js and Git is installed, and the current folder is appropriate for starting a new project.\n\nScaffold one using:\n\n```bash\nnpx create-video@latest --yes --blank --no-tailwind my-video\ncd my-video\nnpm i\n```\n\nReplace `my-video` with a suitable project name.\n\n## Designing a video\n\nKeep the scaffold and add React Markup.\nFollow [Remotion React Markup Best Practices](..\u002Fremotion-markup\u002FSKILL.md) and [Video Layout Rules](video-layout.md) for video-first layout and text sizing guidance.\n\n## Is this a multi-scene video?\n\nIf this is a video with multiple subsequence videos, follow guidance at [Multi-scene videos](..\u002Fremotion-markup\u002Fmulti-scene-video.md).\n\n## Interactivity Best Practices\n\nBy structuring the React Markup following [Remotion Interactivity Best Practices](..\u002Fremotion-interactivity\u002FSKILL.md), you allow the user to make edits in the Studio which write back to code.\n\n## TailwindCSS\n\nIf Tailwind is requested, see [tailwind.md](tailwind.md) for using TailwindCSS in Remotion.\n\n## Starting preview\n\n```bash\nnpx remotion studio --no-open\n```\n\nThis will start a long-running process and print the server URL for the preview.  \nIf server is already started, it will print the URL.\nYou can visit a specific composition by navigating to `\u002F[composition-id]`, for example `http:\u002F\u002Flocalhost:3000\u002FMapAnimation`.\n\n## Follow-up\n\nThe video creation process has finished.\nFor follow-up prompts, use [Remotion Best Practices](..\u002Fremotion-best-practices\u002FSKILL.md)\n",{"data":33,"body":35},{"name":4,"description":6,"metadata":34},{"tags":8},{"type":36,"children":37},"root",[38,59,66,71,76,154,167,173,194,200,213,219,232,238,250,256,285,310,316,325],{"type":39,"tag":40,"props":41,"children":42},"element","p",{},[43,46,50,52],{"type":44,"value":45},"text","These are instructions for making a new Remotion project and composition.",{"type":39,"tag":47,"props":48,"children":49},"br",{},[],{"type":44,"value":51},"\nIf this is not the next task, see ",{"type":39,"tag":53,"props":54,"children":56},"a",{"href":55},"..\u002Fremotion-best-practices\u002FSKILL.md",[57],{"type":44,"value":58},"Remotion Best Practices",{"type":39,"tag":60,"props":61,"children":63},"h2",{"id":62},"scaffold-a-project",[64],{"type":44,"value":65},"Scaffold a project",{"type":39,"tag":40,"props":67,"children":68},{},[69],{"type":44,"value":70},"If a project already exists, skip this.\nEnsure Node.js and Git is installed, and the current folder is appropriate for starting a new project.",{"type":39,"tag":40,"props":72,"children":73},{},[74],{"type":44,"value":75},"Scaffold one using:",{"type":39,"tag":77,"props":78,"children":83},"pre",{"className":79,"code":80,"language":81,"meta":82,"style":82},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx create-video@latest --yes --blank --no-tailwind my-video\ncd my-video\nnpm i\n","bash","",[84],{"type":39,"tag":85,"props":86,"children":87},"code",{"__ignoreMap":82},[88,126,140],{"type":39,"tag":89,"props":90,"children":93},"span",{"class":91,"line":92},"line",1,[94,100,106,111,116,121],{"type":39,"tag":89,"props":95,"children":97},{"style":96},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[98],{"type":44,"value":99},"npx",{"type":39,"tag":89,"props":101,"children":103},{"style":102},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[104],{"type":44,"value":105}," create-video@latest",{"type":39,"tag":89,"props":107,"children":108},{"style":102},[109],{"type":44,"value":110}," --yes",{"type":39,"tag":89,"props":112,"children":113},{"style":102},[114],{"type":44,"value":115}," --blank",{"type":39,"tag":89,"props":117,"children":118},{"style":102},[119],{"type":44,"value":120}," --no-tailwind",{"type":39,"tag":89,"props":122,"children":123},{"style":102},[124],{"type":44,"value":125}," my-video\n",{"type":39,"tag":89,"props":127,"children":129},{"class":91,"line":128},2,[130,136],{"type":39,"tag":89,"props":131,"children":133},{"style":132},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[134],{"type":44,"value":135},"cd",{"type":39,"tag":89,"props":137,"children":138},{"style":102},[139],{"type":44,"value":125},{"type":39,"tag":89,"props":141,"children":143},{"class":91,"line":142},3,[144,149],{"type":39,"tag":89,"props":145,"children":146},{"style":96},[147],{"type":44,"value":148},"npm",{"type":39,"tag":89,"props":150,"children":151},{"style":102},[152],{"type":44,"value":153}," i\n",{"type":39,"tag":40,"props":155,"children":156},{},[157,159,165],{"type":44,"value":158},"Replace ",{"type":39,"tag":85,"props":160,"children":162},{"className":161},[],[163],{"type":44,"value":164},"my-video",{"type":44,"value":166}," with a suitable project name.",{"type":39,"tag":60,"props":168,"children":170},{"id":169},"designing-a-video",[171],{"type":44,"value":172},"Designing a video",{"type":39,"tag":40,"props":174,"children":175},{},[176,178,184,186,192],{"type":44,"value":177},"Keep the scaffold and add React Markup.\nFollow ",{"type":39,"tag":53,"props":179,"children":181},{"href":180},"..\u002Fremotion-markup\u002FSKILL.md",[182],{"type":44,"value":183},"Remotion React Markup Best Practices",{"type":44,"value":185}," and ",{"type":39,"tag":53,"props":187,"children":189},{"href":188},"video-layout.md",[190],{"type":44,"value":191},"Video Layout Rules",{"type":44,"value":193}," for video-first layout and text sizing guidance.",{"type":39,"tag":60,"props":195,"children":197},{"id":196},"is-this-a-multi-scene-video",[198],{"type":44,"value":199},"Is this a multi-scene video?",{"type":39,"tag":40,"props":201,"children":202},{},[203,205,211],{"type":44,"value":204},"If this is a video with multiple subsequence videos, follow guidance at ",{"type":39,"tag":53,"props":206,"children":208},{"href":207},"..\u002Fremotion-markup\u002Fmulti-scene-video.md",[209],{"type":44,"value":210},"Multi-scene videos",{"type":44,"value":212},".",{"type":39,"tag":60,"props":214,"children":216},{"id":215},"interactivity-best-practices",[217],{"type":44,"value":218},"Interactivity Best Practices",{"type":39,"tag":40,"props":220,"children":221},{},[222,224,230],{"type":44,"value":223},"By structuring the React Markup following ",{"type":39,"tag":53,"props":225,"children":227},{"href":226},"..\u002Fremotion-interactivity\u002FSKILL.md",[228],{"type":44,"value":229},"Remotion Interactivity Best Practices",{"type":44,"value":231},", you allow the user to make edits in the Studio which write back to code.",{"type":39,"tag":60,"props":233,"children":235},{"id":234},"tailwindcss",[236],{"type":44,"value":237},"TailwindCSS",{"type":39,"tag":40,"props":239,"children":240},{},[241,243,248],{"type":44,"value":242},"If Tailwind is requested, see ",{"type":39,"tag":53,"props":244,"children":246},{"href":245},"tailwind.md",[247],{"type":44,"value":245},{"type":44,"value":249}," for using TailwindCSS in Remotion.",{"type":39,"tag":60,"props":251,"children":253},{"id":252},"starting-preview",[254],{"type":44,"value":255},"Starting preview",{"type":39,"tag":77,"props":257,"children":259},{"className":79,"code":258,"language":81,"meta":82,"style":82},"npx remotion studio --no-open\n",[260],{"type":39,"tag":85,"props":261,"children":262},{"__ignoreMap":82},[263],{"type":39,"tag":89,"props":264,"children":265},{"class":91,"line":92},[266,270,275,280],{"type":39,"tag":89,"props":267,"children":268},{"style":96},[269],{"type":44,"value":99},{"type":39,"tag":89,"props":271,"children":272},{"style":102},[273],{"type":44,"value":274}," remotion",{"type":39,"tag":89,"props":276,"children":277},{"style":102},[278],{"type":44,"value":279}," studio",{"type":39,"tag":89,"props":281,"children":282},{"style":102},[283],{"type":44,"value":284}," --no-open\n",{"type":39,"tag":40,"props":286,"children":287},{},[288,290,293,295,301,303,309],{"type":44,"value":289},"This will start a long-running process and print the server URL for the preview.",{"type":39,"tag":47,"props":291,"children":292},{},[],{"type":44,"value":294},"\nIf server is already started, it will print the URL.\nYou can visit a specific composition by navigating to ",{"type":39,"tag":85,"props":296,"children":298},{"className":297},[],[299],{"type":44,"value":300},"\u002F[composition-id]",{"type":44,"value":302},", for example ",{"type":39,"tag":85,"props":304,"children":306},{"className":305},[],[307],{"type":44,"value":308},"http:\u002F\u002Flocalhost:3000\u002FMapAnimation",{"type":44,"value":212},{"type":39,"tag":60,"props":311,"children":313},{"id":312},"follow-up",[314],{"type":44,"value":315},"Follow-up",{"type":39,"tag":40,"props":317,"children":318},{},[319,321],{"type":44,"value":320},"The video creation process has finished.\nFor follow-up prompts, use ",{"type":39,"tag":53,"props":322,"children":323},{"href":55},[324],{"type":44,"value":58},{"type":39,"tag":326,"props":327,"children":328},"style",{},[329],{"type":44,"value":330},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":332,"total":481},[333,353,366,378,394,406,412,426,439,452,467],{"slug":334,"name":334,"fn":335,"description":336,"org":337,"tags":338,"stars":350,"repoUrl":351,"updatedAt":352},"remotion-best-practices","build programmatic videos with Remotion","Router for all Remotion skills",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[339,342,345,346,349],{"name":340,"slug":341,"type":16},"Animation","animation",{"name":343,"slug":344,"type":16},"React","react",{"name":9,"slug":8,"type":16},{"name":347,"slug":348,"type":16},"TypeScript","typescript",{"name":19,"slug":20,"type":16},54855,"https:\u002F\u002Fgithub.com\u002Fremotion-dev\u002Fremotion","2026-07-27T06:08:28.310856",{"slug":354,"name":354,"fn":355,"description":356,"org":357,"tags":358,"stars":350,"repoUrl":351,"updatedAt":365},"remotion-interactivity","create interactive Remotion animations","Structure Remotion markup for interactivity",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[359,360,363,364],{"name":340,"slug":341,"type":16},{"name":361,"slug":362,"type":16},"Design","design",{"name":343,"slug":344,"type":16},{"name":9,"slug":8,"type":16},"2026-07-30T05:25:35.376625",{"slug":367,"name":367,"fn":368,"description":369,"org":370,"tags":371,"stars":350,"repoUrl":351,"updatedAt":377},"remotion-multimedia","interact with Mediabunny in Remotion","Interacting with Mediabunny",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[372,375,376],{"name":373,"slug":374,"type":16},"Media","media",{"name":9,"slug":8,"type":16},{"name":19,"slug":20,"type":16},"2026-07-27T06:28:53.1297",{"slug":379,"name":379,"fn":380,"description":381,"org":382,"tags":383,"stars":350,"repoUrl":351,"updatedAt":393},"remotion-saas","build Remotion-powered SaaS applications","Build an app with Remotion",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[384,385,386,389,390],{"name":343,"slug":344,"type":16},{"name":9,"slug":8,"type":16},{"name":387,"slug":388,"type":16},"SaaS","saas",{"name":19,"slug":20,"type":16},{"name":391,"slug":392,"type":16},"Web Development","web-development","2026-07-27T06:08:27.300451",{"slug":395,"name":395,"fn":396,"description":397,"org":398,"tags":399,"stars":21,"repoUrl":22,"updatedAt":405},"remotion-captions","manage video captions in Remotion","Transcribing, displaying and animating captions",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[400,401,404],{"name":9,"slug":8,"type":16},{"name":402,"slug":403,"type":16},"Transcription","transcription",{"name":19,"slug":20,"type":16},"2026-07-30T05:25:30.695925",{"slug":4,"name":4,"fn":5,"description":6,"org":407,"tags":408,"stars":21,"repoUrl":22,"updatedAt":23},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[409,410,411],{"name":14,"slug":15,"type":16},{"name":9,"slug":8,"type":16},{"name":19,"slug":20,"type":16},{"slug":413,"name":413,"fn":414,"description":415,"org":416,"tags":417,"stars":21,"repoUrl":22,"updatedAt":425},"remotion-docs","search Remotion documentation","Search Remotion documentation",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[418,421,424],{"name":419,"slug":420,"type":16},"Documentation","documentation",{"name":422,"slug":423,"type":16},"Reference","reference",{"name":9,"slug":8,"type":16},"2026-07-30T05:25:32.714247",{"slug":427,"name":427,"fn":428,"description":429,"org":430,"tags":431,"stars":21,"repoUrl":22,"updatedAt":438},"remotion-maps","animate maps using Remotion","Remotion Map animation knowledge",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[432,433,436,437],{"name":340,"slug":341,"type":16},{"name":434,"slug":435,"type":16},"Maps","maps",{"name":9,"slug":8,"type":16},{"name":19,"slug":20,"type":16},"2026-07-30T05:25:28.60293",{"slug":440,"name":440,"fn":441,"description":442,"org":443,"tags":444,"stars":21,"repoUrl":22,"updatedAt":451},"remotion-markup","write Remotion React markup","Content, animation and effects best practices",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[445,448,449,450],{"name":446,"slug":447,"type":16},"Frontend","frontend",{"name":343,"slug":344,"type":16},{"name":9,"slug":8,"type":16},{"name":19,"slug":20,"type":16},"2026-07-30T05:25:33.787523",{"slug":453,"name":453,"fn":454,"description":455,"org":456,"tags":457,"stars":21,"repoUrl":22,"updatedAt":466},"remotion-render","render videos with Remotion","Export a Remotion video",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[458,461,464,465],{"name":459,"slug":460,"type":16},"Deployment","deployment",{"name":462,"slug":463,"type":16},"Performance","performance",{"name":9,"slug":8,"type":16},{"name":19,"slug":20,"type":16},"2026-07-30T05:25:31.705328",{"slug":468,"name":468,"fn":469,"description":470,"org":471,"tags":472,"stars":21,"repoUrl":22,"updatedAt":480},"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},[473,476,479],{"name":474,"slug":475,"type":16},"Engineering","engineering",{"name":477,"slug":478,"type":16},"Migration","migration",{"name":9,"slug":8,"type":16},"2026-07-21T06:07:40.273712",11,{"items":483,"total":529},[484,490,496,502,509,516,523],{"slug":395,"name":395,"fn":396,"description":397,"org":485,"tags":486,"stars":21,"repoUrl":22,"updatedAt":405},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[487,488,489],{"name":9,"slug":8,"type":16},{"name":402,"slug":403,"type":16},{"name":19,"slug":20,"type":16},{"slug":4,"name":4,"fn":5,"description":6,"org":491,"tags":492,"stars":21,"repoUrl":22,"updatedAt":23},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[493,494,495],{"name":14,"slug":15,"type":16},{"name":9,"slug":8,"type":16},{"name":19,"slug":20,"type":16},{"slug":413,"name":413,"fn":414,"description":415,"org":497,"tags":498,"stars":21,"repoUrl":22,"updatedAt":425},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[499,500,501],{"name":419,"slug":420,"type":16},{"name":422,"slug":423,"type":16},{"name":9,"slug":8,"type":16},{"slug":427,"name":427,"fn":428,"description":429,"org":503,"tags":504,"stars":21,"repoUrl":22,"updatedAt":438},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[505,506,507,508],{"name":340,"slug":341,"type":16},{"name":434,"slug":435,"type":16},{"name":9,"slug":8,"type":16},{"name":19,"slug":20,"type":16},{"slug":440,"name":440,"fn":441,"description":442,"org":510,"tags":511,"stars":21,"repoUrl":22,"updatedAt":451},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[512,513,514,515],{"name":446,"slug":447,"type":16},{"name":343,"slug":344,"type":16},{"name":9,"slug":8,"type":16},{"name":19,"slug":20,"type":16},{"slug":453,"name":453,"fn":454,"description":455,"org":517,"tags":518,"stars":21,"repoUrl":22,"updatedAt":466},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[519,520,521,522],{"name":459,"slug":460,"type":16},{"name":462,"slug":463,"type":16},{"name":9,"slug":8,"type":16},{"name":19,"slug":20,"type":16},{"slug":468,"name":468,"fn":469,"description":470,"org":524,"tags":525,"stars":21,"repoUrl":22,"updatedAt":480},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[526,527,528],{"name":474,"slug":475,"type":16},{"name":477,"slug":478,"type":16},{"name":9,"slug":8,"type":16},7]