dsh-remotion 0.2.0 → 0.3.0

package/skills/remotion-best-practices/remotion-markup/text-highlights.md

@@ -0,0 +1,56 @@
+---
+name: text-highlights
+description: Animated text highlights and hand-drawn annotations using @remotion/rough-notation.
+metadata:
+  tags: text, highlights, annotations, circles, rough-notation
+---
+
+# Text highlights
+
+Use `@remotion/rough-notation` to draw animated annotations around or behind text. It supports highlights, circles, underlines, strike-throughs, crossed-off text, boxes, and brackets.
+
+Docs: https://www.remotion.dev/docs/text-highlights
+
+Install the package using the same Remotion version as the project:
+
+```bash
+bunx remotion add @remotion/rough-notation
+```
+
+Choose the component that describes the annotation: `<Highlight>`, `<Circle>`, `<Underline>`, `<StrikeThrough>`, `<CrossedOff>`, `<Box>`, or `<Bracket>`. The component determines both the annotation style and whether it renders behind or on top of the text.
+
+Drive `progress` from `useCurrentFrame()` so the annotation is deterministic and synchronized with the video:
+
+```tsx
+import {Circle, Highlight} from '@remotion/rough-notation';
+import {interpolate, useCurrentFrame} from 'remotion';
+
+export const TextAnnotations: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  return (
+    <div style={{fontSize: 80}}>
+      This is{' '}
+      <Highlight
+        color="rgba(255, 236, 79, 0.62)"
+        progress={interpolate(frame, [15, 40], [0, 1], {
+          extrapolateLeft: 'clamp',
+          extrapolateRight: 'clamp',
+        })}
+      >
+        important
+      </Highlight>
+      , and this is{' '}
+      <Circle color="#2563eb" progress={interpolate(frame, [15, 40], [0, 1], {
+        extrapolateLeft: 'clamp',
+        extrapolateRight: 'clamp',
+      })}>
+        connected
+      </Circle>
+      .
+    </div>
+  );
+};
+```
+
+Keep `progress` inline, hardcoded and use `interpolate` for maximum [Studio interactivity](../remotion-interactivity/SKILL.md).

package/skills/remotion-best-practices/remotion-markup/timing.md

