Agent skill · software engineering · remotion-dev
add-sfx
Add a new sound effect to @remotion/sfx
Why this skill is useful
Provides specific steps and conventions for adding sound effects to a proprietary library, including file formats and documentation structure.
What it needs
Requires bun, ffmpeg installed locally. About 2k tokens when loaded. Last updated 2026-08-06. 55,698 stars on the source repository.
What this skill does
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: 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). 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 Convert section with a full-link sentence: Open this file on remotion.dev/convert 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills remotion-dev/add-sfx