메뉴
Add a new package to the Remotion monorepo, including package scaffolding, monorepo registration, documentation, build scripts, tests, and release checklist updates. Use when creating a new @remotion package.
Best practices for Remotion - Video creation in React
Release a new Remotion version
Fix newly added optional parameters, optional React props, and optional type/interface members in Remotion monorepo diffs by converting internal APIs to required nullable values and updating call sites. Use when a PR, review, or user asks to forbid new `foo?: T` / `param?: T` additions except for exported or documented public APIs where requiring the value would be breaking.
Wait for a Remotion pull request to become mergeable, handle merge conflicts, distinguish genuine CI failures from flakes, rerun flaky checks through the flake skill, and merge the PR. Use when asked to run /merge, merge a current PR after checks pass, or shepherd a Remotion PR through CI to merge.
Add a browser WebCodecs bug to the Remotion Mediabunny WebCodecs bugs docs page. Use when given a Chromium, WebKit, or Firefox issue URL that should be tracked in packages/docs/docs/mediabunny/webcodecs-bugs.mdx, especially when needing to look up the issue title, filing date, reporter, and resolution state before editing the MDX table.
Add a new sound effect to @remotion/sfx
| name | add-new-package |
| description | Add a new package to the Remotion monorepo, including package scaffolding, monorepo registration, documentation, build scripts, tests, and release checklist updates. Use when creating a new @remotion package. |
Create packages/<name>/ with these files:
package.json — copy from @remotion/light-leaks as template; update name, description, homepage, dependenciestsconfig.json — extends ../tsconfig.settings.json, uses tsgo with emitDeclarationOnly: true, outDir: "dist", module: "es2020", moduleResolution: "bundler", target: "ES2022"src/index.ts — exportsbundle.ts — Bun build script, externalize react, remotion, remotion/no-react, react/jsx-runtime, react/jsx-dev-runtime, react-domeslint.config.mjs — use remotionFlatConfig({react: true}) if React, {react: false} otherwise.npmignore — copy from @remotion/light-leaksREADME.md — package name, description, install command, link to docsRegister in monorepo:
tsconfig.json (root) — add {"path": "./packages/<name>"} to referencespackages/cli/src/list-of-remotion-packages.ts — add '@remotion/<name>'packages/create-video/src/list-of-remotion-packages.ts — add '@remotion/<name>'packages/studio-shared/src/package-info.ts — add to packages, descriptions, installableMap, apiDocsDocumentation (packages/docs/docs/<name>/):
"@remotion/<name>": "workspace:*" to packages/docs/package.json dependencies (needed for twoslash snippets)index.mdx — install tabs, table of contents, licensetable-of-contents.tsx — TOCItem grid linking to component/function pages.mdx pagespackages/docs/sidebars.ts — add categorypackages/docs/components/TableOfContents/api.tsx — import table of contents and add sectionSee the writing-docs skill for details on writing documentation.
Example usage:
"@remotion/<name>": "workspace:*" to packages/example/package.jsonpackages/example/src/<Name>/index.tsx<Composition> in packages/example/src/Root.tsx{"path": "../<name>"} to packages/example/tsconfig.json referencesRun bun i to install dependencies
Build: cd packages/<name> && bun run make
Use the current version from packages/core/src/version.ts.
For the documentation version, increment the patch version by 1 as it will only be released with the next Remotion release.
"workspace:*" for internal dependencies"catalog:" for shared external dependency versionsmake script is: tsgo && bun --env-file=../.env.bundle bundle.ts"type": "module" to package.json"@typescript/native-preview": "catalog:" to devDependenciesdist/index.d.ts and dist/index.js (not dist/cjs/)peerDependencies for react and react-dom