dsh-remotion 0.3.2 → 0.3.4

package/skills/remotion-best-practices/remotion-multimedia/agents/openai.yaml

@@ -1,7 +1,7 @@
 interface:
   display_name: '/remotion-multimedia'
   short_description: 'Inspect browser-based audio and video media'
-  icon_small: './assets/remotion-icon.png'
-  icon_large: './assets/remotion-icon.png'
+  icon_small: './assets/remotion-icon.svg'
+  icon_large: './assets/remotion-icon.svg'
   brand_color: '#0B84F3'
   default_prompt: '$remotion-multimedia: Make my video the same duration as the footage'

package/skills/remotion-best-practices/remotion-multimedia/assets/remotion-icon.svg

@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">
+<title>Remotion</title>
+<path d="M148.332 92.9015C143.307 93.1742 139.259 93.9713 135.179 95.5236C133.144 96.2893 129.809 97.957 127.973 99.1108C120.295 103.925 114.443 111.162 111.391 119.584C110.782 121.252 109.136 126.57 108.076 130.23C101.018 154.7 97.0112 181.456 96.1511 209.776C96.0148 214.286 96.0148 225.026 96.1511 229.463C96.728 248.237 98.5216 265.187 101.773 282.472C103.095 289.468 105.213 298.866 106.44 303.135C108.947 311.809 114.065 319.193 121.344 324.605C126.221 328.234 131.759 330.668 137.895 331.863C140.853 332.44 144.755 332.702 147.629 332.514C151.604 332.251 159.491 331.192 165.9 330.049C194.786 324.899 221.469 315.679 245.666 302.485C260.99 294.125 274.09 285.074 286.729 274.092C299.326 263.163 310.066 251.405 319.516 238.21C321.708 235.158 322.81 233.375 323.911 231.131C326.743 225.341 328.075 219.583 328.064 213.143C328.064 207.143 326.932 201.815 324.488 196.361C323.313 193.728 322.191 191.84 319.674 188.253C310.402 175.048 300.112 163.542 287.568 152.361C268.122 135.034 245.026 120.822 219.235 110.302C213.644 108.026 208.138 106.022 201.509 103.851C187.475 99.2681 170.106 95.2929 155.411 93.3105C153.104 92.9959 149.968 92.8176 148.332 92.9015Z" fill="#0B84F3"/>
+</svg>

package/skills/remotion-best-practices/remotion-render/{SKILL.md → REFERENCE.md}

@@ -1,7 +1,7 @@
 ---
 name: remotion-render
 description: Export a Remotion video
-version: 4.0.519
+version: 4.0.529
 ---
 
 ## General rendering strategy
@@ -22,6 +22,14 @@ npx remotion still
 
 Full list of options: https://www.remotion.dev/docs/cli/still.md
 
+To render several frames as images in one call, use `render --frames`:
+
+```
+npx remotion render [composition-id] out/frames --frames=0,30,90 --image-format=png
+```
+
+See https://www.remotion.dev/docs/cli/render.md#--frames for more options.
+
 ## Transparent videos
 
 See [Transparent videos](./transparent-videos.md) for rendering out a video with transparency.

package/skills/remotion-best-practices/remotion-render/agents/openai.yaml

@@ -1,7 +1,7 @@
 interface:
   display_name: '/remotion-render'
   short_description: 'Export Remotion videos and stills'
-  icon_small: './assets/remotion-icon.png'
-  icon_large: './assets/remotion-icon.png'
+  icon_small: './assets/remotion-icon.svg'
+  icon_large: './assets/remotion-icon.svg'
   brand_color: '#0B84F3'
   default_prompt: '$remotion-render: Render this as transparent ProRes'

package/skills/remotion-best-practices/remotion-render/assets/remotion-icon.svg

@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">
+<title>Remotion</title>
+<path d="M148.332 92.9015C143.307 93.1742 139.259 93.9713 135.179 95.5236C133.144 96.2893 129.809 97.957 127.973 99.1108C120.295 103.925 114.443 111.162 111.391 119.584C110.782 121.252 109.136 126.57 108.076 130.23C101.018 154.7 97.0112 181.456 96.1511 209.776C96.0148 214.286 96.0148 225.026 96.1511 229.463C96.728 248.237 98.5216 265.187 101.773 282.472C103.095 289.468 105.213 298.866 106.44 303.135C108.947 311.809 114.065 319.193 121.344 324.605C126.221 328.234 131.759 330.668 137.895 331.863C140.853 332.44 144.755 332.702 147.629 332.514C151.604 332.251 159.491 331.192 165.9 330.049C194.786 324.899 221.469 315.679 245.666 302.485C260.99 294.125 274.09 285.074 286.729 274.092C299.326 263.163 310.066 251.405 319.516 238.21C321.708 235.158 322.81 233.375 323.911 231.131C326.743 225.341 328.075 219.583 328.064 213.143C328.064 207.143 326.932 201.815 324.488 196.361C323.313 193.728 322.191 191.84 319.674 188.253C310.402 175.048 300.112 163.542 287.568 152.361C268.122 135.034 245.026 120.822 219.235 110.302C213.644 108.026 208.138 106.022 201.509 103.851C187.475 99.2681 170.106 95.2929 155.411 93.3105C153.104 92.9959 149.968 92.8176 148.332 92.9015Z" fill="#0B84F3"/>
+</svg>

