Add New Package

Name: Add New Package
Author: remotion-dev

remotion-dev/remotion

464 installs
55.5k repo stars
Updated August 4, 2026
remotion-dev/remotion

add-new-package is an agent skill that scaffolds and registers a new @remotion package across the Remotion monorepo and docs toolchain.

About

add-new-package guides agents and maintainers through creating another first-class @remotion package inside the Remotion monorepo. It standardizes the folder layout—package manifest, tsgo declaration emit settings, index exports, Bun bundle script with React externals, ESLint flat config, npm ignore, and README—and then walks through every registry touchpoint so the CLI, create-video, studio-shared metadata, and documentation site stay consistent. The skill is aimed at contributors shipping new video-related capabilities as installable Remotion modules rather than one-off app code. Following it reduces missed references that break composite TypeScript builds or leave packages invisible to studio installers. Treat it as the authoritative checklist when the feature belongs in the public package graph, not a private app experiment.

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

Add New Package by the numbers

464 all-time installs (skills.sh)
+60 installs in the week ending Aug 4, 2026 (Skillselion tracking)
Ranked #49 of 248 Release Management skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/remotion-dev/remotion --skill add-new-package

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/remotion-dev/remotion/add-new-package.svg)](https://skillselion.com/skills/remotion-dev/remotion/add-new-package)

Installs	464
repo stars	★ 55.5k
Last updated	August 4, 2026
Repository	remotion-dev/remotion ↗

What it does

Scaffold and register a new @remotion/* package in the monorepo with build, docs, tests, and release checklist updates.

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 you get

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

By the numbers

Template baseline copies @remotion/light-leaks package layout
Multiple monorepo registration targets including CLI, create-video, and studio-shared package-info

Files

SKILL.mdMarkdownGitHub ↗

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