add-new-package

Scaffold and register a new package within the Remotion monorepo.

57.9k|4.4k|Updated Jun 23, 2020
One-click install
npx skills add https://github.com/remotion-dev/remotion --skill add-new-package
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: add-new-package
Source: https://github.com/remotion-dev/remotion/tree/main/.agents/skills/add-new-package
Command: npx skills add https://github.com/remotion-dev/remotion --skill add-new-package

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Adding a new package to a large monorepo requires touching dozens of configuration files, documentation sites, and example projects in a consistent order. This Skill codifies the exact sequence of file creations and edits needed to introduce a new @remotion/* package without breaking the build.

Core Features & Use Cases

  • Package Scaffolding: Generates package.json, tsconfig.json, bundle.ts, eslint.config.mjs, and .npmignore from the @remotion/light-leaks template.
  • Monorepo Registration: Updates root tsconfig.json references, CLI package lists, and studio-shared package info maps.
  • Documentation Integration: Adds MDX pages, sidebar entries, and API table-of-contents sections under packages/docs/docs/<name>/.
  • Example Wiring: Registers the package in packages/example with a sample composition and tsconfig reference.

Quick Start

Create a new Remotion package called @remotion/my-feature following the add-new-package skill steps.

Frequently Asked Questions about add-new-package

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a new package to the Remotion monorepo?

Create a `packages/<name>/` directory using `@remotion/light-leaks` as the template, then register the package in root `tsconfig.json`, CLI package lists, studio-shared package info, and the docs sidebar. Run `bun i` and `bun run make` to complete the setup.

What files are required when scaffolding a new Remotion package?

A new package needs `package.json`, `tsconfig.json` extending `../tsconfig.settings.json`, `src/index.ts`, `bundle.ts` externalizing React and Remotion, `eslint.config.mjs`, `.npmignore`, and a `README.md`. React packages also require `react` and `react-dom` peer dependencies.

Does the new package need to be registered in multiple places?

Yes. Registration is required in root `tsconfig.json` references, `packages/cli/src/list-of-remotion-packages.ts`, `packages/create-video/src/list-of-remotion-packages.ts`, `packages/studio-shared/src/package-info.ts`, `packages/docs/sidebars.ts`, and `packages/docs/components/TableOfContents/api.tsx`.

Why does the documentation version differ from the package version?

The documentation version increments the patch number by 1 because docs are released only with the next Remotion release, while the package itself uses the current version from `packages/core/src/version.ts`.

Can I use internal dependencies between Remotion packages?

Yes. Use `"workspace:*"` for internal Remotion package dependencies and `"catalog:"` for shared external dependency versions defined in the workspace catalog.