dev-package-json

Organize and maintain package.json and npm config (.npmrc) for readability and security. Use when: (1) Reorganizing scripts section or adding separators, (2) Extracting multi-process commands into shell scripts, (3) Setting up multi-environment dev commands (local/preview/prod), (4) Handling pnpm "Ignored build scripts" warnings, (5) Configuring .npmrc security (strictDepBuilds, allowBuilds, ignoredBuilds), (6) Managing pnpm via corepack and packageManager field, (7) Adding predev port cleanup. Keywords: package.json, npm scripts, .npmrc, pnpm, build scripts, supply chain, corepack, packageManager, predev, kill port, port in use.

6 stars

Best use case

dev-package-json is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Organize and maintain package.json and npm config (.npmrc) for readability and security. Use when: (1) Reorganizing scripts section or adding separators, (2) Extracting multi-process commands into shell scripts, (3) Setting up multi-environment dev commands (local/preview/prod), (4) Handling pnpm "Ignored build scripts" warnings, (5) Configuring .npmrc security (strictDepBuilds, allowBuilds, ignoredBuilds), (6) Managing pnpm via corepack and packageManager field, (7) Adding predev port cleanup. Keywords: package.json, npm scripts, .npmrc, pnpm, build scripts, supply chain, corepack, packageManager, predev, kill port, port in use.

Teams using dev-package-json should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/dev-package-json/SKILL.md --create-dirs "https://raw.githubusercontent.com/Takazudo/claude-resources/main/skills/dev-package-json/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/dev-package-json/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How dev-package-json Compares

Feature / Agentdev-package-jsonStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

Organize and maintain package.json and npm config (.npmrc) for readability and security. Use when: (1) Reorganizing scripts section or adding separators, (2) Extracting multi-process commands into shell scripts, (3) Setting up multi-environment dev commands (local/preview/prod), (4) Handling pnpm "Ignored build scripts" warnings, (5) Configuring .npmrc security (strictDepBuilds, allowBuilds, ignoredBuilds), (6) Managing pnpm via corepack and packageManager field, (7) Adding predev port cleanup. Keywords: package.json, npm scripts, .npmrc, pnpm, build scripts, supply chain, corepack, packageManager, predev, kill port, port in use.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# package.json & npm Config Management

## Part 1: package.json Scripts Organization

Two techniques for keeping large `scripts` sections readable and maintainable.

### Technique 1: Comment Separator Keys

Add visual section dividers using unused JSON keys:

```json
{
  "scripts": {
    "// ── Core ─────────────────────────────────────────": "",
    "dev": "next dev",
    "build": "next build",
    "// ── Testing ─────────────────────────────────────": "",
    "test": "jest",
    "test:e2e": "playwright test"
  }
}
```

Format: `"// ── Section Name ──────..."` with `─` padding to ~50 chars, value `""`.

### Technique 2: Predev Port Cleanup

Add a `predev` script that kills stale processes on dev server ports before starting. This prevents "port already in use" errors that commonly occur after crashes, orphaned processes, or forgotten terminal sessions.

```json
{
  "scripts": {
    "predev": "lsof -ti :5173,:8787 | xargs kill 2>/dev/null; true",
    "dev": "next dev"
  }
}
```

How it works:

- `lsof -ti :PORT` — finds PIDs listening on specified ports (`-t` = terse/PID-only, `-i` = internet addresses)
- Comma-separated ports: `:5173,:8787` checks multiple ports at once
- `xargs kill` — sends SIGTERM (graceful) to found processes
- `2>/dev/null; true` — silently succeeds when no processes are found
- npm/pnpm auto-runs `predev` before `dev` (lifecycle hook convention)

Adapt port numbers to match your project's dev servers (e.g., `:3000,:8080` for a typical Node.js + API setup).

### Technique 3: External Shell Scripts for Multi-Process Commands

When a command starts 2+ background processes, extract to `scripts/*.sh`.

Template available at `scripts/multi-process-dev.sh.template`. Key pattern:

```bash
#!/bin/bash
set -e
cleanup() {
  kill $PID_1 $PID_2 2>/dev/null
  wait $PID_1 $PID_2 2>/dev/null
}
trap cleanup EXIT INT TERM

if [ "$MODE" = "local" ]; then
  backend-server &
  PID_1=$!
  sleep 3
fi

pnpm dev &
PID_2=$!
wait
```

Call from package.json: `"dev:full": "MODE=local ./scripts/dev-full.sh"`