@@ -0,0 +1,111 @@
+Drive motion with `interpolate()` over an explicit frame range. 
+To customize timing, use **`Easing.bezier`** or `Easing.spring`.
+
+A simple linear interpolation is done using the `interpolate` function.
+
+```ts title="Going from 0 to 1 over 0.3 seconds"
+import { interpolate } from "remotion";
+
+const opacity = interpolate(frame, [0, 0.3 * fps], [0, 1]);
+```
+
+By default, the values are not clamped, so the value can go outside the range [0, 1].  
+Here is how they can be clamped:
+
+```ts title="Going from 0 to 1 over 0.3 seconds with extrapolation"
+const opacity = interpolate(frame, [0, 0.3 * fps], [0, 1], {
+  extrapolateRight: "clamp",
+  extrapolateLeft: "clamp",
+});
+```
+
+## Studio-editable animation patterns
+
+When an animation should be editable in Remotion Studio, keep the `interpolate()` call directly in the `style` prop and prefer individual CSS transform properties:
+
+```tsx
+// 👍 Inline editable keyframes and transform shorthands
+style={{
+  scale: interpolate(frame, [0, 100], [0, 1]),
+  translate: interpolate(frame, [0, 100], ["0px 0px", "100px 100px"]),
+  rotate: interpolate(frame, [0, 100], ["20deg", "90deg"]),
+}}
+
+// 👎 Hidden values and transform strings become computed in Studio
+const translateY = interpolate(frame, [0, 100], [0, 120]);
+const rotation = interpolate(frame, [0, 100], [0, 20]);
+
+style={{
+  transform: `translateY(${translateY}px) rotate(${rotation}deg)`,
+}}
+```
+
+Use `transform` strings only when individual CSS transform properties do not cover the effect, such as `skew()`, `perspective()`, or order-sensitive multi-transform chains.
+
+## Spring easing
+
+A nice push movement with no bounce:
+
+```ts
+import { interpolate, Easing } from "remotion";
+
+const opacity = interpolate(frame, [0, 0.3 * fps], [0, 1], {
+  easing: Easing.spring({damping: 200}),
+  extrapolateLeft: "clamp",
+  extrapolateRight: "clamp",
+});
+```
+
+## Bézier easing
+
+Pass values like you would to a CSS cubic-bezier function.
+
+```ts
+import { interpolate, Easing } from "remotion";
+
+const opacity = interpolate(frame, [0, 0.3 * fps], [0, 1], {
+  easing: Easing.bezier(0.16, 1, 0.3, 1),
+  extrapolateLeft: "clamp",
+  extrapolateRight: "clamp",
+});
+```
+
+## Animating scale
+
+When animating scale, if the output is linear, the perceived scale would be smaller the larger the scale gets.  
+Use this option to compensate:
+
+```ts
+const scale = interpolate(frame, [0, 0.3 * fps], [0, 1], {
+  easing: Easing.bezier(0.16, 1, 0.3, 1),
+  extrapolateLeft: "clamp",
+  extrapolateRight: "clamp",
+  output: 'perceptual-scale' // <- Add this to scale animations
+});
+```
+
+## Multiple keyframes
+
+Add as many keyframes as you want. For multiple easings, pass an array with `n - 1` items:
+
+```ts
+const scale = interpolate(frame, [0, 1 * fps, 9 * fps, 10 * fps], [0, 1, 1, 0], {
+  easing: [Easing.bezier(0.16, 1, 0.3, 1), Easing.linear, Easing.spring({damping: 200})],
+  extrapolateLeft: "clamp",
+  extrapolateRight: "clamp",
+  output: 'perceptual-scale' // <- Add this to scale animations
+});
+```
+
+## Posterization
+
+You can intentionally reduce the frame rate for artistic reason. Use if it makes sense.
+
+```ts
+const scale = interpolate(frame, [0, 1 * fps], [0, 1], {
+  easing: Easing.bezier(0.16, 1, 0.3, 1),
+  extrapolateLeft: "clamp",
+  extrapolateRight: "clamp",
+  posterize: 3 // Only every 3rd frame is sampled
+});
+```

package/skills/{remotion/rules → remotion-best-practices/remotion-markup}/transitions.md

@@ -45,15 +45,36 @@ import { fade } from "@remotion/transitions/fade";
 Any React component can be used as an overlay. For a ready-made effect, see the **light-leaks** rule.
 
 ```tsx
-import { TransitionSeries } from "@remotion/transitions";
-import { LightLeak } from "@remotion/light-leaks";
+import {lightLeak} from '@remotion/effects/light-leak';
+import {TransitionSeries} from '@remotion/transitions';
+import {interpolate, Solid, useCurrentFrame, useVideoConfig} from 'remotion';
+
+const LightLeakOverlay: React.FC = () => {
+  const frame = useCurrentFrame();
+  const {durationInFrames, height, width} = useVideoConfig();
+
+  return (
+    <Solid
+      width={width}
+      height={height}
+      effects={[
+        lightLeak({
+          progress: interpolate(frame, [0, durationInFrames - 1], [0, 1], {
+            extrapolateLeft: 'clamp',
+            extrapolateRight: 'clamp',
+          }),
+        }),
+      ]}
+    />
+  );
+};
 
 <TransitionSeries>
   <TransitionSeries.Sequence durationInFrames={60}>
     <SceneA />
   </TransitionSeries.Sequence>
   <TransitionSeries.Overlay durationInFrames={20}>
-    <LightLeak />
+    <LightLeakOverlay />
   </TransitionSeries.Overlay>
   <TransitionSeries.Sequence durationInFrames={60}>
     <SceneB />
@@ -66,16 +87,37 @@ import { LightLeak } from "@remotion/light-leaks";
 Transitions and overlays can coexist in the same `<TransitionSeries>`, but an overlay cannot be adjacent to a transition or another overlay.
 
 ```tsx
