SKILL.md
Add a new Remotion package
Steps
- Create
packages/<name>/with these files:
- package.json — copy from @remotion/light-leaks as template; update name, description, homepage, dependencies - tsconfig.json — extends ../tsconfig.settings.json, uses tsgo with emitDeclarationOnly: true, outDir: "dist", module: "es2020", moduleResolution: "bundler", target: "ES2022" - src/index.ts — exports - bundle.ts — Bun build script, externalize react, remotion, remotion/no-react, react/jsx-runtime, react/jsx-dev-runtime, react-dom - eslint.config.mjs — use remotionFlatConfig({react: true}) if React, {react: false} otherwise - .npmignore — copy from @remotion/light-leaks - README.md — package name, description, install command, link to docs
- Register in monorepo:
- tsconfig.json (root) — add {"path": "./packages/<name>"} to references - packages/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, apiDocs
- Documentation (
packages/docs/docs/<name>/):
- Add "@remotion/<name>": "workspace:*" to packages/docs/package.json dependencies (needed for twoslash snippets) - index.mdx — install tabs, table of contents, license - table-of-contents.tsx — TOCItem grid linking to component/function pages - Individual component/function .mdx pages - Edit packages/docs/sidebars.ts — add category - Edit packages/docs/components/TableOfContents/api.tsx — import table of contents and add section
See the writing-docs skill for details on writing documentation.
- Example usage:
- Add "@remotion/<name>": "workspace:*" to packages/example/package.json - Create packages/example/src/<Name>/index.tsx - Register <Composition> in packages/example/src/Root.tsx - Add {"path": "../<name>"} to packages/example/tsconfig.json references
- Run
bun ito install dependencies
- Build:
cd packages/<name> && bun run make
Version
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.
Patterns
- Use
"workspace:*"for internal dependencies - Use
"catalog:"for shared external dependency versions - The
makescript is:tsgo && bun --env-file=../.env.bundle bundle.ts - Add
"type": "module"topackage.json - Add
"@typescript/native-preview": "catalog:"to devDependencies - Types/main point to
dist/index.d.tsanddist/index.js(notdist/cjs/) - Packages with React components need
peerDependenciesforreactandreact-dom