Make executable: `chmod +x scripts/*.sh`

### Multi-Environment Pattern

For apps with local/preview/production API targets:

```json
{
  "// ── Dev with API (3 environments) ───────────────": "",
  "dev:full": "API_MODE=local ./scripts/dev-full.sh",
  "dev:full:preview": "API_MODE=preview pnpm dev",
  "dev:full:prod": "API_MODE=production pnpm dev"
}
```

### Detailed Patterns

See [references/patterns.md](references/patterns.md) for:

- Full list of suggested section names
- Namespace prefixing for monorepo sub-packages
- Internal/private script conventions (`_` prefix)
- Complete multi-process shell script template with explanations

---

## Part 2: pnpm Version Management with Corepack

### The `packageManager` Field

Pin the exact pnpm version in `package.json`:

```json
{
  "packageManager": "pnpm@10.30.2+sha512.36cdc707e7b..."
}
```

This ensures every developer and CI uses the identical pnpm version. Corepack reads this field and auto-downloads the specified version.

### Setup (Once Per Machine)

```bash
corepack enable
```

After this, running `pnpm install` / `pnpm dev` / etc. just works — corepack intercepts the `pnpm` command and uses the pinned version automatically. No global pnpm install needed.

### Key Rules

- **Never run `pnpm self-update`** — it errors when pnpm is managed by corepack
- **Never run `corepack use pnpm@latest` routinely** — it bumps the version in `package.json` and often regenerates `pnpm-lock.yaml`, creating noisy diffs
- **Only update intentionally** — when the team decides to upgrade, one person runs `corepack use pnpm@<version>`, commits the `package.json` + lockfile changes, and everyone else gets it via `pnpm install`
- **Different repos can pin different versions** — corepack handles per-project version switching automatically

### Common Mistake

AI tools and automation sometimes add `corepack use pnpm@latest` to setup steps. This causes unnecessary version bumps and lockfile churn. Remove it — `corepack enable` + the existing `packageManager` field is sufficient.

---

## Part 3: .npmrc Build Script Security Management

Evaluate and manage dependency build scripts for supply chain security.

See [references/npmrc-build-scripts.md](references/npmrc-build-scripts.md) for:

- The full evaluation workflow for "Ignored build scripts" warnings
- Decision criteria for allowBuilds vs ignoredBuilds
- Common package evaluations (reference table)
- .npmrc configuration patterns

Related Skills

dev-wip-package-upstream-wt-dev

6
from Takazudo/claude-resources

Workflow for editing a WIP upstream package (consumed by this project via a sibling `file:../upstream/...` dep) when a fix or feature requires changing the upstream's code. ALWAYS work in a git worktree of the upstream — never on the shared `../upstream/` root checkout — because every consumer using that sibling shares the same on-disk HEAD. Use when: (1) The fix lives in the upstream package's source, not the consumer's, (2) User says 'edit upstream', 'fix upstream', 'patch upstream', 'upstream PR', 'I need to change the upstream framework', 'fix zfb / zdtp upstream', (3) Triaging a consumer-side issue and the root cause is in the upstream library, (4) Bumping the consumer's pin requires landing an upstream PR first.

dev-wip-package-refer

6
from Takazudo/claude-resources

Pattern for consuming an in-progress (WIP) upstream npm/pnpm package from a sibling git checkout via a `file:../{name}/...` relative dep — without publishing the package. Use when: (1) Setting up a consumer project that needs to depend on a local in-development library or framework checked out next to it, (2) User mentions 'file: dep', 'sibling repo', 'upstream package', 'wip package', 'monorepo-style refer', 'how do we consume the upstream', (3) Deciding between this pattern and a published npm version or a `github:` git-URL dep, (4) Setting up a fresh machine that already has a consumer project but the sibling upstream isn't cloned yet, (5) A consumer's CI is failing because the sibling upstream isn't where the `file:` spec expects it.

dev-tweak-serve-package-json

6
from Takazudo/claude-resources

Tweak serve/dev commands in package.json. Use when: (1) User says 'tweak serve', 'dev tweak serve', or 'tweak-serve', (2) User wants to add port-kill before dev/serve (--kill), (3) User wants :net LAN-accessible variants of dev/serve (--net). Flags: --kill adds predev port cleanup, --net adds 0.0.0.0 host variants.

dev-npm-package

6
from Takazudo/claude-resources