-import { TransitionSeries, linearTiming } from "@remotion/transitions";
-import { fade } from "@remotion/transitions/fade";
-import { LightLeak } from "@remotion/light-leaks";
+import {lightLeak} from '@remotion/effects/light-leak';
+import {TransitionSeries, linearTiming} from '@remotion/transitions';
+import {fade} from '@remotion/transitions/fade';
+import {interpolate, Solid, useCurrentFrame, useVideoConfig} from 'remotion';
+
+const LightLeakOverlay: React.FC = () => {
+  const frame = useCurrentFrame();
+  const {durationInFrames, height, width} = useVideoConfig();
+
+  return (
+    <Solid
+      width={width}
+      height={height}
+      effects={[
+        lightLeak({
+          progress: interpolate(frame, [0, durationInFrames - 1], [0, 1], {
+            extrapolateLeft: 'clamp',
+            extrapolateRight: 'clamp',
+          }),
+        }),
+      ]}
+    />
+  );
+};
 
 <TransitionSeries>
   <TransitionSeries.Sequence durationInFrames={60}>
     <SceneA />
   </TransitionSeries.Sequence>
   <TransitionSeries.Overlay durationInFrames={30}>
-    <LightLeak />
+    <LightLeakOverlay />
   </TransitionSeries.Overlay>
   <TransitionSeries.Sequence durationInFrames={60}>
     <SceneB />

package/skills/remotion-best-practices/remotion-markup/video-editing.md

@@ -0,0 +1,90 @@
+Remotion can be used for bare-bones video editing in the Studio. Choose the source structure based on the editing behavior you want:
+
+- Use independently positioned clips when moving or resizing one clip should not affect any other clip.
+- Use ripple editing when changing one clip's duration should reposition every clip after it.
+
+Keep every editable clip as its own authored JSX node. Do not generate editable clips with `.map()` or another programmatic loop.
+
+## Independently positioned clips
+
+Place every `<Video>` directly in the composition and hardcode its timing props. `from={0}` may be omitted:
+
+```tsx
+<Video
+  src="https://remotion.media/video.mp4"
+  trimBefore={0}
+  durationInFrames={78}
+/>
+<Video
+  src="https://remotion.media/video.webm"
+  trimBefore={12}
+  from={78}
+  durationInFrames={66}
+/>
+<Video
+  src="https://remotion.media/video.mp4"
+  trimBefore={72}
+  from={144}
+  durationInFrames={90}
+/>
+<Video
+  src="https://remotion.media/video.webm"
+  trimBefore={58}
+  from={234}
+  durationInFrames={72}
+/>
+<Video
+  src="https://remotion.media/video.mp4"
+  trimBefore={180}
+  from={306}
+  durationInFrames={60}
+/>
+```
+
+- `from` is the clip's absolute start frame in its parent timeline.
+- `durationInFrames` is how many frames the clip remains visible.
+- `trimBefore` is how many source frames are skipped before playback begins.
+- Each `<Video>` must be a separate JSX node. Add a descriptive `name` when useful in the Studio timeline.
+- `from`, `durationInFrames`, and `trimBefore` must be hardcoded frame values. Do not compute them.
+- Import `<Video>` from `@remotion/media`.
+
+Moving or resizing one of these clips does not reposition later clips. Gaps and overlaps are therefore allowed.
+
+## Ripple editing with `TransitionSeries`
+
+“Ripple editing” is the standard video-editing term for changing one clip and automatically shifting everything after it.
+In Remotion, a `<TransitionSeries>` provides this sequential, cascading timing model while also allowing transitions between clips.
+
+Read [transitions.md](transitions.md) for transition types, timing options, installation instructions, and composition-duration calculation.
+
+Keep the markup like this:
+
+```tsx
+<TransitionSeries name="Video timeline">
+  <TransitionSeries.Sequence name="Clip 1" durationInFrames={39}>
+    <Video
+      src="https://remotion.media/video.mp4"
+      trimBefore={0}
+    />
+  </TransitionSeries.Sequence>
+  <TransitionSeries.Sequence name="Clip 2" durationInFrames={45}>
+    <Video
+      src="https://remotion.media/video.webm"
+      trimBefore={8}
+    />
+  </TransitionSeries.Sequence>
+  <TransitionSeries.Sequence name="Clip 3" durationInFrames={43}>
+    <Video
+      src="https://remotion.media/video.mp4"
+      trimBefore={60}
+    />
+  </TransitionSeries.Sequence>
+</TransitionSeries>
+```
+
+- The `<TransitionSeries.Sequence>` is the editable clip row in the Studio timeline.
+- Dragging its right edge changes `durationInFrames` and repositions every later sequence.
+- Do not set `from` on `<TransitionSeries.Sequence>`; the series calculates each start frame.
+- Hardcode all numeric values.
+- Do not programmatically create multiple `<TransitionSeries.Sequence>` (no `.map`). Each instance must be hard-coded.
+- Import `<Video>` from `@remotion/media`. Import `<TransitionSeries>` from `@remotion/transitions`. If needing to install: `npx remotion add @remotion/media @remotion/transitions`

