关于 remotion-best-practices
remotion-best-practices 是为 Remotion 开发提供领域知识的技能,适用于编写和处理 Remotion 代码的开发者。它按主题组织规则与示例,覆盖视频、动画、音频、字幕及数据可视化。
主要功能
- 01按主题提供规则与代码示例
- 02涵盖动画、转场与时间控制
- 03指导音频、字幕和视频处理
- 04支持图表与数据可视化
- 05涉及 3D、地图及语音旁白
适用场景
- 01实现 Remotion 场景动画与转场
- 02在视频中添加字幕或音频可视化
- 03制作图表、地图或语音旁白内容
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ yangagent/ remotion-video-papercraft-skill --skill remotion-best-practices安装后在 Claude Code 中输入/remotion-best-practices确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
rules/3d.mdanimations.mdassets.mdaudio-visualization.mdaudio.mdcalculate-metadata.mdcan-decode.mdcharts.mdcompositions.mddisplay-captions.mdextract-frames.mdffmpeg.mdfonts.mdget-audio-duration.mdget-video-dimensions.mdget-video-duration.mdgifs.mdimages.mdimport-srt-captions.mdlight-leaks.mdlottie.mdmaps.mdmeasuring-dom-nodes.mdmeasuring-text.mdparameters.mdsequencing.mdsfx.mdrules/assets/charts-bar-chart.tsxtext-animations-typewriter.tsxtext-animations-word-highlight.tsx详细介绍
适用场景
处理 Remotion 代码时,请使用此技能来获取相关领域知识。
字幕
处理字幕时,请加载 ./rules/subtitles.md 文件以了解更多信息。
使用 FFmpeg
对于某些视频操作,例如剪辑视频或检测静音,应使用 FFmpeg。请加载 ./rules/ffmpeg.md 文件以了解更多信息。
音频可视化
需要将音频可视化(频谱条、波形、低音响应效果)时,请加载 ./rules/audio-visualization.md 文件以了解更多信息。
音效
需要使用音效时,请加载 ./rules/sound-effects.md 文件以了解更多信息。
使用方法
阅读各个规则文件,了解详细说明和代码示例:
- rules/3d.md - 使用 Three.js 和 React Three Fiber 在 Remotion 中创建 3D 内容
- rules/animations.md - Remotion 动画基础技能
- rules/assets.md - 将图像、视频、音频和字体导入 Remotion
- rules/audio.md - 在 Remotion 中使用音频和声音,包括导入、裁剪、音量、速度和音高
- rules/calculate-metadata.md - 动态设置合成时长、尺寸和 props
- rules/can-decode.md - 使用 Mediabunny 检查浏览器是否能解码视频
- rules/charts.md - Remotion 的图表和数据可视化模式(柱状图、饼图、折线图、股票图表)
- rules/compositions.md - 定义合成、静帧、文件夹、默认 props 和动态元数据
- rules/extract-frames.md - 使用 Mediabunny 从视频的指定时间戳提取帧
- rules/fonts.md - 在 Remotion 中加载 Google Fonts 和本地字体
- rules/get-audio-duration.md - 使用 Mediabunny 获取音频文件的时长(秒)
- rules/get-video-dimensions.md - 使用 Mediabunny 获取视频文件的宽度和高度
- rules/get-video-duration.md - 使用 Mediabunny 获取视频文件的时长(秒)
- rules/gifs.md - 将 GIF 与 Remotion 时间轴同步显示
- rules/images.md - 使用 Img 组件在 Remotion 中嵌入图像
- rules/light-leaks.md - 使用 @remotion/light-leaks 创建漏光叠加效果
- rules/lottie.md - 在 Remotion 中嵌入 Lottie 动画
- rules/measuring-dom-nodes.md - 在 Remotion 中测量 DOM 元素尺寸
- rules/measuring-text.md - 测量文本尺寸、使文本适应容器并检查溢出
- rules/sequencing.md - Remotion 的序列编排模式,包括延迟、裁剪和限制项目时长
- rules/tailwind.md - 在 Remotion 中使用 TailwindCSS
- rules/text-animations.md - Remotion 的排版和文本动画模式
- rules/timing.md - Remotion 中的插值曲线,包括线性、缓动和弹簧动画
- rules/transitions.md - Remotion 的场景转场模式
- rules/transparent-videos.md - 渲染透明视频
- rules/trimming.md - Remotion 的裁剪模式,包括剪掉动画的开头或结尾
- rules/videos.md - 在 Remotion 中嵌入视频,包括裁剪、音量、速度、循环和音高
- rules/parameters.md - 添加 Zod schema,使视频支持参数化
- rules/maps.md - 使用 Mapbox 添加地图并制作动画
- rules/voiceover.md - 使用 ElevenLabs TTS 为 Remotion 合成添加 AI 生成的旁白
评论
支持 Markdown