Remotion Markup

Before you start: read this whole install prompt, tell me in a few lines what this skill does and what installing it involves, and wait for my go-ahead before you do anything else. Prerequisites — Licence disclosure first: no licence was found anywhere in this repository at the pinned commit (not MIT, not Apache — see the listing's licence note). Installing needs no account, no key and no payment, and nothing is run. At use time the skill is guidance for writing markup in your own Remotion project: packages are added to that project with npx remotion add, and one optional companion guide (voiceover.md) describes generating a voiceover with ElevenLabs TTS by default, which would use your own ELEVENLABS_API_KEY only if you choose that provider — the guide says any TTS service that produces an audio file may be substituted. Install "Remotion Markup" for me. It is the main content, animation and effects guidance for writing Remotion React markup: keep useCurrentFrame() in the smallest component that needs it, drive animation with useCurrentFrame() and interpolate() (CSS transitions/animations and Tailwind animation classes must be refactored), preserve edits the user made outside the conversation, place assets in public/ and reference them with staticFile(), and use the media components (<Video>/<Audio> from @remotion/media, <CanvasImage>, <AnimatedImage>). Its 33 topic reference files cover compositions, sequencing and timing, transitions, effects (the built-in @remotion/effects catalogue), color correction, 3D, audio and audio visualization, images, GIFs, Lottie, fonts (Google and local), FFmpeg, silence detection, measuring text/DOM, parameters, video editing, voiceover and more; packages are added at use time with npx remotion add @remotion/media and similar commands. Its folder also physically embeds the complete remotion-maps/ subfolder (the same content as the separate Remotion Maps listing). Repository: https://github.com/remotion-dev/skills (the skill is the whole skills/remotion-markup/ folder at the pinned commit: SKILL.md plus 67 companion files, 68 files in total (including the embedded remotion-maps/ subfolder)) Pinned version: install the code at commit 6c67adcd9cdbe6eb84d76342da89b225f9161cb2 exactly. Do not substitute a newer version. If this commit is unreachable, stop and tell me. 1. Clone https://github.com/remotion-dev/skills into a temporary folder, check out commit 6c67adcd9cdbe6eb84d76342da89b225f9161cb2, and copy the skills/remotion-markup/ folder from that checkout. Then compare every file in the folder with the fingerprints recorded for this listing on 2026-10-22: [FINGERPRINTS] - 3d.md: SHA-256 42cef6d68fb4a266ab495d35df0c60e03672b0d85c043f9b567f6aa7ff00dd0d - SKILL.md: SHA-256 4b93ba32451e84fb0b071f7ca31ae6abc792fe07bf83a7575ae5663afa88a4b5 - agents/openai.yaml: SHA-256 79e440561b613adf930f61b9f2ececc3284dfd92d06c4c282b73b461ffd16cb6 - arabic-text.md: SHA-256 e062dc1e589275d98dd21d32ab08211cd85c2111b36a6fb522203a2ad1347922 - assets/remotion-icon.svg: SHA-256 5007669bd0555b0f4565b4e7176fa191310ab0039b2ed09d867a9270f5b0ce58 - audio-visualization.md: SHA-256 0f4043de86639b6390e5ab888eaa66a24a10a8bd540f1443327cb88107eae1e9 - audio.md: SHA-256 857bf47188c6de8936f51e862f670da7e1cafa38aea8e1ae4a4920789f224077 - calculate-metadata.md: SHA-256 ca904cd19d65bd926a1fb07519eb769cc55deeffe74f7c3282d5e3fd16a0dcba - color-correction.md: SHA-256 0cab0efa3cc9bce42f136e4f22f58d7f332ba229997bb8b79dbdb923b5bb59f9 - compositions.md: SHA-256 3d1fcd25ebc11726b216e5e419d950469c3c6416edf45f69630bd11c8179f8dd - connected-compositions.md: SHA-256 a3521a509f34875ad9d46dbdc01bc9e5ee3e93d2d7134e664efb826d67abd300 - cropping.md: SHA-256 188cbf969c677629baaf83dbe0e85bb9a8ee22615561f58bfca30ff39b9fdc88 - effects.md: SHA-256 f32d2ac56711a83b674022e7439bec725f859dffe0d82b4d65429428ee8bb188 - embedding-videos.md: SHA-256 3b0484bc92cd1d54fd6c9a54bc75c4f837054c90bb35e5e8959701d320c6a551 - ffmpeg.md: SHA-256 1d83085dfb63724f374acc5f01967f6c18f3aa7df62146438262a4061a839770 - gifs.md: SHA-256 91e17126f7f0d57efdbdbaf34e0c234f874bd6aa66ec7854b80f17b0e32c3b22 - google-fonts.md: SHA-256 fff29cf692ccab0cda263cd85255cf634dbb4d1d2d99e8372b01d9fedbd6cbfd - html-in-canvas.md: SHA-256 9b896dab368f8d9aec41114f8d0b96c1fbee981419b7077d6fd61621a0a54be4 - images.md: SHA-256 0e6c2af8ad73483ebbc761237f230c8c0db1bd9db6b60d01d48a24b8a4059284 - light-leaks.md: SHA-256 531514d4740c5a1a3798782300db69ebfe8f61191fc7852960bc5bdf5b82200b - local-fonts.md: SHA-256 fcad2a2e3a05419d4555c59a75454c4891455dbea91ad596c1095e2887d26a11 - lottie.md: SHA-256 666268c8151d91042162f9efe3f02fe8c62b4c45053614eb1a9325c169428826 - measuring-dom-nodes.md: SHA-256 a677b976eaf1cbc3cdd29cf29a3fd546c557b9a31e6b1fd70e473fde7e828733 - measuring-text.md: SHA-256 4bed81d1ea818db3975f878152dc24ecbc17e163117dcab10761dc8690c33f0c - motion-blur.md: SHA-256 bc7559c9d0e56dffef72dcc4fb2d89d42c587ec2204ac21d33ae0c583d59632d - multi-scene-video.md: SHA-256 27c3b31a3446f7fb1844734e88b837e2e4f67fadc3b0f14f9043b30c09836557 - parameters.md: SHA-256 b002ac9959105b2b91da5786bcb20aa6ff4c6632ed37074b32711f248867dff0 - remotion-maps/REFERENCE.md: SHA-256 da116f9bf15fed3eadc48b5ced196a651a9e233ed0cc7a8572ca55d7f4788358 - remotion-maps/agents/openai.yaml: SHA-256 9c6c75daec6eabd78cf6fbc7169be3f7dde934df1316e41df6658052056b29ee - remotion-maps/assets/remotion-icon.svg: SHA-256 5007669bd0555b0f4565b4e7176fa191310ab0039b2ed09d867a9270f5b0ce58 - remotion-maps/techniques/cesium/TECHNIQUE.md: SHA-256 09057e77b67dcda23eed8ddbf1b5bd44541a952f380913a00b3bfddaa39ab675 - remotion-maps/techniques/cesium/assets/CesiumFlythrough.tsx: SHA-256 4d4a90e373176e840ae76ae91533fcd9dc445407693b17091c376bb597dbcb10 - remotion-maps/techniques/cesium/assets/cesium-path.json: SHA-256 329621928df19d115f93c472a0b7ddbd2463cad502a10722d3c23579a7441d44 - remotion-maps/techniques/cesium/assets/city-path.json: SHA-256 3bb420736d196f726b856420b319e21a8d7fc24bca7e626d67e8b00b0544e630 - remotion-maps/techniques/cesium/assets/example-Root.tsx: SHA-256 51c2df109015adc992b66b62f1ffc9801ad13f3dc47e4290de40cbe1b8e7809e - remotion-maps/techniques/cesium/assets/flight-path.ts: SHA-256 fab65d2d9cc0c4ca56f8a1422494d178c0e57f92a048a4720358d236ced980f0 - remotion-maps/techniques/cesium/assets/sample-river.geojson: SHA-256 2c9f6dd35ac4aed56580078046941235ed7e1a5d432a6549dbf7fea4e8d1e9be - remotion-maps/techniques/cesium/references/3d-data-sources.md: SHA-256 23ac1acc576d49d599b33c812dc697b264ebe28849088c04e9827cb47b95275f - remotion-maps/techniques/cesium/references/3d-flyover-architecture.md: SHA-256 09e1891cec991a246eec60dbcf76c4ea84c52e0bee14321471197703395d0a91 - remotion-maps/techniques/cesium/references/3d-troubleshooting.md: SHA-256 c803fe443f5bab1a50408f1f6aa6aded7913577eaefcb586b320c5a96c391bf2 - remotion-maps/techniques/cesium/scripts/prep-cesium-path.mjs: SHA-256 6dbb4d1ae3f5fef9f3f6eb23e2a6d58622750714bb847b088ff58a3533839463 - remotion-maps/techniques/mapbox/TECHNIQUE.md: SHA-256 8c434f680988a7212a9443ef9be0f62ef734f3d92af4dc47c11dad184677eec9 - remotion-maps/techniques/mapbox/references/render-stability.md: SHA-256 96650329df3a870743b6255123e93dba866a37eb1ab1d07c8275efff0d4dead9 - remotion-maps/techniques/maplibre/TECHNIQUE.md: SHA-256 8a13debcd2abfce415b5c8b7f323420ec77092d81ceb935853171ca9697b902c - remotion-maps/techniques/maplibre/references/render-stability.md: SHA-256 96650329df3a870743b6255123e93dba866a37eb1ab1d07c8275efff0d4dead9 - remotion-maps/techniques/maptiler/TECHNIQUE.md: SHA-256 72896873e63d675caaab765941dbb8d668f2790090a63b94e165f254b77ef887 - remotion-maps/techniques/maptiler/assets/CountryLabel.tsx: SHA-256 6be8c7d5b3435c8d933f05394ce5e807da5fc9fe0565db94ccaee6ac049df137 - remotion-maps/techniques/maptiler/assets/MapTilerVectorElement.ts: SHA-256 c8137792824323b9db997a88c3b923e8072cf2886cd90c38d84fdbbaad8258ed - remotion-maps/techniques/maptiler/assets/RiverReveal.tsx: SHA-256 c3091e23dfd80178788d05c0bc43b17aee12aa4236d658f1a97c5acfb29a0f92 - remotion-maps/techniques/maptiler/assets/example-Root.tsx: SHA-256 e53677a7a207e37cbc04693eca8ccbab5f5f040efdc67a8b5c030c3913895e83 - remotion-maps/techniques/maptiler/assets/sample-data/country-meta.json: SHA-256 470a76cc5a45e58e7e1702cd80f74fcacf9d6e8b1ef7b05011f69853a999ba7b - remotion-maps/techniques/maptiler/assets/sample-data/yarlung-flow.json: SHA-256 73a99e77a2ce31cb3ac39be8fe4775d53ecf127a56137b587fca090067dfbb96 - remotion-maps/techniques/maptiler/assets/tokens.ts: SHA-256 29ae05eedb4988b5b8f2eb44d241b9c472533fb6ed05d4b33df3e71e0eabc71c - remotion-maps/techniques/maptiler/references/map-data-sources.md: SHA-256 b99680cbda8e7d70dc2cb1a8823f66247a21fc59d10c6dae0dd9ba24d2f15b80 - remotion-maps/techniques/maptiler/references/map-explainer-architecture.md: SHA-256 e09de8a4d00ea9a82b992918ec4d0302ee18979b73e6c777d584a9743092344f - remotion-maps/techniques/maptiler/references/map-geo-prep.md: SHA-256 a97b1913f06195601889d4e090ad056db2fffb7b83918924c8cd92847b3829ef - remotion-maps/techniques/maptiler/references/render-stability.md: SHA-256 96650329df3a870743b6255123e93dba866a37eb1ab1d07c8275efff0d4dead9 - remotion-maps/techniques/maptiler/scripts/prep-geo.mjs: SHA-256 8265f56bd7c27a7d1a5fa528a77bbe1b29c6acc0e6730233583ca53e2632d490 - remotion-maps/techniques/static-map/TECHNIQUE.md: SHA-256 28fe6e300d249cf85493132a23f6e5392bb5933ac99011b3ac4a3868f5f2cae9 - sequencing.md: SHA-256 f53680a3ec4b754501ce37516387666e1b3df3c5714d266154b274caea4236a4 - sfx.md: SHA-256 1f72e2d8858505ae2d31fa89231432714f8bc34c36164d3c0cc43a290b3f826a - silence-detection.md: SHA-256 7e777b141e339ade03bbdc1d002390e849781ebd3059183f60e1b24a91210f14 - text-highlights.md: SHA-256 6a3b7629b947e8657c42b73b1f53c91d9b1535af1bfed57e054981c51bb951cc - timing-props.md: SHA-256 346ff7f3778f3b7ba165ac212459034120cac7cffd3ead3fe68db179e15f7494 - timing.md: SHA-256 48047e758b96aea519916479ede62b832bf51f982924978e091c37f569ab4bac - transitions.md: SHA-256 83b8b511044ef175244a4e9e81f66bd3f5062cf9cecacd30ae88ac17eda40b82 - video-editing.md: SHA-256 c132393598777260615e3f21e1cc1cb108e37aacb6bd3d20157e86e079893e8a - voiceover.md: SHA-256 365abf92b89fb0393fc317a80632fddde60d982fa2d199475bbedd0023e77c69 If a file does not match, it changed since the listing was prepared: do not install it yet, tell me what you found and let me decide. 2. Read SKILL.md in full, and tell me in plain words: what the skill does when used, what it connects to, whether it reads or sends any personal information or credentials, and anything that seems unusual. Stop on any red flag and tell me before going further. Confirm these points from the files: - The skill folder holds 68 files: the 13,299-byte SKILL.md, 33 topic reference .md files at its root, agents/openai.yaml, the icon, and the complete embedded remotion-maps/ subfolder (32 files, TECHNIQUE.md files, references, example assets and 2 prep scripts) — the same content as the separate remotion-maps listing. Nothing in the folder is run during installation; the 2 prep scripts inside the maps subfolder are copied as-is. - Nothing is sent anywhere during installation itself; the only download at install time is the skill folder from GitHub at the pinned commit. No key is asked for or read during installation. - At use time this is guidance applied in my own Remotion project: frame-driven animation, media components, effects, and packages added to my project with npx remotion add when a guide calls for them. One optional guide, voiceover.md, describes ElevenLabs TTS with my own ELEVENLABS_API_KEY if I choose that provider (any TTS service may be substituted) — that is a use-time choice, never part of installation. - Do not edit any project of mine, do not add any package, do not run any script, and do not use the skill in any way during this install: using it is a separate step that only starts when I ask for it later. 3. When I say "yes, install", install it as a skill: copy the whole remotion-markup folder into the agent's skills directory, in a folder named exactly "remotion-markup", keeping its 68 files in their original relative layout (SKILL.md at its root). 4. Verify with no network calls: frontmatter valid (name: remotion-markup), the 68 files in place with matching fingerprints. Do not run anything from the folder and do not use the skill to verify. 5. Report what was installed, where, and what I still need to do myself (for example: that packages are only added to my project at use time with npx remotion add, that the optional voiceover guide would use my own ElevenLabs key only if I choose that provider, that its folder embeds the remotion-maps skill, and that the companion router remotion-best-practices also covers this skill). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me.