何时使用
当你处理 Remotion 代码并需要领域特定知识时，请使用本技能（中文版）。
如何使用
阅读 rules 目录下的各个规则文件以查看详细说明和代码示例：
-
rules/3d.md
-
在 Remotion 中使用 Three.js 和 React Three Fiber 的 3D 内容
-
rules/animations.md
-
Remotion 的动画基础
-
rules/assets.md
-
在 Remotion 中导入图片、视频、音频和字体
-
rules/audio.md
-
音频使用与处理：导入、裁剪、音量、速度、音高
-
rules/calculate-metadata.md
-
在渲染前动态设置 composition 的时长、尺寸和 props
-
rules/can-decode.md
-
使用 Mediabunny 检查视频是否可被浏览器解码
-
rules/charts.md
-
图表与数据可视化模式
-
rules/compositions.md
-
定义 Composition、静帧、文件夹、默认 props 和动态元数据
-
rules/display-captions.md
-
在 Remotion 中显示字幕（例如 TikTok 风格）并高亮单词
-
rules/extract-frames.md
-
使用 Mediabunny 在指定时间点提取视频帧
-
rules/fonts.md
-
在 Remotion 中加载 Google 字体或本地图标
-
rules/get-audio-duration.md
-
使用 Mediabunny 获取音频时长（秒）
-
rules/get-video-dimensions.md
-
使用 Mediabunny 获取视频宽高
-
rules/get-video-duration.md
-
使用 Mediabunny 获取视频时长（秒）
-
rules/gifs.md
-
在 Remotion 中同步显示 GIF
-
rules/images.md
-
在 Remotion 中嵌入图片（使用 Img 组件）
-
rules/import-srt-captions.md
-
使用 @remotion/captions 导入 .srt 字幕
-
rules/lottie.md
-
在 Remotion 中使用 Lottie 动画
-
rules/measuring-dom-nodes.md
-
测量 DOM 元素尺寸
-
rules/measuring-text.md
-
测量文本尺寸、适配文本与检查溢出
-
rules/sequencing.md
-
时间序列（Sequencing）模式：延迟、裁剪、限制时长
-
rules/tailwind.md
-
在 Remotion 中使用 TailwindCSS
-
rules/text-animations.md
-
文本动画模式
-
rules/timing.md
-
时间插值曲线：线性、缓动、弹簧
-
rules/transcribe-captions.md
-
将音频转录为字幕
-
rules/transitions.md
-
场景过渡模式
-
rules/trimming.md
-
剪辑/裁剪模式
-
rules/videos.md
-
嵌入视频的注意事项：裁剪、音量、速度、循环、音高
-
rules/parameters.md
-
使用 Zod schema 使视频可参数化
-
rules/maps.md
-
使用 Mapbox 添加并动画化地图
（以上为中文索引，代码示例保留原文以便直接复制）
默认视频尺寸（竖屏 9:16）
本技能集合默认针对竖屏视频（纵向 9:16）。推荐的默认分辨率为 1080 x 1920（宽 x 高）。
建议做法：
-
在 src/Root.tsx 或你项目的根 Remotion 配置中，统一将 Composition 的 width 设置为 1080 ，height 设置为 1920 ，以保证所有示例与组件默认使用竖屏尺寸。
-
将本规则文件的说明也放入 rules/portrait.md （已在本包中提供），便于团队成员查阅。
示例（在 src/Root.tsx 中）:
import {Composition} from 'remotion'; import {MyComposition} from './MyComposition';
export const RemotionRoot = () => { return ( <Composition id="MyComposition" component={MyComposition} durationInFrames={300} fps={30} width={1080} height={1920} /> ); };