package/skills/remotion-best-practices/remotion-saas/{SKILL.md → REFERENCE.md}

@@ -1,7 +1,7 @@
 ---
 name: remotion-saas
 description: Build an app with Remotion
-version: 4.0.519
+version: 4.0.529
 ---
 
 One can build apps with Remotion.  

package/skills/remotion-best-practices/remotion-saas/agents/openai.yaml

@@ -1,7 +1,7 @@
 interface:
   display_name: '/remotion-saas'
   short_description: 'Build apps that preview and render videos'
-  icon_small: './assets/remotion-icon.png'
-  icon_large: './assets/remotion-icon.png'
+  icon_small: './assets/remotion-icon.svg'
+  icon_large: './assets/remotion-icon.svg'
   brand_color: '#0B84F3'
   default_prompt: '$remotion-saas: Turn my video into an app.'

package/skills/remotion-best-practices/remotion-saas/assets/remotion-icon.svg

@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">
+<title>Remotion</title>
+<path d="M148.332 92.9015C143.307 93.1742 139.259 93.9713 135.179 95.5236C133.144 96.2893 129.809 97.957 127.973 99.1108C120.295 103.925 114.443 111.162 111.391 119.584C110.782 121.252 109.136 126.57 108.076 130.23C101.018 154.7 97.0112 181.456 96.1511 209.776C96.0148 214.286 96.0148 225.026 96.1511 229.463C96.728 248.237 98.5216 265.187 101.773 282.472C103.095 289.468 105.213 298.866 106.44 303.135C108.947 311.809 114.065 319.193 121.344 324.605C126.221 328.234 131.759 330.668 137.895 331.863C140.853 332.44 144.755 332.702 147.629 332.514C151.604 332.251 159.491 331.192 165.9 330.049C194.786 324.899 221.469 315.679 245.666 302.485C260.99 294.125 274.09 285.074 286.729 274.092C299.326 263.163 310.066 251.405 319.516 238.21C321.708 235.158 322.81 233.375 323.911 231.131C326.743 225.341 328.075 219.583 328.064 213.143C328.064 207.143 326.932 201.815 324.488 196.361C323.313 193.728 322.191 191.84 319.674 188.253C310.402 175.048 300.112 163.542 287.568 152.361C268.122 135.034 245.026 120.822 219.235 110.302C213.644 108.026 208.138 106.022 201.509 103.851C187.475 99.2681 170.106 95.2929 155.411 93.3105C153.104 92.9959 149.968 92.8176 148.332 92.9015Z" fill="#0B84F3"/>
+</svg>

package/skills/remotion-best-practices/remotion-saas/framework.md

@@ -9,9 +9,7 @@ Remotion can be used with any React framework.
 
 We offer the following templates:
 
-- Next.js App Router with Tailwind: https://github.com/remotion-dev/template-next-app-dir-tailwind. Uses Lambda as default rendering choice.
-- Next.js App Router without Tailwind: https://www.remotion.dev/templates/next-no-tailwind. Uses Lambda as default rendering choice.
-- Next.js Pages Router: https://github.com/remotion-dev/template-next-pages-dir. Uses Lambda as default rendering choice.
+- Next.js: https://github.com/remotion-dev/template-next-app-dir-tailwind. Uses Lambda as default rendering choice.
 - Vercel Sandbox rendering: https://github.com/remotion-dev/template-vercel. Uses Vercel as default rendering choice.
 - React Router 7: https://github.com/remotion-dev/template-react-router. Uses Lambda as default rendering choice.
 - Express.js render server: `packages/template-render-server`: https://github.com/remotion-dev/template-render-server. Uses Node.js as default rendering choice.

package/skills/remotion-best-practices/remotion-studio/{SKILL.md → REFERENCE.md}

@@ -1,7 +1,7 @@
 ---
 name: remotion-studio
 description: Preview a Remotion video
-version: 4.0.519
+version: 4.0.529
 ---
 
 Execute the following command:

package/skills/remotion-best-practices/remotion-studio/agents/openai.yaml

@@ -1,7 +1,7 @@
 interface:
   display_name: '/remotion-studio'
   short_description: 'Preview your video'
