New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Add npm Dependency

by elirantutia in elirantutia/vibeyard

This skill MUST be used whenever the task involves adding, installing, or upgrading an npm package/library/dependency in this project.

MITAuto-check passedFrontend & Design

Install Add npm Dependency

skills CLI
$ npx skills add elirantutia/vibeyard --skill add-npm-dependency -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install elirantutia/vibeyard add-npm-dependency --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/elirantutia/vibeyard.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/add-npm-dependency .claude/skills/add-npm-dependency && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
add-npm-dependency
GitHub stars
1.4k
Token cost
~1.5k tokens
SKILL.md length
682 words
Files
1
Skills in repo
2
Repo updated
First seen
Licence
MIT

At a glance

This skill MUST be used whenever the task involves adding, installing, or upgrading an npm package/library/dependency in this project.

  • Works in 6 steps: Decide which build target consumes the… → CSS / static assets gotcha (esbuild has… → Native module gotcha (.node binaries) → …
  • The user asks to add a library
  • SKILL.md covers Golden Rule: install the…, Step 1 — Decide which build…, Step 2 — CSS / static assets… and Step 3 — Native module gotcha…, plus 4 more sections
  • Calls npm and nvm

What it does

Add npm Dependency is an agent skill from elirantutia/vibeyard. 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.

Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design. It works with npm and TypeScript. The repository describes itself as: The IDE built for AI coding agents. The licence is MIT.

When your agent uses it

  • The user asks to add a library
  • Install <package
  • Add a dependency
  • Bump/upgrade a package

Example prompts

  • “add a library”
  • “install <package”
  • “use <package”
  • “/add-npm-dependency”

Requirements

  • Node.js

Workflow steps

6 steps, taken from the step headings in SKILL.md.

  1. Decide which build target consumes the package
  2. CSS / static assets gotcha (esbuild has NO CSS loader)
  3. Native module gotcha (.node binaries)
  4. Types
  5. Verify (required, not optional)
  6. Packaging sanity check

What it can do on your machine

Read from SKILL.md and the folder at commit 19bc19f. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm
    • nvm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Add npm Dependency loads about 1.5k tokens when it runs. Until then it costs about 114 tokens; SKILL.md has 682 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~114
When it runs · the whole SKILL.md, loaded when a task matches
~1.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from elirantutia/vibeyard at commit 19bc19f, republished under its MIT licence (© elirantutia). 682 words, ~1,493 tokens.

Download SKILL.mdSave it as .claude/skills/add-npm-dependency/SKILL.md (or your agent's skills folder).
name
add-npm-dependency
description
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.

bash
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 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.
  • Use npm only (the lockfile is package-lock.json — not yarn, not pnpm).
  • Node v24 is pinned in .nvmrc; engines.node is >=18. Run nvm use first if needed.

Step 1 — Decide which build target consumes the package

This determines every gotcha that follows.

TargetSource dirsHow it's builtWhat's allowed
Renderersrc/renderer/**Bundled by esbuild into one IIFE (build:renderer)Plain JS/TS deps only. No Node built-ins, no native modules.
Mainsrc/main/**, src/shared/**tsc → CommonJS (dist/main/)Any Node dep, including native modules. Resolved via require at runtime against node_modules — not bundled.
Preloadsrc/preload/**, src/shared/**tsc → CommonJS (dist/preload/)Runs in Node/Electron context; same rules as main.
  • A pure JS/TS library used in the UI (like marked, dompurify, gridstack, @xterm/*) just gets imported in renderer code and esbuild bundles it. Nothing else to do (except CSS — see Step 2).
  • A library that touches the filesystem, spawns processes, or has a .node binary belongs in main/preload only.

Step 2 — CSS / static assets gotcha (esbuild has NO CSS loader)

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):

  1. Add a copy step in 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.
  2. Add a <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.)

Show full SKILL.md (324 more words)Show less

Step 3 — Native module gotcha (.node binaries)

Examples already in the repo: better-sqlite3, node-pty.

  • Must be a regular dependency (never imported from the renderer — main/preload only).
  • npm install triggers the postinstall hook → electron-builder install-app-deps, which rebuilds the .node binary against the pinned Electron ABI. If the module fails to load at runtime ("NODE_MODULE_VERSION mismatch"), re-run npm install and check the postinstall output.
  • If the binary can't load from inside the asar archive, add the package to electron-builder's asarUnpack in package.json (precedent: **/node_modules/better-sqlite3/**).
  • Native modules must compile on macOS, Linux, and Windows — CI builds all three. Flag the cross-platform risk to the user; see src/main/platform.ts for the platform-detection helpers.

Step 4 — Types

  • If the package ships its own type declarations, you're done.
  • Otherwise add the community types as a devDependency: npm install -D @types/<pkg>@latest (precedent: @types/better-sqlite3, @types/dompurify, @types/picomatch).

Step 5 — Verify (required, not optional)

There is no hot reload — every change needs a rebuild.

bash
npm run build    # must pass: tsc main + tsc preload + esbuild renderer + copy-assets
npm test         # Vitest suite

Then confirm the dependency actually works end to end:

  • Renderer / UI / CSS dep: npm start, and visually confirm the feature renders and styles load.
  • Native / main dep: launch the app and exercise the feature that uses it.

Step 6 — Packaging sanity check

electron-builder packages only dist/main/**, dist/preload/**, dist/renderer/**:

  • Renderer deps are safe — they're bundled into dist/renderer/index.js.
  • Main/preload deps resolve from the packaged production node_modules at runtime, so they must be in dependencies (not devDependencies). Keep build-only tooling (bundlers, types, test libs) in devDependencies.

Do / Don't

Do:

  • npm install <pkg>@latest, leave the caret range, commit package.json + package-lock.json.
  • Pick the right target (renderer vs main/preload) before importing.
  • Add the CSS copy step + <link> for any styled renderer library.
  • Run npm run build and npm test before declaring done.

Don't:

  • Pin an exact version or hand-edit a version in package.json.
  • Import Node built-ins or native modules from the renderer.
  • Forget the scripts/copy-assets.js step for CSS (esbuild won't bundle it).
  • Put a native module in devDependencies or assume it works without the postinstall rebuild.

$ARGUMENTS

© elirantutia, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .claude/skills/add-npm-dependency of elirantutia/vibeyard.

Open the folder on GitHubat commit 19bc19f

Compare with similar skills

Add npm Dependency next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Add npm Dependency compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Add npm Dependency this skillelirantutia/vibeyard1.4k—~1.5kAutomated safety check: PassMIT
Create Docsvictorgarciaesgi/nuxt-typed-router4132 repos~2.8kAutomated safety check: PassMIT
Vuetify Skilldlogue/vite-vuetify-ts-starter1811 repos~1.9kAutomated safety check: PassMIT
Compare Array Bundle SizePostHog/posthog-js634—~599Automated safety check: PassCustom licence
Reduce Bundle Sizekcsujeet/ilamy-calendar351—~2.9kAutomated safety check: PassMIT
Spotpatchhuanglvjing/spotpatch134—~998Automated safety check: PassMIT

Similar skills

  • Create Docs

    victorgarciaesgi/nuxt-typed-router

    Create complete documentation sites for projects. An agent skill from victorgarciaesgi/nuxt-typed-router.

    413 GitHub starsUsed in 2 repos~2.8k tokens
    Frontend & DesignAuto-check passed

  • Vuetify Skilld

    logue/vite-vuetify-ts-starter

    Vue Material Component Framework. An agent skill from logue/vite-vuetify-ts-starter.

    181 GitHub starsUsed in 1 repo~1.9k tokens
    Frontend & DesignAuto-check passed

  • Compare Array Bundle Size

    PostHog/posthog-js

    Official

    Quickly compare the posthog-js array.js bundle size in the current working tree against a git baseline using the repository's esbuild proxy.

    634 GitHub stars~599 tokensUpdated today
    Frontend & DesignAuto-check passed

  • Reduce Bundle Size

    kcsujeet/ilamy-calendar

    Systematically reduce the shipped bundle size of a JS/TS library without sacrificing code readability or breaking consumer APIs.

    351 GitHub stars~2.9k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Spotpatch

    huanglvjing/spotpatch

    为 React 项目建立从浏览器页面元素到精确 JSX/TSX 源码、结构化上下文与可审阅修改的 SpotPatch 工作流。用户提到 SpotPatch、截图沟通前端修改、页面元素定位源码、Vite 或 Next.js 接入、组件数据链路、结构化 Prompt、AI 补丁审阅、安装检查或故障排查时使用此技能。

    134 GitHub stars~998 tokensUpdated 13 days ago
    Frontend & DesignAuto-check passed

  • npm Library Setup

    vana-com/personal-server

    Comprehensive guidance on setting up npm libraries with package.json, with a preference for ES Modules (ESM).

    115 GitHub stars~1.1k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

More from elirantutia/vibeyard

  • UI Dev

    elirantutia/vibeyard

    This skill MUST be used whenever the task involves UI development, renderer code changes, adding or modifying components, creating modals or dialogs, working with CSS styles, building new UI…

    1.4k GitHub stars~2.4k tokensUpdated 1 mo ago
    Auto-check passed

Works with

Categories

Questions about Add npm Dependency

What does Add npm Dependency do?

This skill MUST be used whenever the task involves adding, installing, or upgrading an npm package/library/dependency in this project. Add npm Dependency is an agent skill from elirantutia/vibeyard. This skill MUST be used whenever the task involves adding, installing, or upgrading an npm package/library/dependency in this project.

When should I use Add npm Dependency?

Add npm Dependency fits situations like: the user asks to add a library; install <package; add a dependency; bump/upgrade a package.

How do I install Add npm Dependency in Claude Code?

Run `npx skills add elirantutia/vibeyard --skill add-npm-dependency -a claude-code`. Or copy the skill folder (.claude/skills/add-npm-dependency in elirantutia/vibeyard) into .claude/skills/add-npm-dependency in your project. Claude Code loads it when a task matches its description.

How do I install Add npm Dependency in Codex?

Run `npx skills add elirantutia/vibeyard --skill add-npm-dependency -a codex`. Or copy the skill folder (.claude/skills/add-npm-dependency in elirantutia/vibeyard) into .agents/skills/add-npm-dependency in your project. Codex loads it when a task matches its description.

Can I use Add npm Dependency in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add elirantutia/vibeyard --skill add-npm-dependency -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/add-npm-dependency, .gemini/skills/add-npm-dependency, .github/skills/add-npm-dependency and .opencode/skills/add-npm-dependency in your project.

What does Add npm Dependency need to run?

Going by SKILL.md and its folder, Add npm Dependency needs the command-line tools its instructions call (npm and nvm). Our summary lists: Node.js.

Does Add npm Dependency access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Add npm Dependency safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Add npm Dependency use?

Add npm Dependency is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Add npm Dependency use?

About 1.5k tokens (SKILL.md is roughly 6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Add npm Dependency?

Skills that share tags, products or a category with Add npm Dependency: Create Docs (victorgarciaesgi/nuxt-typed-router, 413 stars), Vuetify Skilld (logue/vite-vuetify-ts-starter, 181 stars), Compare Array Bundle Size (PostHog/posthog-js, 634 stars) and Reduce Bundle Size (kcsujeet/ilamy-calendar, 351 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Add npm Dependency?

elirantutia (a GitHub user) maintains it in elirantutia/vibeyard, which has 1,388 GitHub stars. The repository holds 2 skills in this directory. The repository was last updated on September 3, 2026.

Source: elirantutia/vibeyard on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.