Add New Package
Scaffold and register a new @remotion/* package in the monorepo with build, docs, tests, and release checklist updates.
Overview
add-new-package is an agent skill for the Build phase that scaffolds and registers a new @remotion package across the Remotion monorepo and docs toolchain.
Install
npx skills add https://github.com/remotion-dev/remotion --skill add-new-packageWhat is this skill?
- Scaffolds packages/<name>/ from @remotion/light-leaks template (package.json, tsconfig, bundle.ts, eslint, exports)
- Registers the package in root tsconfig references and list-of-remotion-packages (CLI and create-video)
- Updates studio-shared package-info (packages, descriptions, installableMap, apiDocs)
- Expects Bun bundle externals for react, remotion, and jsx runtimes
- Template baseline copies @remotion/light-leaks package layout
- Multiple monorepo registration targets including CLI, create-video, and studio-shared package-info
Adoption & trust: 103 installs on skills.sh; 49.4k GitHub stars.
What problem does it solve?
You want a new @remotion package but the monorepo has many registration files and conventions easy to omit.
Who is it for?
Remotion core contributors or advanced fork maintainers adding an official-style package with studio and CLI visibility.
Skip if: Solo apps that only import Remotion without publishing a new workspace package to the monorepo.
When should I use this skill?
Creating a new @remotion package in the Remotion monorepo.
What do I get? / Deliverables
You get a fully scaffolded package directory and updated monorepo lists so build, CLI discovery, and docs can include the new module—then typically open a PR via the Remotion pr skill.
- New packages/<name>/ workspace
- Updated monorepo registration and docs stubs
Recommended Skills
Journey fit
Adding a publishable workspace package is core product construction inside the Remotion monorepo before any ship or launch activity. integrations fits because the work wires a new package into CLI lists, studio metadata, TypeScript project references, and docs surfaces.
How it compares
A monorepo release checklist skill, not a tutorial for rendering your first Remotion video in an app folder.
Common Questions / FAQ
Who is add-new-package for?
Developers working in remotion-dev/remotion who need to add another @remotion/* library with correct build and catalog registration.
When should I use add-new-package?
Use it in Build/integrations when creating a new @remotion package and before cutting release notes or docs for that package name.
Is add-new-package safe to install?
Check the Security Audits panel on this page; the skill describes file and repo edits your agent should only run in a trusted Remotion checkout.
Workflow Chain
Then invoke: skill remotion dev remotion pr
SKILL.md
READMESKILL.md - Add New Package
# Add a new Remotion package ## Steps 1. **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 2. **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` 3. **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. 4. **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 5. **Run `bun i`** to install dependencies 6. **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 `make` script is: `tsgo && bun --env-file=../.env.bundle bundle.ts` - Add `"type": "module"` to `package.json` - Add `"@typescript/native-preview": "catalog:"` to devDependencies - Types/main point to `dist/index.d.ts` and `dist/index.js` (not `dist/cjs/`) - Packages with React components need `peerDependencies` for `react` and `react-dom`