Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →elirantutia/add-npm-dependency
This skill MUST be used whenever the task involves adding, installing, or upgrading an npm package/library/dependency in this project.
Passed 17 of 21 test cases with the skill, and 3 of 21 without it.
and 26 more in the full report
16 fixed2 passed either way3 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 16 test cases the skill fixed. Same model, same prompt, with and without the skill.
We want to use `zod` for payload schema validation in shared code. What command installs this library?
| Checked | Without skill | With skill |
|---|---|---|
| Specifies running npm install zod@latest | Missed | Passed |
The instructions your model reads when the skill loads.
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.
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)
^x.y.z — the repo convention (every dep in package.json uses ^). Leave it as a caret range.package-lock.json is committed and gets updated by the install. Both package.json and package-lock.json are part of your change — stage both.package-lock.json — not yarn, not pnpm)..nvmrc; engines.node is >=18. Run nvm use first if needed.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. |
marked, dompurify, gridstack, @xterm/*) just gets imported in renderer code and esbuild bundles it. Nothing else to do (except CSS — see Step 2)..node binary belongs in main/preload only.esbuild only has the .ts loader configured. It will not bundle any CSS the package ships. If the library needs a stylesheet to work (the way gridstack and @xterm/xterm do):
scripts/copy-assets.js — copy from node_modules/<pkg>/.../file.css to dist/renderer/vendor/<file>.css. Mirror the existing gridstack precedent in that file.<link rel="stylesheet" href="vendor/<file>.css"> to src/renderer/index.html (gridstack/xterm links are already there as examples).If you skip this, the JS bundles fine but the component renders unstyled. (CLAUDE.md documents this: "esbuild has no CSS loader" — gridstack CSS is copied manually.)
test cases passed, vs 3 / 21 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.