Add a new Remotion package

SkillDocs & knowledge

Lets your agent scaffold and register a new package in the Remotion monorepo, with docs, tests, and release checklist.

Available today. Use it from your connected AI after setup.

Connect ahel once, and every AI you use reads what you have installed.

Then ask your AI: use the Add a new Remotion package skill

About this capability

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.

What this skill tells your AI

The instructions your AI receives, as published by remotion-dev/remotion in .agents/skills/add-new-package/SKILL.md and read by ahel’s review.

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.

  1. 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
  2. Run bun i to install dependencies

  3. 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

Signals

GitHub stars
59k
Forks
4k
Last commit
Sep 2026
Advanced
Catalog kind
skill
Gateway key
add-new-package-remotion-dev
Source
github.com/remotion-dev/remotion