Add Sfx
Contribute a new CC0 WAV sound effect to the Remotion monorepo by updating remotion.media, @remotion/sfx exports, and docs pages.
Overview
Add SFX is an agent skill for the Build phase that walks maintainers through adding a CC0 WAV sound effect to remotion.media and @remotion/sfx with docs.
Install
npx skills add https://github.com/remotion-dev/remotion --skill add-sfxWhat is this skill?
- Two-step pipeline: remotion.media generate.ts first, then @remotion/sfx export and MDX doc
- Sound effects must be WAV, CC0 licensed, normalized to peak at -3dB
- generate.ts soundEffects array entry with fileName and attribution block
- CamelCase export names in packages/sfx/src/index.ts with reserved-word avoidance
- Doc pages follow existing MDX pattern such as whip.mdx with frontmatter crumbs
- Audio must be WAV format, CC0 licensed, normalized to peak at -3dB
- Three integration surfaces: remotion.media generate.ts, packages/sfx/src/index.ts export, packages/docs MDX page
Adoption & trust: 1k installs on skills.sh; 49.4k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have a new sound effect for Remotion but the monorepo requires a strict order across remotion.media, sfx exports, and MDX docs.
Who is it for?
Remotion contributors or fork maintainers adding library sound effects with correct attribution and package boundaries.
Skip if: End users who only want to play existing @remotion/sfx URLs in a video without touching the monorepo.
When should I use this skill?
User wants to add a new sound effect to @remotion/sfx or extend remotion.media catalog entries.
What do I get? / Deliverables
The effect is registered in generate.ts, exported from @remotion/sfx, documented on a new MDX page, and ready after the prescribed generate and deploy steps.
- Updated generate.ts entry and regenerated variants
- New camelCase export in packages/sfx/src/index.ts
- MDX documentation page under packages/docs/docs/sfx/
Recommended Skills
Journey fit
This is maintainer build work inside the Remotion packages, not audience-facing launch or growth activity. Integrations subphase fits packaging a media asset across remotion.media, sfx index exports, and documentation surfaces.
How it compares
Upstream contributor workflow for Remotion media packages, not a general royalty-free SFX downloader skill.
Common Questions / FAQ
Who is add-sfx for?
Developers contributing to Remotion who need to add licensed WAV assets to remotion.media and wire them into @remotion/sfx.
When should I use add-sfx?
During Build when integrating a new sound into the Remotion monorepo after the asset already meets WAV, CC0, and -3 dB normalization rules.
Is add-sfx safe to install?
The skill describes git, generate, and deploy steps across official Remotion repos; review the Security Audits panel on this Prism page and only run builds in trusted worktrees.
SKILL.md
READMESKILL.md - Add Sfx
## Prerequisites Sound effects must first be added to the [remotion.media](./packages/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`: ```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`). ```ts 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 ```bash cd packages/sfx && bun run make ``` ## Naming conventions | File name | Export name | | --------------- | -------------------------- | | `my-sound.wav` | `mySound` | | `switch.wav` | `uiSwitch` (reserved word) | | `page-turn.wav` | `pageTurn` | ## Version Use the current version from `packages/core/src/version.ts`. For docs `<AvailableFrom>`, increment the patch version by 1.