Develop npm packages with Node.js and TypeScript following modern best practices. Use when: (1) Creating a new npm package, (2) Setting up package.json exports (dual ESM/CJS or ESM-only), (3) Configuring TypeScript for library authoring (Bundler or Node16 moduleResolution), (4) Building/publishing with tsup or tsc, (5) Creating CLI tools with bin field, (6) Testing with vitest, (7) CI/CD for npm publishing, (8) ESM/CJS interop issues. Keywords: npm package, publish to npm, library development.

zudoesa-articlify

6
from Takazudo/claude-resources

Convert conversation context into an esa article via the zudoesa-writer subagent. ONLY invoke when the user explicitly asks — NEVER proactively propose. Triggers: 'write esa article', 'esa記事', 'esaに書いて', 'articlify for esa', or /zudoesa-articlify. Gathers context, creates a writing brief, delegates to the writer subagent.

zudoesa-apply-voice

6
from Takazudo/claude-resources

Apply Takazudo's esa writing voice and vocabulary rules to text. Use when: (1) User wants to write/rewrite text in Takazudo's esa style, (2) User says 'apply voice', 'esa voice', 'esa文体で', 'esa風に書いて', '文体を適用', (3) User provides text to transform to esa style. Reads writing-style.md and vocabulary-rule.md from takazudo-esa-writing repo and applies the rules.

zudocg-articlify

6
from Takazudo/claude-resources

Convert conversation context into a CodeGrid article via the zudocg-writer subagent. ONLY invoke when the user explicitly asks — NEVER proactively propose. Triggers: 'write codegrid article', 'CodeGrid記事', 'codegridに書いて', 'articlify for codegrid', or /zudocg-articlify. Gathers context, creates a writing brief, delegates to the writer subagent.

zudocg-apply-voice

6
from Takazudo/claude-resources

Apply Takazudo's CodeGrid writing voice and vocabulary rules to text. Use when: (1) User wants to write/rewrite text in Takazudo's CodeGrid style, (2) User says 'apply voice', 'codegrid voice', 'codegrid文体で', 'codegrid風に書いて', '文体を適用', (3) User provides text to transform to CodeGrid style. Reads writing-style.md and vocabulary-rule.md from takazudo-codegrid-writing repo and applies the rules.

zpaper-articlify

6
from Takazudo/claude-resources

Convert conversation context into a zpaper blog article via the zpaper-writer subagent. ONLY invoke when the user explicitly asks — NEVER proactively propose. Triggers: 'write zpaper article', 'zpaper記事', 'zpaperに書いて', 'articlify for zpaper', or /zpaper-articlify. Gathers context, creates a writing brief, delegates to the writer subagent.

zpaper-apply-voice

6
from Takazudo/claude-resources

Apply Takazudo's zpaper blog writing voice and vocabulary rules to text. Use when: (1) User wants to write/rewrite text in Takazudo's zpaper style, (2) User says 'apply voice', 'zpaper voice', 'zpaper文体で', 'zpaper風に書いて', 'ブログ文体を適用', (3) User provides text to transform to zpaper style. Reads writing-style.md and vocabulary-rule.md from the zpaper repo and applies the rules.

xlsx

6
from Takazudo/claude-resources

Spreadsheet creation, editing, and analysis. Use when working with .xlsx, .xlsm, .csv, .tsv files for: (1) Creating spreadsheets with formulas and formatting, (2) Reading or analyzing data, (3) Modifying existing spreadsheets while preserving formulas, (4) Data analysis and visualization, (5) Recalculating formulas.

x

6
from Takazudo/claude-resources

Facade for development workflows. Routes on two axes: plan-first vs implement-now (escalates to /big-plan -a when the request needs research / decomposition / has unclear scope — the appended -a makes the plan chain into implementation in-session), then single vs multi on the ready-to-build fast paths (/x-as-pr single-topic, /x-wt-teams multi-topic parallel). Use when: (1) User says '/x' followed by dev instructions, (2) User wants to start development without choosing the workflow skill, (3) User says 'dev', 'implement', or 'build' with a task. Default option: -v (verify-ui). Review-loop (-l) is opt-in — without -l the downstream skill runs a single /deep-review pass. Forwards -a (autonomy/auto-chain) and -m (merge at the end + cleanup + CI watch) through every route; auto-fix of raised findings (-f) and issue-raising (-ri) are downstream defaults, with -nf/--no-fix and -nori/--no-raise-issues as the forwarded opt-outs. -a and -m are orthogonal — full hands-off end-to-end is -a -m.