A

add-sfx

by @remotion-devv
4.3(120)

此技能旨在简化向 @remotion/sfx 库添加新音效的复杂流程。它指导开发者完成音效文件准备、代码集成、文档生成及版本更新等一系列步骤,确保音效符合格式、授权和命名规范,从而高效扩展 Remotion 项目的音效资源。

audio-processingsound-effectsremotiondeveloper-toolscontent-creationGitHub
安装方式
npx skills add https://github.com/remotion-dev/remotion --skill add-sfx
compare_arrows

Before / After 效果对比

1 组
使用前

在没有这个技能之前,开发者需要手动处理音效文件的格式转换、授权检查、代码导出、文档编写以及多处文件注册,整个过程耗时且容易出错,尤其是在处理大量音效时,效率低下且难以保证一致性。

使用后

该 Skill 自动化并标准化了音效的集成流程,从文件准备到最终发布,每一步都有明确指引。此技能确保了音效符合所有技术和法律要求,显著减少了手动操作和错误,大幅提升了音效库的扩展效率和质量。

SKILL.md

Prerequisites

Sound effects must first be added to the remotion.media package.
Then it can be deployed using bun run build. The .env may be missing if we are in a worktree, but on the main non-worktree branch it should be present.

The source of truth is generate.ts in that repo. A sound effect must exist there before it can be added to @remotion/sfx.

Sound effects must be:

  • WAV format
  • CC0 (Creative Commons 0) licensed
  • Normalized to peak at -3dB

Steps

1. Add to remotion.media repo (must be done first)

In the remotion-dev/remotion.media repo:

  1. Add the WAV file to the root of the repo
  2. Add an entry to the soundEffects array in generate.ts:
    {
      fileName: "my-sound.wav",
      attribution:
        "Description by Author -- https://source-url -- License: Creative Commons 0",
    },
    
  3. Run bun generate.ts to copy it to files/ and regenerate variants.json
  4. Deploy

2. Add the export to packages/sfx/src/index.ts

Use camelCase for the variable name. Avoid JavaScript reserved words (e.g. use uiSwitch not switch).

export const mySound = 'https://remotion.media/my-sound.wav';

3. Create a doc page at packages/docs/docs/sfx/<name>.mdx

Follow the pattern of existing pages (e.g. whip.mdx). Include:

  • Frontmatter with image, title (camelCase export name), crumb: '@remotion/sfx'
  • <AvailableFrom> tag with the next release version
  • <PlayButton> import and usage
  • Description
  • Example code using @remotion/media's <Audio> component
  • Value section with the URL in a fenced code block
  • Duration section (fetch the file and use afinfo on macOS to get duration/format)
  • Attribution section with source link and license
  • See also section linking to related sound effects

4. Register in sidebar and table of contents

  • packages/docs/sidebars.ts — add 'sfx/<name>' to the @remotion/sfx category items
  • packages/docs/docs/sfx/table-of-contents.tsx — add a <TOCItem> with a <PlayButton size={32}>

5. Update the skills rule file

Add the new URL to the list in packages/skills/skills/remotion/rules/sfx.md.

6. Build

cd packages/sfx && bun run make

Naming conventions

File nameExport name
my-sound.wavmySound
switch.wavuiSwitch (reserved word)
page-turn.wavpageTurn

Version

Use the current version from packages/core/src/version.ts. For docs <AvailableFrom>, increment the patch version by 1.

用户评价 (0)

发表评价

效果
易用性
文档
兼容性

暂无评价

统计数据

安装量2.5K
评分4.3 / 5.0
版本
更新日期2026年10月16日
对比案例1 组

用户评分

4.3(120)
5
37%
4
43%
3
13%
2
5%
1
2%

为此 Skill 评分

0.0

兼容平台

🤖claude-code

时间线

创建2026年6月13日
最后更新2026年10月16日
🎁 Agent 知识卡片
调研问卷