Add Npm Dependency
MUST be used whenever the task involves adding, installing, or upgrading an npm...
Install
npx skills add elirantutia/vibeyard --skill add-npm-dependency -g -a claude-code -y- Repository
- elirantutia/vibeyard1.4k
- Category
- Design
- Updated
- 3d ago
- License
- MIT
- Context cost
- Lightabout 1,372 tokens
- Runs scripts
- No, instructions only
What it does
This skill MUST be used whenever the task involves adding, installing, or upgrading an npm package/library/dependency in this project. Use when the user asks to "add a library", "install <package>", "use <package>", "add a dependency", "bump/upgrade a package", or any change to package.json dependencies. Covers the latest-version policy, esbuild renderer bundling, manual CSS copy, native module rebuilds, and the three build targets.
Adding an npm Library
This is an Electron app with three separate build targets (main, preload, renderer) and a few non-obvious bundling rules. Adding a dependency the wrong way silently breaks CSS, native modules, or the renderer bundle. Follow this guide every time.
Golden Rule: install the latest, caret-pinned
Always install the newest published version. Never hand-edit package.json to set or downgrade a version.
npm install <pkg>@latest # runtime dependency
npm install -D <pkg>@latest # dev / build-only tool (types, bundlers, test libs)
- This records a caret range
^x.y.z, the repo convention (every dep inpackage.jsonuses^). Leave it as a caret range. package-lock.jsonis committed and gets updated by the install. Bothpackage.jsonandpackage-lock.jsonare part of your change, stage both.- Use npm only (the lockfile is
package-lock.json, not yarn, not pnpm). - Node v24 is pinned in
.nvmrc;engines.nodeis>=18. Runnvm usefirst if needed.
Step 1, Decide which build target consumes the package
This determines every gotcha that follows.
| Target | Source dirs | How it's built | What's allowed |
|---|---|---|---|
| Renderer | src/renderer/** | Bundled by esbuild into one IIFE (build:renderer) | Plain JS/TS deps only. No Node built-ins, no native modules. |
| Main | src/main/**, src/shared/** | tsc → CommonJS (dist/main/) | Any Node dep, including native modules. Resolved via require at runtime against node_modules, not bundled. |
| Preload | src/preload/**, src/shared/** | tsc → CommonJS (dist/preload/) | Runs in Node/Electron context; same rules as main. |