-  icon_small: './assets/remotion-icon.png'
-  icon_large: './assets/remotion-icon.png'
+  icon_small: './assets/remotion-icon.svg'
+  icon_large: './assets/remotion-icon.svg'
   brand_color: '#0B84F3'
   default_prompt: '$remotion-studio.'

package/skills/remotion-best-practices/remotion-studio/assets/remotion-icon.svg

@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">
+<title>Remotion</title>
+<path d="M148.332 92.9015C143.307 93.1742 139.259 93.9713 135.179 95.5236C133.144 96.2893 129.809 97.957 127.973 99.1108C120.295 103.925 114.443 111.162 111.391 119.584C110.782 121.252 109.136 126.57 108.076 130.23C101.018 154.7 97.0112 181.456 96.1511 209.776C96.0148 214.286 96.0148 225.026 96.1511 229.463C96.728 248.237 98.5216 265.187 101.773 282.472C103.095 289.468 105.213 298.866 106.44 303.135C108.947 311.809 114.065 319.193 121.344 324.605C126.221 328.234 131.759 330.668 137.895 331.863C140.853 332.44 144.755 332.702 147.629 332.514C151.604 332.251 159.491 331.192 165.9 330.049C194.786 324.899 221.469 315.679 245.666 302.485C260.99 294.125 274.09 285.074 286.729 274.092C299.326 263.163 310.066 251.405 319.516 238.21C321.708 235.158 322.81 233.375 323.911 231.131C326.743 225.341 328.075 219.583 328.064 213.143C328.064 207.143 326.932 201.815 324.488 196.361C323.313 193.728 322.191 191.84 319.674 188.253C310.402 175.048 300.112 163.542 287.568 152.361C268.122 135.034 245.026 120.822 219.235 110.302C213.644 108.026 208.138 106.022 201.509 103.851C187.475 99.2681 170.106 95.2929 155.411 93.3105C153.104 92.9959 149.968 92.8176 148.332 92.9015Z" fill="#0B84F3"/>
+</svg>

package/skills/remotion-best-practices/remotion-upgrade/{SKILL.md → REFERENCE.md}

@@ -1,7 +1,7 @@
 ---
 name: remotion-upgrade
 description: Upgrade Remotion, and related packages
-version: 4.0.519
+version: 4.0.529
 ---
 
 # Upgrade Remotion
@@ -18,7 +18,7 @@ version: 4.0.519
 3. If `@remotion/cli` is not available, upgrade manually:
    - Get the latest stable Remotion version with `npm view remotion version`.
    - Find every installed `remotion` and `@remotion/*` dependency across the project and upgrade them all to that exact version. Preserve their dependency sections and the project's workspace or catalog conventions.