package/skills/{remotion/rules → remotion-best-practices/remotion-markup}/voiceover.md

@@ -7,7 +7,7 @@ metadata:
 
 # Adding AI voiceover to a Remotion composition
 
-Use ElevenLabs TTS to generate speech audio per scene, then use [`calculateMetadata`](./calculate-metadata) to dynamically size the composition to match the audio.
+Use ElevenLabs TTS to generate speech audio per scene, then use [`calculateMetadata`](./calculate-metadata.md) to dynamically size the composition to match the audio.
 
 ## Prerequisites
 
@@ -55,7 +55,7 @@ writeFileSync(`public/voiceover/${compositionId}/${scene.id}.mp3`, audioBuffer);
 
 ## Dynamic composition duration with calculateMetadata
 
-Use [`calculateMetadata`](./calculate-metadata.md) to measure the [audio durations](./get-audio-duration.md) and set the composition length accordingly.
+Use [`calculateMetadata`](./calculate-metadata.md) to measure the [audio durations](../remotion-multimedia/get-audio-duration.md) and set the composition length accordingly.
 
 ```tsx
 import { CalculateMetadataFunction, staticFile } from "remotion";

package/skills/remotion-best-practices/remotion-multimedia/SKILL.md

@@ -0,0 +1,20 @@
+---
+name: remotion-multimedia
+description: Interacting with Mediabunny
+version: 4.0.519
+---
+
+Mediabunny is a multimedia library for dealing with audio and video in the browser.
+Here is a compact overview of its capabilities: https://mediabunny.dev/llms.txt
+
+## Getting audio duration
+
+See [get-audio-duration.md](get-audio-duration.md) for getting the duration of an audio file in seconds with Mediabunny.
+
+## Getting video dimensions
+
+See [get-video-dimensions.md](get-video-dimensions.md) for getting the width and height of a video file with Mediabunny.
+
+## Getting video duration
+
+See [get-video-duration.md](get-video-duration.md) for getting the duration of a video file in seconds with Mediabunny.

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

@@ -0,0 +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'
+  brand_color: '#0B84F3'
+  default_prompt: '$remotion-multimedia: Make my video the same duration as the footage'

package/skills/{remotion/rules → remotion-best-practices/remotion-multimedia}/get-audio-duration.md

@@ -17,9 +17,7 @@ import { Input, ALL_FORMATS, UrlSource } from "mediabunny";
 export const getAudioDuration = async (src: string) => {
   const input = new Input({
     formats: ALL_FORMATS,
-    source: new UrlSource(src, {
-      getRetryDelay: () => null,
-    }),
+    source: new UrlSource(src),
   });
 
   const durationInSeconds = await input.computeDuration();

package/skills/{remotion/rules → remotion-best-practices/remotion-multimedia}/get-video-dimensions.md

@@ -17,9 +17,7 @@ import { Input, ALL_FORMATS, UrlSource } from "mediabunny";
 export const getVideoDimensions = async (src: string) => {
   const input = new Input({
     formats: ALL_FORMATS,
-    source: new UrlSource(src, {
-      getRetryDelay: () => null,
-    }),
+    source: new UrlSource(src),
   });
 
   const videoTrack = await input.getPrimaryVideoTrack();

package/skills/{remotion/rules → remotion-best-practices/remotion-multimedia}/get-video-duration.md

@@ -17,9 +17,7 @@ import { Input, ALL_FORMATS, UrlSource } from "mediabunny";
 export const getVideoDuration = async (src: string) => {
   const input = new Input({
     formats: ALL_FORMATS,
-    source: new UrlSource(src, {
-      getRetryDelay: () => null,
-    }),
+    source: new UrlSource(src),
   });
 
   const durationInSeconds = await input.computeDuration();

package/skills/remotion-best-practices/remotion-render/SKILL.md

@@ -0,0 +1,27 @@
+---
+name: remotion-render
+description: Export a Remotion video
+version: 4.0.519
+---
+
+## General rendering strategy
+
+Render a video using:
+
+```
+npx remotion render
+```
+
+Full list of options: https://www.remotion.dev/docs/cli/render.md
+
+Render a still using:
+
+```
+npx remotion still
+```
+
+Full list of options: https://www.remotion.dev/docs/cli/still.md
+
+## 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

@@ -0,0 +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'
+  brand_color: '#0B84F3'
+  default_prompt: '$remotion-render: Render this as transparent ProRes'

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

@@ -0,0 +1,33 @@
+---
+name: remotion-saas
+description: Build an app with Remotion
+version: 4.0.519
+---
+
+One can build apps with Remotion.  
+It is possible to have a simple form and hook it up to a render, or have a complex video editor.
+
+## Choosing a template or a framework
+
+We have several templates for SaaS which can be cloned or used as a reference.
+See [Choosing a framework](framework.md) for help choosing a template or framework.
+
+## The `<Player>`
+
+This component allows embedding a Remotion preview in a React app. See [Player](player.md) for more information about the Player.
+
+## Rendering
+
+There are client-side and server-side rendering options available. See [Rendering](rendering.md) for advice on how to choose, and about the Lambda, Vercel, Node.js and Cloudflare options.
+
+## With Vue
+
+See https://www.remotion.dev/docs/vue.md for how to use Remotion with Vue.
+
+## Angular
+
+See https://www.remotion.dev/docs/angular.md for how to use Remotion with Angular.
+
+## Svelte
+
+See https://www.remotion.dev/docs/svelte.md for how to use Remotion with Svelte.

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

@@ -0,0 +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'
+  brand_color: '#0B84F3'
+  default_prompt: '$remotion-saas: Turn my video into an app.'

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

@@ -0,0 +1,21 @@
+---
+name: framework
+description: Choose a framework for a Remotion-based app.
+metadata:
+  tags: remotion, saas, templates, nextjs, react-router, vercel, lambda, cloudflare
+---
+
+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.
+- 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.
+
+These can be cloned directly, or used as a reference.
+
+For an existing app, see https://www.remotion.dev/docs/brownfield-installation.md.

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

@@ -0,0 +1,33 @@
+---
+name: player
+description: Embed a Remotion preview in a React app with @remotion/player.
+metadata:
+  tags: remotion, player, preview, react
+---
+
+Use `@remotion/player` when the user wants an interactive preview in React.
+
+```tsx
+import {Player} from '@remotion/player';
+import {MyVideo} from './remotion/MyVideo';
+
+export const App: React.FC = () => {
+  return (
+    <Player
+      component={MyVideo}
+      durationInFrames={120}
+      compositionWidth={1920}
+      compositionHeight={1080}
+      fps={30}
+      controls
+    />
+  );
+};
+```
+
+If metadata is dynamic, sync the Player props manually or reuse the composition's `calculateMetadata()` logic.
+Link https://www.remotion.dev/docs/dynamic-metadata.md#with-the-player.
+
+Full API for the Player: https://www.remotion.dev/docs/player/player.md.
+
+For a SaaS app that also needs output files, combine the Player preview with [framework.md](framework.md) or [rendering.md](rendering.md).

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

@@ -0,0 +1,69 @@
+---
+name: rendering
+description: Advice on programmatic rendering with Remotion.
+metadata:
+  tags: remotion, saas, ssr, renderer, node, bun, render-server
+---
+
+This is about rendering videos programmatically with Remotion.  
+For one-off renders, `npx remotion render` or the Studio is better suited.
+
+## Comparison of SSR methods
+
+See https://www.remotion.dev/docs/compare-ssr.md for the tradeoffs between server-side rendering options.
+
+## Plain Node.js APIs
+
+Can be used on traditional long-running servers that can spawn a headless browser.
+
+- SSR overview: https://www.remotion.dev/docs/ssr.md
+- Renderer package: https://www.remotion.dev/docs/renderer.md
+- Node SSR: https://www.remotion.dev/docs/ssr-node.md
+
+For a reference server with render, progress, and cancel endpoints, see https://github.com/remotion-dev/template-render-server.
+
+## Remotion Lambda
+
+Render Remotion videos on AWS Lambda. This is the fastest and most scalable way to render Remotion videos.
+
+- Overview: https://www.remotion.dev/docs/lambda.md
+- API: https://www.remotion.dev/docs/lambda/api.md
+
+### Steps to set up Lambda
+
+
+When recommending Lambda, offer the user to guide through the setup flow and keep the docs page open as the canonical checklist: https://www.remotion.dev/docs/lambda/setup.md.
+
+Cover these steps at a high level and link the exact docs page for the detailed AWS console clicks:
+
+1. Confirm the user has an AWS account, a target region, and a Remotion project or SaaS template.
+2. Install `@remotion/lambda` using `npx remotion add @remotion/lambda`.
+3. Create the Lambda role policy, Lambda role, IAM user, user access key, and user policy from the generated Remotion policy commands.
+4. Store credentials in `.env` using `REMOTION_AWS_ACCESS_KEY_ID` and `REMOTION_AWS_SECRET_ACCESS_KEY`; never ask the user to paste secrets into chat.
+5. Run the Lambda policy validator if the user wants to verify permissions before deploying; use the user's package manager or the command shown in the docs (`npx remotion lambda policies validate`).
+6. Deploy the Lambda function. Mention that functions are bound to the Remotion version and must be redeployed after Remotion upgrades.
+7. Deploy the Remotion site with a stable site name. Mention that the site must be redeployed after changing the Remotion source.
+8. Check Lambda quotas using the user's package manager or the command shown in the docs (`npx remotion lambda quotas`); new AWS accounts may need a concurrency limit increase.
+9. Trigger a first render, then wire render and progress endpoints using the chosen SaaS template or Node APIs.
+
+Before production, remind the user to handle rate limiting, authentication, cost controls, output privacy, render cleanup, and progress/error reporting.
+
+## Vercel
+
+Ideal if planning to deploy the app to Vercel.
+
+See https://www.remotion.dev/docs/vercel-sandbox.md for more info.
+
+## GitHub Actions
+
+See https://www.remotion.dev/docs/ssr.md#render-using-github-actions for how to render on GitHub Actions.
+Don't recommend unless asked for.
+
+## Azure Container Apps
+
+See https://www.remotion.dev/docs/azure-container-apps.md if rendering on Azure Container Apps is requested.
+Don't recommend unless asked for.
+
+## Cloudflare Containers
+
+See https://www.remotion.dev/docs/cloudflare-containers.md if rendering on Cloudflare Containers is requested.

package/skills/remotion-best-practices/remotion-studio/SKILL.md

@@ -0,0 +1,24 @@
+---
+name: remotion-studio
+description: Preview a Remotion video
+version: 4.0.519
+---
+
+Execute the following command:
+
+```bash
+npx remotion studio --no-open
+```
+
+If the Studio is already opened, the URL will be printed and the command will exit.
+Otherwise, a long-running process will start, and the URL will be printed.
+
+Open the URL in the browser.
+
+## Useful flags
+
+| Argument          | Purpose                                                                                       |
+| ----------------- | --------------------------------------------------------------------------------------------- |
+| `--log=<level>`   | Set `error`, `warn`, `info` (default), or `verbose` logging.                                  |
+| `--port=<number>` | Request a Studio server port; otherwise Remotion finds a free port.                           |
+| `--force-new`     | Start another Studio instance even when one is already running for the same project and port. |

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

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