add-new-package
starsforks
How to install add-new-package?
moizibnyousaf/marketing-cli/add-new-package
$npx -y skills add MoizIbnYousaf/marketing-cli --skill add-new-packagepackage.json — copy from @remotion/light-leaks as template; update name, description, homepage, dependencies - tsconfig.json — extends ../tsconfig.settings.json, uses tsgo with emitDeclarationOnly: true, `outDirSKILL.md
| 1 | # Add a new Remotion package |
| 2 | |
| 3 | ## Steps |
| 4 | |
| 5 | 1. **Create `packages/<name>/`** with these files: |
| 6 | - `package.json` — copy from `@remotion/light-leaks` as template; update name, description, homepage, dependencies |
| 7 | - `tsconfig.json` — extends `../tsconfig.settings.json`, uses tsgo with `emitDeclarationOnly: true`, `outDir: "dist"`, `module: "es2020"`, `moduleResolution: "bundler"`, `target: "ES2022"` |
| 8 | - `src/index.ts` — exports |
| 9 | - `bundle.ts` — Bun build script, externalize `react`, `remotion`, `remotion/no-react`, `react/jsx-runtime`, `react/jsx-dev-runtime`, `react-dom` |
| 10 | - `eslint.config.mjs` — use `remotionFlatConfig({react: true})` if React, `{react: false}` otherwise |
| 11 | - `.npmignore` — copy from `@remotion/light-leaks` |
| 12 | - `README.md` — package name, description, install command, link to docs |
| 13 | |
| 14 | 2. **Register in monorepo:** |
| 15 | - `tsconfig.json` (root) — add `{"path": "./packages/<name>"}` to references |
| 16 | - `packages/cli/src/list-of-remotion-packages.ts` — add `'@remotion/<name>'` |
| 17 | - `packages/create-video/src/list-of-remotion-packages.ts` — add `'@remotion/<name>'` |
| 18 | - `packages/studio-shared/src/package-info.ts` — add to `packages`, `descriptions`, `installableMap`, `apiDocs` |
| 19 | |
| 20 | 3. **Documentation (`packages/docs/docs/<name>/`):** |
| 21 | - Add `"@remotion/<name>": "workspace:*"` to `packages/docs/package.json` dependencies (needed for twoslash snippets) |
| 22 | - `index.mdx` — install tabs, table of contents, license |
| 23 | - `table-of-contents.tsx` — TOCItem grid linking to component/function pages |
| 24 | - Individual component/function `.mdx` pages |
| 25 | - Edit `packages/docs/sidebars.ts` — add category |
| 26 | - Edit `packages/docs/components/TableOfContents/api.tsx` — import table of contents and add section |
| 27 | |
| 28 | See the `writing-docs` skill for details on writing documentation. |
| 29 | |
| 30 | 4. **Example usage:** |
| 31 | - Add `"@remotion/<name>": "workspace:*"` to `packages/example/package.json` |
| 32 | - Create `packages/example/src/<Name>/index.tsx` |
| 33 | - Register `<Composition>` in `packages/example/src/Root.tsx` |
| 34 | - Add `{"path": "../<name>"}` to `packages/example/tsconfig.json` references |
| 35 | |
| 36 | 5. **Run `bun i`** to install dependencies |
| 37 | |
| 38 | 6. **Build:** `cd packages/<name> && bun run make` |
| 39 | |
| 40 | ## Version |
| 41 | |
| 42 | Use the current version from `packages/core/src/version.ts`. |
| 43 | For the documentation version, increment the patch version by 1 as it will only be released with the next Remotion release. |
| 44 | |
| 45 | ## Patterns |
| 46 | |
| 47 | - Use `"workspace:*"` for internal dependencies |
| 48 | - Use `"catalog:"` for shared external dependency versions |
| 49 | - The `make` script is: `tsgo && bun --env-file=../.env.bundle bundle.ts` |
| 50 | - Add `"type": "module"` to `package.json` |
| 51 | - Add `"@typescript/native-preview": "catalog:"` to devDependencies |
| 52 | - Types/main point to `dist/index.d.ts` and `dist/index.js` (not `dist/cjs/`) |
| 53 | - Packages with React components need `peerDependencies` for `react` and `react-dom` |
People who liked this also viewed
6 picksType
- seo-auditWhen the user wants to audit, review, or diagnose SEO issues on their site. Also use when the user mentions "SEO audit," "technical SEO," "why am I not ranking," "SEO issues," "on-page SEO," "meta tagSkillsJul 2026
- copywritingWhen the user wants to write, rewrite, or improve marketing copy for any page — including homepage, landing pages, pricing pages, feature pages, about pages, or product pages. Also use when the user sSkillsJul 2026
- marketing-psychologyWhen the user wants to apply psychological principles, mental models, or behavioral science to marketing. Also use when the user mentions 'psychology,' 'mental models,' 'cognitive bias,' 'persuasion,'SkillsJul 2026
- content-strategyWhen the user wants to plan a content strategy, decide what content to create, or figure out what topics to cover. Also use when the user mentions "content strategy," "what should I write about," "conSkillsJul 2026
- programmatic-seoWhen the user wants to create SEO-driven pages at scale using templates and data. Also use when the user mentions "programmatic SEO," "template pages," "pages at scale," "directory pages," "location pSkillsJul 2026
- marketing-ideasWhen the user needs marketing ideas, inspiration, or strategies for their SaaS or software product. Also use when the user asks for 'marketing ideas,' 'growth ideas,' 'how to market,' 'marketing stratSkillsJul 2026