-   - Read the current [Mediabunny compatibility page](https://www.remotion.dev/docs/mediabunny/version) and determine the Mediabunny version compatible with the target Remotion version. Upgrade every installed `mediabunny` and `@mediabunny/*` package to the documented compatible version.
+   - Read the `@remotion/studio` dependencies for the target Remotion version using `npm view @remotion/studio@<version> dependencies --json`. Align installed auxiliary packages such as `zod`, `mediabunny`, and `@huggingface/transformers` with the versions listed there. Use the `mediabunny` version for installed `@mediabunny/*` packages.
    - Run the project's package manager to update its lockfile.
 4. If `@remotion/cli` is not available, update the installed Remotion skills:
 
@@ -26,6 +26,6 @@ version: 4.0.519
    npx skills update remotion-best-practices remotion-captions remotion-create remotion-docs remotion-interactivity remotion-maps remotion-markup remotion-multimedia remotion-render remotion-saas remotion-studio remotion-upgrade --yes
    ```
 
-5. Review the manifest and lockfile diff. Ensure all Remotion packages use one version and all installed Mediabunny packages use the compatible version. If the CLI is available, run `npx remotion versions` as an additional check.
+5. Review the manifest and lockfile diff. Ensure all Remotion packages use one version and installed auxiliary packages use their recommended versions. If the CLI is available, run `npx remotion versions` as an additional check.
 
 The [Remotion releases](https://github.com/remotion-dev/remotion/releases) contain the changelog and may be useful for summarizing relevant changes after the upgrade.

package/skills/remotion-best-practices/remotion-upgrade/agents/openai.yaml

@@ -1,7 +1,7 @@
 interface:
   display_name: '/remotion-upgrade'
   short_description: 'Upgrade Remotion and related dependencies'
-  icon_small: './assets/remotion-icon.png'
-  icon_large: './assets/remotion-icon.png'
+  icon_small: './assets/remotion-icon.svg'
+  icon_large: './assets/remotion-icon.svg'
   brand_color: '#0B84F3'
   default_prompt: '$remotion-upgrade: Upgrade my project.'

package/skills/remotion-best-practices/remotion-upgrade/assets/remotion-icon.svg

@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">
+<title>Remotion</title>
+<path d="M148.332 92.9015C143.307 93.1742 139.259 93.9713 135.179 95.5236C133.144 96.2893 129.809 97.957 127.973 99.1108C120.295 103.925 114.443 111.162 111.391 119.584C110.782 121.252 109.136 126.57 108.076 130.23C101.018 154.7 97.0112 181.456 96.1511 209.776C96.0148 214.286 96.0148 225.026 96.1511 229.463C96.728 248.237 98.5216 265.187 101.773 282.472C103.095 289.468 105.213 298.866 106.44 303.135C108.947 311.809 114.065 319.193 121.344 324.605C126.221 328.234 131.759 330.668 137.895 331.863C140.853 332.44 144.755 332.702 147.629 332.514C151.604 332.251 159.491 331.192 165.9 330.049C194.786 324.899 221.469 315.679 245.666 302.485C260.99 294.125 274.09 285.074 286.729 274.092C299.326 263.163 310.066 251.405 319.516 238.21C321.708 235.158 322.81 233.375 323.911 231.131C326.743 225.341 328.075 219.583 328.064 213.143C328.064 207.143 326.932 201.815 324.488 196.361C323.313 193.728 322.191 191.84 319.674 188.253C310.402 175.048 300.112 163.542 287.568 152.361C268.122 135.034 245.026 120.822 219.235 110.302C213.644 108.026 208.138 106.022 201.509 103.851C187.475 99.2681 170.106 95.2929 155.411 93.3105C153.104 92.9959 149.968 92.8176 148.332 92.9015Z" fill="#0B84F3"/>
+</svg>

package/skills/remotion-captions/SKILL.md

@@ -1,8 +1,9 @@
----
-name: remotion-captions
-description: Transcribing, displaying and animating captions
-version: 4.0.519
----
+---
+name: remotion-captions
+description: Transcribing, displaying and animating captions
+version: 4.0.529
+---
+
 
 All captions must be processed in JSON. The captions must use the [`Caption`](https://www.remotion.dev/docs/captions/caption.md) type which is the following:
 

package/skills/remotion-captions/agents/openai.yaml

@@ -1,7 +1,7 @@
 interface:
   display_name: '/remotion-captions'
   short_description: 'Transcribe, display, and animate captions'
-  icon_small: './assets/remotion-icon.png'
-  icon_large: './assets/remotion-icon.png'
+  icon_small: './assets/remotion-icon.svg'
+  icon_large: './assets/remotion-icon.svg'
   brand_color: '#0B84F3'
   default_prompt: '$remotion-captions: Transcribe my video and display captions'

package/skills/remotion-captions/assets/remotion-icon.svg

@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">
+<title>Remotion</title>
+<path d="M148.332 92.9015C143.307 93.1742 139.259 93.9713 135.179 95.5236C133.144 96.2893 129.809 97.957 127.973 99.1108C120.295 103.925 114.443 111.162 111.391 119.584C110.782 121.252 109.136 126.57 108.076 130.23C101.018 154.7 97.0112 181.456 96.1511 209.776C96.0148 214.286 96.0148 225.026 96.1511 229.463C96.728 248.237 98.5216 265.187 101.773 282.472C103.095 289.468 105.213 298.866 106.44 303.135C108.947 311.809 114.065 319.193 121.344 324.605C126.221 328.234 131.759 330.668 137.895 331.863C140.853 332.44 144.755 332.702 147.629 332.514C151.604 332.251 159.491 331.192 165.9 330.049C194.786 324.899 221.469 315.679 245.666 302.485C260.99 294.125 274.09 285.074 286.729 274.092C299.326 263.163 310.066 251.405 319.516 238.21C321.708 235.158 322.81 233.375 323.911 231.131C326.743 225.341 328.075 219.583 328.064 213.143C328.064 207.143 326.932 201.815 324.488 196.361C323.313 193.728 322.191 191.84 319.674 188.253C310.402 175.048 300.112 163.542 287.568 152.361C268.122 135.034 245.026 120.822 219.235 110.302C213.644 108.026 208.138 106.022 201.509 103.851C187.475 99.2681 170.106 95.2929 155.411 93.3105C153.104 92.9959 149.968 92.8176 148.332 92.9015Z" fill="#0B84F3"/>
+</svg>

package/skills/remotion-create/SKILL.md

@@ -1,39 +1,57 @@
----
-name: remotion-create
-description: Create a new Remotion video
-version: 4.0.519
----
+---
+name: remotion-create
+description: Create a new Remotion video
+version: 4.0.529
+---
+
 
 These are instructions for making a new Remotion project and composition.  
-If this is not the next task, see [Remotion Best Practices](../remotion-best-practices/SKILL.md)
+If this is not the next task, see Remotion Best Practices
 
 ## Scaffold a project
 
 If a project already exists, skip this.
 Ensure Node.js and Git is installed, and the current folder is appropriate for starting a new project.
 
-Scaffold one using:
+Inspect the current folder, including hidden files, before choosing where to scaffold.
+
+### Empty folder
+
+If it is empty, or contains only disposable operating-system metadata such as `.DS_Store`, create the project directly in the current folder.
+Remove only those disposable metadata files first, since `create-video` rejects non-empty folders.
+Do not treat all hidden files as disposable: files such as `.env` and directories such as `.git` are meaningful contents.
+
+Scaffold in existing folder:
 
 ```bash
-npx create-video@latest --yes --blank --no-tailwind my-video
-cd my-video
+npx create-video@latest --yes --blank --no-tailwind .
 npm i
 ```
 
+### Non-empty folder
+
+If the current folder contains meaningful contents and no project already exists, scaffold into a new subfolder.
 Replace `my-video` with a suitable project name.
 
+
+```bash
+npx create-video@latest --yes --blank --no-tailwind my-video
+cd my-video
+npm i
+```
+
 ## Designing a video
 
 Keep the scaffold and add React Markup.
-Follow [Remotion React Markup Best Practices](../remotion-markup/SKILL.md) and [Video Layout Rules](video-layout.md) for video-first layout and text sizing guidance.
+Follow Remotion React Markup Best Practices and [Video Layout Rules](video-layout.md) for video-first layout and text sizing guidance.
 
 ## Is this a multi-scene video?
 
-If this is a video with multiple subsequence videos, follow guidance at [Multi-scene videos](../remotion-markup/multi-scene-video.md).
+If this is a video with multiple subsequence videos, follow guidance at Multi-scene videos.
 
 ## Interactivity Best Practices
 
-By structuring the React Markup following [Remotion Interactivity Best Practices](../remotion-interactivity/SKILL.md), you allow the user to make edits in the Studio which write back to code.
+By structuring the React Markup following Remotion Interactivity Best Practices, you allow the user to make edits in the Studio which write back to code.
 
 ## TailwindCSS
 
@@ -60,9 +78,9 @@ Only render if the user explicitly asks for it.
 npx remotion render
 ```
 
-For more options, see [Rendering](../remotion-render/SKILL.md).
+For more options, see Rendering.
 
 ## Follow-up
 
 The video creation process has finished.
-For follow-up prompts, use [Remotion Best Practices](../remotion-best-practices/SKILL.md)
+For follow-up prompts, use Remotion Best Practices

package/skills/remotion-create/agents/openai.yaml

@@ -1,7 +1,7 @@
 interface:
   display_name: '/remotion-create'
   short_description: 'Create a new Remotion video project'
-  icon_small: './assets/remotion-icon.png'
-  icon_large: './assets/remotion-icon.png'
+  icon_small: './assets/remotion-icon.svg'
+  icon_large: './assets/remotion-icon.svg'
   brand_color: '#0B84F3'
   default_prompt: '$remotion-create: Create a Remotion video and make a promo for my product'

package/skills/remotion-create/assets/remotion-icon.svg

@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">
+<title>Remotion</title>
+<path d="M148.332 92.9015C143.307 93.1742 139.259 93.9713 135.179 95.5236C133.144 96.2893 129.809 97.957 127.973 99.1108C120.295 103.925 114.443 111.162 111.391 119.584C110.782 121.252 109.136 126.57 108.076 130.23C101.018 154.7 97.0112 181.456 96.1511 209.776C96.0148 214.286 96.0148 225.026 96.1511 229.463C96.728 248.237 98.5216 265.187 101.773 282.472C103.095 289.468 105.213 298.866 106.44 303.135C108.947 311.809 114.065 319.193 121.344 324.605C126.221 328.234 131.759 330.668 137.895 331.863C140.853 332.44 144.755 332.702 147.629 332.514C151.604 332.251 159.491 331.192 165.9 330.049C194.786 324.899 221.469 315.679 245.666 302.485C260.99 294.125 274.09 285.074 286.729 274.092C299.326 263.163 310.066 251.405 319.516 238.21C321.708 235.158 322.81 233.375 323.911 231.131C326.743 225.341 328.075 219.583 328.064 213.143C328.064 207.143 326.932 201.815 324.488 196.361C323.313 193.728 322.191 191.84 319.674 188.253C310.402 175.048 300.112 163.542 287.568 152.361C268.122 135.034 245.026 120.822 219.235 110.302C213.644 108.026 208.138 106.022 201.509 103.851C187.475 99.2681 170.106 95.2929 155.411 93.3105C153.104 92.9959 149.968 92.8176 148.332 92.9015Z" fill="#0B84F3"/>
+</svg>

package/skills/remotion-docs/SKILL.md

@@ -1,11 +1,12 @@
----
-name: remotion-docs
-description: Search Remotion documentation
-version: 4.0.519
----
+---
+name: remotion-docs
+description: Search Remotion documentation
+version: 4.0.529
+---
+
 
 This skill teaches you how to discover and read current Remotion documentation.
-If this is not relevant, load [Remotion Best Practices](../remotion-best-practices/SKILL.md) instead.
+If this is not relevant, load Remotion Best Practices instead.
 
 ## Searching the docs
 

package/skills/remotion-docs/agents/openai.yaml

@@ -1,7 +1,7 @@
 interface:
   display_name: '/remotion-docs'
   short_description: 'Search current Remotion documentation'
-  icon_small: './assets/remotion-icon.png'
-  icon_large: './assets/remotion-icon.png'
+  icon_small: './assets/remotion-icon.svg'
+  icon_large: './assets/remotion-icon.svg'
   brand_color: '#0B84F3'
   default_prompt: '$remotion-docs: What server-side rendering options does Remotion have?'

package/skills/remotion-docs/assets/remotion-icon.svg

@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">
+<title>Remotion</title>
+<path d="M148.332 92.9015C143.307 93.1742 139.259 93.9713 135.179 95.5236C133.144 96.2893 129.809 97.957 127.973 99.1108C120.295 103.925 114.443 111.162 111.391 119.584C110.782 121.252 109.136 126.57 108.076 130.23C101.018 154.7 97.0112 181.456 96.1511 209.776C96.0148 214.286 96.0148 225.026 96.1511 229.463C96.728 248.237 98.5216 265.187 101.773 282.472C103.095 289.468 105.213 298.866 106.44 303.135C108.947 311.809 114.065 319.193 121.344 324.605C126.221 328.234 131.759 330.668 137.895 331.863C140.853 332.44 144.755 332.702 147.629 332.514C151.604 332.251 159.491 331.192 165.9 330.049C194.786 324.899 221.469 315.679 245.666 302.485C260.99 294.125 274.09 285.074 286.729 274.092C299.326 263.163 310.066 251.405 319.516 238.21C321.708 235.158 322.81 233.375 323.911 231.131C326.743 225.341 328.075 219.583 328.064 213.143C328.064 207.143 326.932 201.815 324.488 196.361C323.313 193.728 322.191 191.84 319.674 188.253C310.402 175.048 300.112 163.542 287.568 152.361C268.122 135.034 245.026 120.822 219.235 110.302C213.644 108.026 208.138 106.022 201.509 103.851C187.475 99.2681 170.106 95.2929 155.411 93.3105C153.104 92.9959 149.968 92.8176 148.332 92.9015Z" fill="#0B84F3"/>
+</svg>

package/skills/remotion-interactivity/SKILL.md

@@ -1,8 +1,9 @@
----
-name: remotion-interactivity
-description: Structure Remotion markup for interactivity
-version: 4.0.519
----
+---
+name: remotion-interactivity
+description: Structure Remotion markup for interactivity
+version: 4.0.529
+---
+
 
 By writing Remotion markup in a specific way, the Remotion Studio is able to recognize the structure of the code and makes it interactive:
 
@@ -147,6 +148,72 @@ const translateY = interpolate(frame, [0, 30], [0, 120]); // ❌ Math should be
 />
 ```
 
+## Keep SVG paths editable with `Interactive.Path`
+
+Use `<Interactive.Path>` from `remotion` instead of `<path>` inside an SVG to make the path visually editable.
+
+Install `@remotion/paths` for path interpolation and Studio path keyframes:
+
+```sh
+bunx remotion add @remotion/paths
+```
+
+If the geometry is meant to be static, put the path string directly in the `d` prop. Do not extract it into a constant.
+
+```tsx title="Editable static path"
+import {Interactive} from 'remotion';
+
+<Interactive.Svg width={300} height={300} viewBox="0 0 300 300">
+  <Interactive.Path
+    name="Triangle"
+    d="M 40 40 L 260 40 L 150 260 Z"
+    fill="#0b84f3"
+  />
+</Interactive.Svg>
+```
+
+### Morph paths using inline `interpolatePaths()`
+
+Use `interpolatePaths()` from `@remotion/paths` directly in `d`.  
+It accepts a frame, an input range, an equally sized array of path strings, and options for easing, extrapolation, and posterization.
+Keep the output paths, ranges, and options inline, following the same input-range rules as `interpolate()` above.  
+Do not use `interpolatePath()` API or extract the interpolated result into a variable when the path keyframes should remain editable in Studio.
+
+```tsx title="Editable path keyframes"
+import {interpolatePaths} from '@remotion/paths';
+import {Easing, Interactive, useCurrentFrame} from 'remotion';
+
+export const MorphingPath = () => {
+  const frame = useCurrentFrame();
+
+  return (
+    <Interactive.Svg width={300} height={300} viewBox="0 0 300 300">
+      <Interactive.Path
+        name="Morphing triangle"
+        d={interpolatePaths(
+          frame,
+          [0, 30, 60],
+          [
+            'M 40 40 L 260 40 L 150 260 Z',
+            'M 40 150 L 150 40 L 260 150 Z',
+            'M 40 260 L 150 40 L 260 260 Z',
+          ],
+          {
+            easing: Easing.bezier(0.42, 0, 0.58, 1),
+            extrapolateLeft: 'clamp',
+            extrapolateRight: 'clamp',
+          },
+        )}
+        fill="#0b84f3"
+      />
+    </Interactive.Svg>
+  );
+};
+```
+
+Studio can edit the path at the current frame, add or move keyframes, and adjust their easing.  
+Use `strokeDasharray` and `strokeDashoffset` to evolve paths.
+
 ## Use `scale`, `translate`, `rotate` CSS properties
 
 Avoid the `transform` CSS property.  
@@ -239,9 +306,11 @@ Render separate elements if one version should have effects and another should n
 
 ## Making your own component interactive
 
+When using `Interactive.withSchema()`, include `Interactive.baseSchema` in the schema so standard timeline controls such as trimming and visibility remain available.
+
 To make a custom userland component interactive, use:
 [Make a component interactive](https://www.remotion.dev/docs/studio/make-component-interactive.md)
 
 ## Video editing
 
-If a Remotion component mainly consists of video and audio clips, see [Video editing](../remotion-markup/video-editing.md) for best practices on how to structure Remotion markup so the clips are interactively editable in the timeline.
+If a Remotion component mainly consists of video and audio clips, see Video editing for best practices on how to structure Remotion markup so the clips are interactively editable in the timeline.

package/skills/remotion-interactivity/agents/openai.yaml

@@ -1,7 +1,7 @@
 interface:
   display_name: '/remotion-interactivity'
   short_description: 'Make compositions editable in Remotion Studio'
-  icon_small: './assets/remotion-icon.png'
-  icon_large: './assets/remotion-icon.png'
+  icon_small: './assets/remotion-icon.svg'
+  icon_large: './assets/remotion-icon.svg'
   brand_color: '#0B84F3'
   default_prompt: '$remotion-interactivity: Make the markup in MyComp.tsx interactive'

package/skills/remotion-interactivity/assets/remotion-icon.svg

@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">
+<title>Remotion</title>
+<path d="M148.332 92.9015C143.307 93.1742 139.259 93.9713 135.179 95.5236C133.144 96.2893 129.809 97.957 127.973 99.1108C120.295 103.925 114.443 111.162 111.391 119.584C110.782 121.252 109.136 126.57 108.076 130.23C101.018 154.7 97.0112 181.456 96.1511 209.776C96.0148 214.286 96.0148 225.026 96.1511 229.463C96.728 248.237 98.5216 265.187 101.773 282.472C103.095 289.468 105.213 298.866 106.44 303.135C108.947 311.809 114.065 319.193 121.344 324.605C126.221 328.234 131.759 330.668 137.895 331.863C140.853 332.44 144.755 332.702 147.629 332.514C151.604 332.251 159.491 331.192 165.9 330.049C194.786 324.899 221.469 315.679 245.666 302.485C260.99 294.125 274.09 285.074 286.729 274.092C299.326 263.163 310.066 251.405 319.516 238.21C321.708 235.158 322.81 233.375 323.911 231.131C326.743 225.341 328.075 219.583 328.064 213.143C328.064 207.143 326.932 201.815 324.488 196.361C323.313 193.728 322.191 191.84 319.674 188.253C310.402 175.048 300.112 163.542 287.568 152.361C268.122 135.034 245.026 120.822 219.235 110.302C213.644 108.026 208.138 106.022 201.509 103.851C187.475 99.2681 170.106 95.2929 155.411 93.3105C153.104 92.9959 149.968 92.8176 148.332 92.9015Z" fill="#0B84F3"/>
+</svg>

package/skills/remotion-maps/SKILL.md

@@ -1,8 +1,9 @@
----
-name: remotion-maps
-description: Remotion Map animation knowledge
-version: 4.0.519
----
+---
+name: remotion-maps
+description: Remotion Map animation knowledge
+version: 4.0.529
+---
+
 
 # Remotion Maps
 

package/skills/remotion-maps/agents/openai.yaml

@@ -1,7 +1,7 @@
 interface:
   display_name: '/remotion-maps'
   short_description: 'Create animated maps in Remotion videos'
-  icon_small: './assets/remotion-icon.png'
-  icon_large: './assets/remotion-icon.png'
+  icon_small: './assets/remotion-icon.svg'
+  icon_large: './assets/remotion-icon.svg'
   brand_color: '#0B84F3'
   default_prompt: '$remotion-maps: Animate a dot from Zurich to New York.'

package/skills/remotion-maps/assets/remotion-icon.svg

@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">
+<title>Remotion</title>
+<path d="M148.332 92.9015C143.307 93.1742 139.259 93.9713 135.179 95.5236C133.144 96.2893 129.809 97.957 127.973 99.1108C120.295 103.925 114.443 111.162 111.391 119.584C110.782 121.252 109.136 126.57 108.076 130.23C101.018 154.7 97.0112 181.456 96.1511 209.776C96.0148 214.286 96.0148 225.026 96.1511 229.463C96.728 248.237 98.5216 265.187 101.773 282.472C103.095 289.468 105.213 298.866 106.44 303.135C108.947 311.809 114.065 319.193 121.344 324.605C126.221 328.234 131.759 330.668 137.895 331.863C140.853 332.44 144.755 332.702 147.629 332.514C151.604 332.251 159.491 331.192 165.9 330.049C194.786 324.899 221.469 315.679 245.666 302.485C260.99 294.125 274.09 285.074 286.729 274.092C299.326 263.163 310.066 251.405 319.516 238.21C321.708 235.158 322.81 233.375 323.911 231.131C326.743 225.341 328.075 219.583 328.064 213.143C328.064 207.143 326.932 201.815 324.488 196.361C323.313 193.728 322.191 191.84 319.674 188.253C310.402 175.048 300.112 163.542 287.568 152.361C268.122 135.034 245.026 120.822 219.235 110.302C213.644 108.026 208.138 106.022 201.509 103.851C187.475 99.2681 170.106 95.2929 155.411 93.3105C153.104 92.9959 149.968 92.8176 148.332 92.9015Z" fill="#0B84F3"/>
+</svg>

package/skills/remotion-maps/techniques/maplibre/TECHNIQUE.md

@@ -63,7 +63,7 @@ import 'maplibre-gl/dist/maplibre-gl.css';
 ```tsx
 import {useEffect, useRef, useState} from 'react';
 import {AbsoluteFill, useDelayRender, useVideoConfig} from 'remotion';
-import maplibregl from 'maplibre-gl';
+import * as maplibregl from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 
 const zurich: [number, number] = [8.5417, 47.3769];
@@ -79,6 +79,15 @@ export const MyComposition = () => {
 			return;
 		}
 
+		maplibregl.setWorkerUrl(
+			URL.createObjectURL(
+				new Blob(
+					[`import "https://unpkg.com/maplibre-gl@${maplibregl.getVersion()}/dist/maplibre-gl-worker.mjs";`],
+					{type: 'text/javascript'},
+				),
+			),
+		);
+
 		const mapInstance = new maplibregl.Map({
 			container: containerRef.current,
 			style: 'https://demotiles.maplibre.org/style.json',
@@ -131,7 +140,8 @@ import {
 	useDelayRender,
 	useVideoConfig,
 } from 'remotion';
-import maplibregl, {type GeoJSONSource, type Map} from 'maplibre-gl';
+import * as maplibregl from 'maplibre-gl';
+import {type GeoJSONSource, type Map} from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 
 const zurich: [number, number] = [8.5417, 47.3769];
@@ -214,6 +224,15 @@ export const MyComposition = () => {
 			return;
 		}
 
+		maplibregl.setWorkerUrl(
+			URL.createObjectURL(
+				new Blob(
+					[`import "https://unpkg.com/maplibre-gl@${maplibregl.getVersion()}/dist/maplibre-gl-worker.mjs";`],
+					{type: 'text/javascript'},
+				),
+			),
+		);
+
 		const mapInstance = new maplibregl.Map({
 			container: containerRef.current,
 			style: 'https://demotiles.maplibre.org/style.json',

package/skills/remotion-maps/techniques/static-map/TECHNIQUE.md

@@ -34,4 +34,4 @@ export const StaticMap: React.FC = () => {
 
 ## Overlays and Interactivity
 
-Follow [Remotion Interactivity](../../../remotion-interactivity/SKILL.md) best practices and [Remotion Markup Best practices](../../../remotion-markup/SKILL.md) for elements.
+Follow Remotion Interactivity best practices and Remotion Markup Best practices for elements.