[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6JZ81V8SPYZ1AT6S2PVM7A6":3,"skill-same:01M6JZ81V8SPYZ1AT6S2PVM7A6":222},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":26,"publishedAt":37,"linkOnly":38,"markdownContent":39,"markdownBody":40,"frontMatter":41,"refName":43,"commitSha":44,"skillDirectory":45,"forksCount":46,"repositoryHtmlUrl":47,"repositoryHomepageUrl":48,"ownerHtmlUrl":49,"ownerBlogUrl":50,"ownerDescription":6,"updatedAt":51,"install":52,"resources":65},"01M6JZ81V8SPYZ1AT6S2PVM7A6","remotion-best-practices",null,"Best practices for Remotion - Video creation in React","gkurt\u002Ftegaki","gkurt","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F6034931?v=4","01M6JZ7NR9ZCJWYM8X2K7VNK67","Gokhan Kurt","01M6JZ7NW21R5SDXVENXP2WTQ2",3305,"MIT","https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",[27,28,29,30,31,32,33,34,35,36],"best practices","remotion best practices","Remotion","react","Video","Animation","Composition","remotion, video, react, animation, composition","creation","for","2026-11-10 10:12:30",false,"---\nname: remotion-best-practices\ndescription: Best practices for Remotion - Video creation in React\nmetadata:\n  tags: remotion, video, react, animation, composition\n---\n\n## When to use\n\nUse this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge.\n\n## New project setup\n\nWhen in an empty folder or workspace with no existing Remotion project, scaffold one using:\n\n```bash\nnpx create-video@latest --yes --blank --no-tailwind my-video\n```\n\nReplace `my-video` with a suitable project name.\n\n## Designing a video\n\nAnimate properties using `useCurrentFrame()` and `interpolate()`. Use Easing to customize the timing of the animation.\n\n```tsx\nimport { useCurrentFrame, Easing } from \"remotion\";\n\nexport const FadeIn = () => {\n  const frame = useCurrentFrame();\n  const { fps } = useVideoConfig();\n\n  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {\n    extrapolateRight: \"clamp\",\n    extrapolateLeft: \"clamp\",\n    easing: Easing.bezier(0.16, 1, 0.3, 1),\n  });\n\n  return \u003Cdiv style={{ opacity }}>Hello World!\u003C\u002Fdiv>;\n};\n```\n\nCSS transitions or animations are FORBIDDEN - they will not render correctly.  \nTailwind animation class names are FORBIDDEN - they will not render correctly.\n\nPlace assets in the `public\u002F` folder at your project root.\n\nUse `staticFile()` to reference files from the `public\u002F` folder.\n\nAdd images using the `\u003CImg>` component:\n\n```tsx\nimport { Img, staticFile } from \"remotion\";\n\nexport const MyComposition = () => {\n  return \u003CImg src={staticFile(\"logo.png\")} style={{ width: 100, height: 100 }} \u002F>;\n};\n```\n\nAdd videos using the `\u003CVideo>` component from `@remotion\u002Fmedia`:\n\n```tsx\nimport { Video } from \"@remotion\u002Fmedia\";\nimport { staticFile } from \"remotion\";\n\nexport const MyComposition = () => {\n  return \u003CVideo src={staticFile(\"video.mp4\")} style={{ opacity: 0.5 }} \u002F>;\n};\n```\n\nAdd audio using the `\u003CAudio>` component from `@remotion\u002Fmedia`:\n\n```tsx\nimport { Audio } from \"@remotion\u002Fmedia\";\nimport { staticFile } from \"remotion\";\n\nexport const MyComposition = () => {\n  return \u003CAudio src={staticFile(\"audio.mp3\")} \u002F>;\n};\n```\n\nAssets can be also referenced as remote URLs:\n\n```tsx\nimport { Video } from \"@remotion\u002Fmedia\";\n\nexport const MyComposition = () => {\n  return \u003CVideo src=\"https:\u002F\u002Fremotion.media\u002Fvideo.mp4\" \u002F>\n};\n```\n\nTo delay content wrap it in `\u003CSequence>` and use `from`.\nTo limit the duration of an element, use `durationInFrames` of `\u003CSequence>`.\n`\u003CSequence>` by default is an absolute fill. For inline content, use `layout=\"none\"`.\n\n```tsx\nimport { Sequence } from \"remotion\";\n\nexport const Title = () => {\n  const frame = useCurrentFrame();\n  const { fps } = useVideoConfig();\n\n  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {\n    extrapolateRight: \"clamp\",\n    extrapolateLeft: \"clamp\",\n    easing: Easing.bezier(0.16, 1, 0.3, 1),\n  });\n\n  return \u003Cdiv style={{ opacity }}>Title\u003C\u002Fdiv>;\n};\n\nexport const Subtitle = () => {\n  return \u003Cdiv>Subtitle\u003C\u002Fdiv>;\n};\n\nconst Main = () => {\n  const {fps} = useVideoConfig();\n\n  return (\n    \u003CAbsoluteFill>\n      \u003CSequence>\n        \u003CBackground \u002F>\n      \u003C\u002FSequence>\n      \u003CSequence from={1 * fps} durationInFrames={2 * fps} layout=\"none\">\n        \u003CTitle \u002F>\n      \u003C\u002FSequence>\n      \u003CSequence from={2 * fps} durationInFrames={2 * fps} layout=\"none\">\n        \u003CSubtitle \u002F>\n      \u003C\u002FSequence>\n    \u003C\u002FAbsoluteFill>\n  );\n}\n```\n\nThe width, height, fps, and duration of a video is defined in `src\u002FRoot.tsx`:\n\n```tsx\nimport { Composition } from \"remotion\";\nimport { MyComposition } from \".\u002FMyComposition\";\n\nexport const RemotionRoot = () => {\n  return (\n    \u003CComposition\n      id=\"MyComposition\"\n      component={MyComposition}\n      durationInFrames={100}\n      fps={30}\n      width={1080}\n      height={1080}\n    \u002F>\n  );\n};\n```\n\nMetadata can also be calculated dynamically:\n\n```tsx\nimport { Composition, CalculateMetadataFunction } from \"remotion\";\nimport { MyComposition, MyCompositionProps } from \".\u002FMyComposition\";\n\nconst calculateMetadata: CalculateMetadataFunction\u003C\n  MyCompositionProps\n> = async ({ props, abortSignal }) => {\n  const data = await fetch(`https:\u002F\u002Fapi.example.com\u002Fvideo\u002F${props.videoId}`, {\n    signal: abortSignal,\n  }).then((res) => res.json());\n\n  return {\n    durationInFrames: Math.ceil(data.duration * 30),\n    props: {\n      ...props,\n      videoUrl: data.url,\n    },\n    width: 1080,\n    height: 1080,\n  };\n};\n\nexport const RemotionRoot = () => {\n  return (\n    \u003CComposition\n      id=\"MyComposition\"\n      component={MyComposition}\n      fps={30}\n      width={1080}\n      height={1080}\n      defaultProps={{ videoId: \"abc123\" }}\n      calculateMetadata={calculateMetadata}\n    \u002F>\n  );\n};\n```\n\n## Starting preview\n\nStart the Remotion Studio to preview a video:\n\n```bash\nnpx remotion studio\n```\n\n## Optional: one-frame render check\n\nYou can render a single frame with the CLI to sanity-check layout, colors, or timing.  \nSkip it for trivial edits, pure refactors, or when you already have enough confidence from Studio or prior renders.\n\n```bash\nnpx remotion still [composition-id] --scale=0.25 --frame=30\n```\n\nAt 30 fps, `--frame=30` is the one-second mark (`--frame` is zero-based).\n\n## Captions\n\nWhen dealing with captions or subtitles, load the [.\u002Frules\u002Fsubtitles.md](.\u002Frules\u002Fsubtitles.md) file for more information.\n\n## Using FFmpeg\n\nFor some video operations, such as trimming videos or detecting silence, FFmpeg should be used. Load the [.\u002Frules\u002Fffmpeg.md](.\u002Frules\u002Fffmpeg.md) file for more information.\n\n## Silence detection\n\nWhen needing to detect and trim silent segments from video or audio files, load the [.\u002Frules\u002Fsilence-detection.md](.\u002Frules\u002Fsilence-detection.md) file.\n\n## Audio visualization\n\nWhen needing to visualize audio (spectrum bars, waveforms, bass-reactive effects), load the [.\u002Frules\u002Faudio-visualization.md](.\u002Frules\u002Faudio-visualization.md) file for more information.\n\n## Sound effects\n\nWhen needing to use sound effects, load the [.\u002Frules\u002Fsfx.md](.\u002Frules\u002Fsfx.md) file for more information.\n\n## 3D content\n\nSee [rules\u002F3d.md](rules\u002F3d.md) for 3D content in Remotion using Three.js and React Three Fiber.\n\n## Advanced audio\n\nSee [rules\u002Faudio.md](rules\u002Faudio.md) for advanced audio features like trimming, volume, speed, pitch.\n\n## Dynamic duration, dimensions and data\n\nSee [rules\u002Fcalculate-metadata.md](rules\u002Fcalculate-metadata.md) for dynamically set composition duration, dimensions, and props.\n\n## Advanced compositions\n\nSee [rules\u002Fcompositions.md](rules\u002Fcompositions.md) for how to define stills, folders, default props and for how to nest compositions.\n\n## Google Fonts\n\nIs the recommended way to load fonts in Remotion. See [rules\u002Fgoogle-fonts.md](rules\u002Fgoogle-fonts.md) for how to load Google Fonts.\n\n## Local fonts\n\nSee [rules\u002Flocal-fonts.md](rules\u002Flocal-fonts.md) for how to load local fonts.\n\n## Getting audio duration\n\nSee [rules\u002Fget-audio-duration.md](rules\u002Fget-audio-duration.md) for getting the duration of an audio file in seconds with Mediabunny.\n\n## Getting video dimensions\n\nSee [rules\u002Fget-video-dimensions.md](rules\u002Fget-video-dimensions.md) for getting the width and height of a video file with Mediabunny.\n\n## Getting video duration\n\nSee [rules\u002Fget-video-duration.md](rules\u002Fget-video-duration.md) for getting the duration of a video file in seconds with Mediabunny.\n\n## GIFs\n\nSee [rules\u002Fgifs.md](rules\u002Fgifs.md) for how to display GIFs synchronized with Remotion's timeline.\n\n## Advanced Images\n\nSee [rules\u002Fimages.md](rules\u002Fimages.md) for sizing and positioning images, dynamic image paths, and getting image dimensions.\n\n## Light leaks\n\nSee [rules\u002Flight-leaks.md](rules\u002Flight-leaks.md) for light leak overlay effects using `@remotion\u002Flight-leaks`.\n\n## Lottie animations\n\nSee [rules\u002Flottie.md](rules\u002Flottie.md) for embedding Lottie animations in Remotion.\n\n## HTML in canvas\n\nSee [rules\u002Fhtml-in-canvas.md](rules\u002Fhtml-in-canvas.md) if you need to render HTML into a `\u003Ccanvas>` to apply 2D or WebGL effects via `\u003CHtmlInCanvas>`.\n\n## Measuring DOM nodes\n\nSee [rules\u002Fmeasuring-dom-nodes.md](rules\u002Fmeasuring-dom-nodes.md) for measuring DOM element dimensions in Remotion.\n\n## Measuring text\n\nSee [rules\u002Fmeasuring-text.md](rules\u002Fmeasuring-text.md) for measuring text dimensions, fitting text to containers, and checking overflow.\n\n## Advanced sequencing\n\nSee [rules\u002Fsequencing.md](rules\u002Fsequencing.md) for more sequencing patterns - delay, trim, limit duration of items.\n\n## TailwindCSS\n\nSee [rules\u002Ftailwind.md](rules\u002Ftailwind.md) for using TailwindCSS in Remotion.\n\n## Text animations\n\nSee [rules\u002Ftext-animations.md](rules\u002Ftext-animations.md) for typography and text animation patterns.\n\n## Advanced timing\n\nSee [rules\u002Ftiming.md](rules\u002Ftiming.md) for advanced timing with `interpolate` and Bézier easing, and springs.\n\n## Transitions\n\nSee [rules\u002Ftransitions.md](rules\u002Ftransitions.md) for scene transition patterns.\n\n## Transparent videos\n\nSee [rules\u002Ftransparent-videos.md](rules\u002Ftransparent-videos.md) for rendering out a video with transparency.\n\n## Trimming\n\nSee [rules\u002Ftrimming.md](rules\u002Ftrimming.md) for trimming patterns - cutting the beginning or end of animations.\n\n## Advanced Videos\n\nSee [rules\u002Fvideos.md](rules\u002Fvideos.md) for advanced knowledge about embedding videos - trimming, volume, speed, looping, pitch.\n\n## Parameterized videos\n\nSee [rules\u002Fparameters.md](rules\u002Fparameters.md) for making a composition parametrizable by adding a Zod schema.\n\n## Maps\n\nFor simple maps with little flyovers, consider using static map images.\nFor complex maps with animated routes or flyovers, load the maps rule: [rules\u002Fmaplibre.md](rules\u002Fmaplibre.md)\n\n## Voiceover\n\nSee [rules\u002Fvoiceover.md](rules\u002Fvoiceover.md) for adding AI-generated voiceover to Remotion compositions using ElevenLabs TTS.\n","## When to use\n\nUse this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge.\n\n## New project setup\n\nWhen in an empty folder or workspace with no existing Remotion project, scaffold one using:\n\n```bash\nnpx create-video@latest --yes --blank --no-tailwind my-video\n```\n\nReplace `my-video` with a suitable project name.\n\n## Designing a video\n\nAnimate properties using `useCurrentFrame()` and `interpolate()`. Use Easing to customize the timing of the animation.\n\n```tsx\nimport { useCurrentFrame, Easing } from \"remotion\";\n\nexport const FadeIn = () => {\n  const frame = useCurrentFrame();\n  const { fps } = useVideoConfig();\n\n  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {\n    extrapolateRight: \"clamp\",\n    extrapolateLeft: \"clamp\",\n    easing: Easing.bezier(0.16, 1, 0.3, 1),\n  });\n\n  return \u003Cdiv style={{ opacity }}>Hello World!\u003C\u002Fdiv>;\n};\n```\n\nCSS transitions or animations are FORBIDDEN - they will not render correctly.  \nTailwind animation class names are FORBIDDEN - they will not render correctly.\n\nPlace assets in the `public\u002F` folder at your project root.\n\nUse `staticFile()` to reference files from the `public\u002F` folder.\n\nAdd images using the `\u003CImg>` component:\n\n```tsx\nimport { Img, staticFile } from \"remotion\";\n\nexport const MyComposition = () => {\n  return \u003CImg src={staticFile(\"logo.png\")} style={{ width: 100, height: 100 }} \u002F>;\n};\n```\n\nAdd videos using the `\u003CVideo>` component from `@remotion\u002Fmedia`:\n\n```tsx\nimport { Video } from \"@remotion\u002Fmedia\";\nimport { staticFile } from \"remotion\";\n\nexport const MyComposition = () => {\n  return \u003CVideo src={staticFile(\"video.mp4\")} style={{ opacity: 0.5 }} \u002F>;\n};\n```\n\nAdd audio using the `\u003CAudio>` component from `@remotion\u002Fmedia`:\n\n```tsx\nimport { Audio } from \"@remotion\u002Fmedia\";\nimport { staticFile } from \"remotion\";\n\nexport const MyComposition = () => {\n  return \u003CAudio src={staticFile(\"audio.mp3\")} \u002F>;\n};\n```\n\nAssets can be also referenced as remote URLs:\n\n```tsx\nimport { Video } from \"@remotion\u002Fmedia\";\n\nexport const MyComposition = () => {\n  return \u003CVideo src=\"https:\u002F\u002Fremotion.media\u002Fvideo.mp4\" \u002F>\n};\n```\n\nTo delay content wrap it in `\u003CSequence>` and use `from`.\nTo limit the duration of an element, use `durationInFrames` of `\u003CSequence>`.\n`\u003CSequence>` by default is an absolute fill. For inline content, use `layout=\"none\"`.\n\n```tsx\nimport { Sequence } from \"remotion\";\n\nexport const Title = () => {\n  const frame = useCurrentFrame();\n  const { fps } = useVideoConfig();\n\n  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {\n    extrapolateRight: \"clamp\",\n    extrapolateLeft: \"clamp\",\n    easing: Easing.bezier(0.16, 1, 0.3, 1),\n  });\n\n  return \u003Cdiv style={{ opacity }}>Title\u003C\u002Fdiv>;\n};\n\nexport const Subtitle = () => {\n  return \u003Cdiv>Subtitle\u003C\u002Fdiv>;\n};\n\nconst Main = () => {\n  const {fps} = useVideoConfig();\n\n  return (\n    \u003CAbsoluteFill>\n      \u003CSequence>\n        \u003CBackground \u002F>\n      \u003C\u002FSequence>\n      \u003CSequence from={1 * fps} durationInFrames={2 * fps} layout=\"none\">\n        \u003CTitle \u002F>\n      \u003C\u002FSequence>\n      \u003CSequence from={2 * fps} durationInFrames={2 * fps} layout=\"none\">\n        \u003CSubtitle \u002F>\n      \u003C\u002FSequence>\n    \u003C\u002FAbsoluteFill>\n  );\n}\n```\n\nThe width, height, fps, and duration of a video is defined in `src\u002FRoot.tsx`:\n\n```tsx\nimport { Composition } from \"remotion\";\nimport { MyComposition } from \".\u002FMyComposition\";\n\nexport const RemotionRoot = () => {\n  return (\n    \u003CComposition\n      id=\"MyComposition\"\n      component={MyComposition}\n      durationInFrames={100}\n      fps={30}\n      width={1080}\n      height={1080}\n    \u002F>\n  );\n};\n```\n\nMetadata can also be calculated dynamically:\n\n```tsx\nimport { Composition, CalculateMetadataFunction } from \"remotion\";\nimport { MyComposition, MyCompositionProps } from \".\u002FMyComposition\";\n\nconst calculateMetadata: CalculateMetadataFunction\u003C\n  MyCompositionProps\n> = async ({ props, abortSignal }) => {\n  const data = await fetch(`https:\u002F\u002Fapi.example.com\u002Fvideo\u002F${props.videoId}`, {\n    signal: abortSignal,\n  }).then((res) => res.json());\n\n  return {\n    durationInFrames: Math.ceil(data.duration * 30),\n    props: {\n      ...props,\n      videoUrl: data.url,\n    },\n    width: 1080,\n    height: 1080,\n  };\n};\n\nexport const RemotionRoot = () => {\n  return (\n    \u003CComposition\n      id=\"MyComposition\"\n      component={MyComposition}\n      fps={30}\n      width={1080}\n      height={1080}\n      defaultProps={{ videoId: \"abc123\" }}\n      calculateMetadata={calculateMetadata}\n    \u002F>\n  );\n};\n```\n\n## Starting preview\n\nStart the Remotion Studio to preview a video:\n\n```bash\nnpx remotion studio\n```\n\n## Optional: one-frame render check\n\nYou can render a single frame with the CLI to sanity-check layout, colors, or timing.  \nSkip it for trivial edits, pure refactors, or when you already have enough confidence from Studio or prior renders.\n\n```bash\nnpx remotion still [composition-id] --scale=0.25 --frame=30\n```\n\nAt 30 fps, `--frame=30` is the one-second mark (`--frame` is zero-based).\n\n## Captions\n\nWhen dealing with captions or subtitles, load the [.\u002Frules\u002Fsubtitles.md](.\u002Frules\u002Fsubtitles.md) file for more information.\n\n## Using FFmpeg\n\nFor some video operations, such as trimming videos or detecting silence, FFmpeg should be used. Load the [.\u002Frules\u002Fffmpeg.md](.\u002Frules\u002Fffmpeg.md) file for more information.\n\n## Silence detection\n\nWhen needing to detect and trim silent segments from video or audio files, load the [.\u002Frules\u002Fsilence-detection.md](.\u002Frules\u002Fsilence-detection.md) file.\n\n## Audio visualization\n\nWhen needing to visualize audio (spectrum bars, waveforms, bass-reactive effects), load the [.\u002Frules\u002Faudio-visualization.md](.\u002Frules\u002Faudio-visualization.md) file for more information.\n\n## Sound effects\n\nWhen needing to use sound effects, load the [.\u002Frules\u002Fsfx.md](.\u002Frules\u002Fsfx.md) file for more information.\n\n## 3D content\n\nSee [rules\u002F3d.md](rules\u002F3d.md) for 3D content in Remotion using Three.js and React Three Fiber.\n\n## Advanced audio\n\nSee [rules\u002Faudio.md](rules\u002Faudio.md) for advanced audio features like trimming, volume, speed, pitch.\n\n## Dynamic duration, dimensions and data\n\nSee [rules\u002Fcalculate-metadata.md](rules\u002Fcalculate-metadata.md) for dynamically set composition duration, dimensions, and props.\n\n## Advanced compositions\n\nSee [rules\u002Fcompositions.md](rules\u002Fcompositions.md) for how to define stills, folders, default props and for how to nest compositions.\n\n## Google Fonts\n\nIs the recommended way to load fonts in Remotion. See [rules\u002Fgoogle-fonts.md](rules\u002Fgoogle-fonts.md) for how to load Google Fonts.\n\n## Local fonts\n\nSee [rules\u002Flocal-fonts.md](rules\u002Flocal-fonts.md) for how to load local fonts.\n\n## Getting audio duration\n\nSee [rules\u002Fget-audio-duration.md](rules\u002Fget-audio-duration.md) for getting the duration of an audio file in seconds with Mediabunny.\n\n## Getting video dimensions\n\nSee [rules\u002Fget-video-dimensions.md](rules\u002Fget-video-dimensions.md) for getting the width and height of a video file with Mediabunny.\n\n## Getting video duration\n\nSee [rules\u002Fget-video-duration.md](rules\u002Fget-video-duration.md) for getting the duration of a video file in seconds with Mediabunny.\n\n## GIFs\n\nSee [rules\u002Fgifs.md](rules\u002Fgifs.md) for how to display GIFs synchronized with Remotion's timeline.\n\n## Advanced Images\n\nSee [rules\u002Fimages.md](rules\u002Fimages.md) for sizing and positioning images, dynamic image paths, and getting image dimensions.\n\n## Light leaks\n\nSee [rules\u002Flight-leaks.md](rules\u002Flight-leaks.md) for light leak overlay effects using `@remotion\u002Flight-leaks`.\n\n## Lottie animations\n\nSee [rules\u002Flottie.md](rules\u002Flottie.md) for embedding Lottie animations in Remotion.\n\n## HTML in canvas\n\nSee [rules\u002Fhtml-in-canvas.md](rules\u002Fhtml-in-canvas.md) if you need to render HTML into a `\u003Ccanvas>` to apply 2D or WebGL effects via `\u003CHtmlInCanvas>`.\n\n## Measuring DOM nodes\n\nSee [rules\u002Fmeasuring-dom-nodes.md](rules\u002Fmeasuring-dom-nodes.md) for measuring DOM element dimensions in Remotion.\n\n## Measuring text\n\nSee [rules\u002Fmeasuring-text.md](rules\u002Fmeasuring-text.md) for measuring text dimensions, fitting text to containers, and checking overflow.\n\n## Advanced sequencing\n\nSee [rules\u002Fsequencing.md](rules\u002Fsequencing.md) for more sequencing patterns - delay, trim, limit duration of items.\n\n## TailwindCSS\n\nSee [rules\u002Ftailwind.md](rules\u002Ftailwind.md) for using TailwindCSS in Remotion.\n\n## Text animations\n\nSee [rules\u002Ftext-animations.md](rules\u002Ftext-animations.md) for typography and text animation patterns.\n\n## Advanced timing\n\nSee [rules\u002Ftiming.md](rules\u002Ftiming.md) for advanced timing with `interpolate` and Bézier easing, and springs.\n\n## Transitions\n\nSee [rules\u002Ftransitions.md](rules\u002Ftransitions.md) for scene transition patterns.\n\n## Transparent videos\n\nSee [rules\u002Ftransparent-videos.md](rules\u002Ftransparent-videos.md) for rendering out a video with transparency.\n\n## Trimming\n\nSee [rules\u002Ftrimming.md](rules\u002Ftrimming.md) for trimming patterns - cutting the beginning or end of animations.\n\n## Advanced Videos\n\nSee [rules\u002Fvideos.md](rules\u002Fvideos.md) for advanced knowledge about embedding videos - trimming, volume, speed, looping, pitch.\n\n## Parameterized videos\n\nSee [rules\u002Fparameters.md](rules\u002Fparameters.md) for making a composition parametrizable by adding a Zod schema.\n\n## Maps\n\nFor simple maps with little flyovers, consider using static map images.\nFor complex maps with animated routes or flyovers, load the maps rule: [rules\u002Fmaplibre.md](rules\u002Fmaplibre.md)\n\n## Voiceover\n\nSee [rules\u002Fvoiceover.md](rules\u002Fvoiceover.md) for adding AI-generated voiceover to Remotion compositions using ElevenLabs TTS.\n",{"name":5,"metadata":42,"description":7},{"tags":34},"main","32654a4cfb0fa6a2873264cf693316acd59d1627",".agents\u002Fskills\u002Fremotion-best-practices",127,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki","https:\u002F\u002Ftegaki.ink","https:\u002F\u002Fgithub.com\u002Fgkurt","https:\u002F\u002Fgkurt.com","2026-11-05 19:54:53",{"source":8,"skillName":5,"commands":53,"prompt":63,"zipAvailable":64},[54,57,60],{"tool":55,"command":56},"npx","npx skills add gkurt\u002Ftegaki --skill remotion-best-practices",{"tool":58,"command":59},"bunx","bunx skills add gkurt\u002Ftegaki --skill remotion-best-practices",{"tool":61,"command":62},"pnpm","pnpm dlx skills add gkurt\u002Ftegaki --skill remotion-best-practices","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002FSKILL.md",true,[66,72,78,82,86,90,94,98,102,106,110,114,118,122,126,130,134,138,142,146,150,154,158,162,166,170,174,178,182,186,190,194,198,202,206,210,214,218],{"path":67,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":70,"sourceHtmlUrl":71},"rules\u002F3d.md","REFERENCE","参考文档",2292,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002F3d.md",{"path":73,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":76,"sourceHtmlUrl":77},"rules\u002Fassets\u002Fcharts-bar-chart.tsx","OTHER","其他",3845,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Fassets\u002Fcharts-bar-chart.tsx",{"path":79,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":80,"sourceHtmlUrl":81},"rules\u002Fassets\u002Ftext-animations-typewriter.tsx",2281,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Fassets\u002Ftext-animations-typewriter.tsx",{"path":83,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":84,"sourceHtmlUrl":85},"rules\u002Fassets\u002Ftext-animations-word-highlight.tsx",2634,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Fassets\u002Ftext-animations-word-highlight.tsx",{"path":87,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":88,"sourceHtmlUrl":89},"rules\u002Faudio-visualization.md",4892,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Faudio-visualization.md",{"path":91,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":92,"sourceHtmlUrl":93},"rules\u002Faudio.md",3625,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Faudio.md",{"path":95,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":96,"sourceHtmlUrl":97},"rules\u002Fcalculate-metadata.md",3254,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Fcalculate-metadata.md",{"path":99,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":100,"sourceHtmlUrl":101},"rules\u002Fcompositions.md",3358,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Fcompositions.md",{"path":103,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":104,"sourceHtmlUrl":105},"rules\u002Fdisplay-captions.md",5471,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Fdisplay-captions.md",{"path":107,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":108,"sourceHtmlUrl":109},"rules\u002Fffmpeg.md",1093,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Fffmpeg.md",{"path":111,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":112,"sourceHtmlUrl":113},"rules\u002Fget-audio-duration.md",1357,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Fget-audio-duration.md",{"path":115,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":116,"sourceHtmlUrl":117},"rules\u002Fget-video-dimensions.md",1626,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Fget-video-dimensions.md",{"path":119,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":120,"sourceHtmlUrl":121},"rules\u002Fget-video-duration.md",1377,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Fget-video-duration.md",{"path":123,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":124,"sourceHtmlUrl":125},"rules\u002Fgifs.md",3707,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Fgifs.md",{"path":127,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":128,"sourceHtmlUrl":129},"rules\u002Fgoogle-fonts.md",1692,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Fgoogle-fonts.md",{"path":131,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":132,"sourceHtmlUrl":133},"rules\u002Fhtml-in-canvas.md",3629,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Fhtml-in-canvas.md",{"path":135,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":136,"sourceHtmlUrl":137},"rules\u002Fimages.md",1464,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Fimages.md",{"path":139,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":140,"sourceHtmlUrl":141},"rules\u002Fimport-srt-captions.md",2247,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Fimport-srt-captions.md",{"path":143,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":144,"sourceHtmlUrl":145},"rules\u002Flight-leaks.md",2305,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Flight-leaks.md",{"path":147,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":148,"sourceHtmlUrl":149},"rules\u002Flocal-fonts.md",1511,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Flocal-fonts.md",{"path":151,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":152,"sourceHtmlUrl":153},"rules\u002Flottie.md",1796,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Flottie.md",{"path":155,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":156,"sourceHtmlUrl":157},"rules\u002Fmaplibre.md",12468,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Fmaplibre.md",{"path":159,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":160,"sourceHtmlUrl":161},"rules\u002Fmeasuring-dom-nodes.md",973,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Fmeasuring-dom-nodes.md",{"path":163,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":164,"sourceHtmlUrl":165},"rules\u002Fmeasuring-text.md",2783,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Fmeasuring-text.md",{"path":167,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":168,"sourceHtmlUrl":169},"rules\u002Fparameters.md",2387,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Fparameters.md",{"path":171,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":172,"sourceHtmlUrl":173},"rules\u002Fsequencing.md",3295,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Fsequencing.md",{"path":175,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":176,"sourceHtmlUrl":177},"rules\u002Fsfx.md",867,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Fsfx.md",{"path":179,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":180,"sourceHtmlUrl":181},"rules\u002Fsilence-detection.md",2548,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Fsilence-detection.md",{"path":183,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":184,"sourceHtmlUrl":185},"rules\u002Fsubtitles.md",922,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Fsubtitles.md",{"path":187,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":188,"sourceHtmlUrl":189},"rules\u002Ftailwind.md",420,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Ftailwind.md",{"path":191,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":192,"sourceHtmlUrl":193},"rules\u002Ftext-animations.md",700,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Ftext-animations.md",{"path":195,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":196,"sourceHtmlUrl":197},"rules\u002Ftiming.md",4470,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Ftiming.md",{"path":199,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":200,"sourceHtmlUrl":201},"rules\u002Ftranscribe-captions.md",1897,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Ftranscribe-captions.md",{"path":203,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":204,"sourceHtmlUrl":205},"rules\u002Ftransitions.md",5816,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Ftransitions.md",{"path":207,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":208,"sourceHtmlUrl":209},"rules\u002Ftransparent-videos.md",2267,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Ftransparent-videos.md",{"path":211,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":212,"sourceHtmlUrl":213},"rules\u002Ftrimming.md",1209,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Ftrimming.md",{"path":215,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":216,"sourceHtmlUrl":217},"rules\u002Fvideos.md",3509,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Fvideos.md",{"path":219,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":220,"sourceHtmlUrl":221},"rules\u002Fvoiceover.md",3318,"https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fremotion-best-practices\u002Frules\u002Fvoiceover.md",[223],{"skillNo":224,"name":225,"nameZh":6,"description":226,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":227,"categories":228,"keywords":240,"publishedAt":37},"01M6JZ7SEN2RR706KG359QNHBZ","padrone","Build CLI applications with the Padrone framework. Use when writing code that imports from 'padrone', creating CLI tools, defining commands with Zod schemas, or working with Padrone's builder API, interceptors, extensions, testing, REPL, or AI tool integration.","https:\u002F\u002Fgithub.com\u002Fgkurt\u002Ftegaki\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fpadrone\u002FSKILL.md",[229,232,235],{"categoryNo":230,"categoryName":231,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":233,"categoryName":234,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":236,"categoryName":237,"taxonomyType":238,"taxonomyTypeDesc":239},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[225,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259],"zod","imports","interceptors","extensions","true","commands","builder","use","build cli","testing","tool","api","applications","Tools","package","framework","code","cli","writing"]