Skip to main content
skill

setup-pre-commit — Claude Code skill: setup guide

This skill configures pre-commit checks for a JavaScript repository, running Prettier, type checking, and tests before each commit.

Install into Claude Code · Plugin marketplace All methods and platforms ↓
/plugin marketplace add mattpocock/skills
/plugin install mattpocock-skills@mattpocock
Open on GitHub

What setup-pre-commit does

setup-pre-commit adds Husky and creates .husky/pre-commit. The hook runs lint-staged, then typecheck and test when those scripts exist in package.json. Prettier handles staged files, while formats it cannot parse are skipped.

The skill detects the package manager from package-lock.json, pnpm-lock.yaml, yarn.lock, or bun.lockb. It installs husky, lint-staged, and prettier, adds prepare: "husky", and creates .lintstagedrc. A .prettierrc file is added only when the repository has no Prettier configuration. Husky is initialized with npx husky init.

It then checks the generated files and runs npx lint-staged. If typecheck or test is missing from package.json, the matching hook line is left out. Install it when commits should enforce formatting and repository checks; projects without those npm scripts will get a smaller hook.

What it helps with

  • add a Husky pre-commit hook
  • format staged files with Prettier
  • run type checking before commits
  • execute tests during commit creation
  • create lint-staged configuration

Example prompts for the agent

  • Set up pre-commit hooks in the current repository.
  • Add Husky with lint-staged and run Prettier, typecheck, and test before commits.
  • Verify the new .husky/pre-commit and create the required config files.

How to install setup-pre-commit

1Plugin marketplace

/plugin marketplace add mattpocock/skills
/plugin install mattpocock-skills@mattpocock

This installs the whole mattpocock-skills plugin with all its skills

2Skills CLI (Vercel)

npx skills add mattpocock/skills --skill setup-pre-commit -a claude-code

3Manually: put the files in place

~/.claude/skills/setup-pre-commit/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/setup-pre-commit/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about setup-pre-commit

How do I install setup-pre-commit in Claude Code?

Add the marketplace with /plugin marketplace add mattpocock/skills, then install it with /plugin install mattpocock-skills@mattpocock.

What does setup-pre-commit do?

It configures Husky, lint-staged, and Prettier in the current repository. The pre-commit hook formats staged files and runs type checking and tests when those scripts exist in package.json.

How does setup-pre-commit choose the package manager?

It checks for package-lock.json, pnpm-lock.yaml, yarn.lock, or bun.lockb. If no lock file identifies a manager, it uses npm.

Source text

SKILL.md · MIT
---
name: setup-pre-commit
description: Set up Husky pre-commit hooks with lint-staged (Prettier), type checking, and tests in the current repo. Use when user wants to add pre-commit hooks, set up Husky, configure lint-staged, or add commit-time formatting/typechecking/testing.
---

# Setup Pre-Commit Hooks

## What This Sets Up

- **Husky** pre-commit hook
- **lint-staged** running Prettier on all staged files
- **Prettier** config (if missing)
- **typecheck** and **test** scripts in the pre-commit hook

## Steps

### 1. Detect package manager

Check for `package-lock.json` (npm), `pnpm-lock.yaml` (pnpm), `yarn.lock` (yarn), `bun.lockb` (bun). Use whichever is present. Default to npm if unclear.

### 2. Install dependencies

Install as devDependencies:

```
husky lint-staged prettier
```

### 3. Initialize Husky

```bash
npx husky init
```

This creates `.husky/` dir and adds `prepare: "husky"` to package.json.

### 4. Create `.husky/pre-commit`

Write this file (no shebang needed for Husky v9+):

```
npx lint-staged
npm run typecheck
npm run test
```

**Adapt**: Replace `npm` with detected package manager. If repo has no `typecheck` or `test` script in package.json, omit those lines and tell the user.

### 5. Create `.lintstagedrc`

```json
{
  "*": "prettier --ignore-unknown --write"
}
```

### 6. Create `.prettierrc` (if missing)

Only create if no Prettier config exists. Use these defaults:

```json
{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": false,
  "trailingComma": "es5",
  "semi": true,
  "arrowParens": "always"
}
```

### 7. Verify

- [ ] `.husky/pre-commit` exists and is executable
- [ ] `.lintstagedrc` exists
- [ ] `prepare` script in package.json is `"husky"`
- [ ] `prettier` config exists
- [ ] Run `npx lint-staged` to verify it works

### 8. Commit

Stage all changed/created files and commit with message: `Add pre-commit hooks (husky + lint-staged + prettier)`

This will run through the new pre-commit hooks: a good smoke test that everything works.

## Notes

- Husky v9+ doesn't need shebangs in hook files
- `prettier --ignore-unknown` skips files Prettier can't parse (images, etc.)
- The pre-commit runs lint-staged first (fast, staged-only), then full typecheck and tests

© Matt Pocock · MIT · mattpocock/skills

Similar skills

Everything for DevOps and infrastructure →
caveman-commit JuliusBrussee Generates terse Conventional Commits messages focused strictly on intent. Ideal for keeping git history clean without boilerplate or AI signatures. CX Codex +1 415,800installs git-commit official github This skill reviews Git changes, stages related files, and creates Conventional Commits. Use it when you want an agent to make one commit or split work into separate commits. 47,165installs arize-annotation official arize Creates annotation schemas and review queues in Arize, then updates span labels through the Python SDK. Use it for human review workflows. 1,100installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs using-git-worktrees Jesse Vincent Prepares an isolated workspace before feature work or plan execution. It checks the repository first, then uses native worktree support or Git. CX Codex 217,153installs finishing-a-development-branch Jesse Vincent This skill checks the test suite and guides branch completion: merge locally, open a Pull Request, or leave the work in place. CX Codex 214,439installs orca-cli stablyai The skill lets an agent manage Orca worktrees, terminals, artifacts and the built-in browser through the orca CLI. Useful when your work already runs inside Orca. CX Codex +1 353,600installs google-agents-cli-publish official Google Walks a coding agent through agents-cli publish gemini: ADK and A2A registration modes, flags, metadata auto-detection and Agent Registry entries. CX Codex +1 511,900installs

From the same set32

The whole set →

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor