How to Configure Pre-Commit Hooks with lint-staged Using the setup-pre-commit Skill

The setup-pre-commit skill automates the configuration of pre-commit hooks by integrating Husky, lint-staged, and Prettier to format staged files and run validations before every commit.

The mattpocock/skills repository provides a declarative automation that eliminates manual boilerplate when you configure pre-commit hooks with lint-staged using setup-pre-commit in JavaScript and TypeScript projects. According to the source specification in setup-pre-commit/SKILL.md, the skill detects your package manager, installs the required dependencies, and generates executable Git hooks that enforce code quality standards automatically.

How the Skill Automates the Pipeline

Husky for Git Hook Management

The skill executes npx husky init to scaffold the .husky/ directory and automatically adds a prepare script to package.json. According to lines 31-38 of setup-pre-commit/SKILL.md, this initialization ensures Git hooks are automatically installed when developers clone the repository and run npm install.

lint-staged for Fast Staged-File Execution

The skill generates a .lintstagedrc file that configures lint-staged to run prettier --ignore-unknown --write exclusively on staged files via the "*" glob pattern. This targeted approach, defined in lines 49-55 of setup-pre-commit/SKILL.md, ensures the pre-commit hook executes in seconds rather than reformatting the entire codebase.

Prettier for Code Style Enforcement

When no existing Prettier configuration is detected, the skill creates a .prettierrc file with sensible defaults including tabWidth: 2, printWidth: 80, and semi: true. These settings are specified in lines 57-70 of setup-pre-commit/SKILL.md and ensure consistent formatting across the team.

Package Manager Detection and Dependencies

Before installing dependencies, the skill inspects lock files to determine the correct package manager: package-lock.json for npm, pnpm-lock.yaml for pnpm, yarn.lock for Yarn, or bun.lockb for Bun, falling back to npm if none are present (lines 17-20 of setup-pre-commit/SKILL.md). The skill then installs husky, lint-staged, and prettier as devDependencies using the detected tool and generates hook scripts using the appropriate run commands (e.g., pnpm run instead of npm run).

Generated Configuration Files

The Pre-Commit Hook Script

The skill creates an executable .husky/pre-commit file that orchestrates the validation pipeline:

npx lint-staged
npm run typecheck   # omitted automatically if script missing

npm run test        # omitted automatically if script missing

As defined in lines 37-45 of setup-pre-commit/SKILL.md, the skill intelligently omits the type-checking and testing lines if those scripts do not exist in package.json, preventing commit failures.

The Lint-Staged Configuration

The .lintstagedrc file maps all staged files to the Prettier command:

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

Default Prettier Options

If no Prettier configuration exists, the skill writes .prettierrc with these optimized defaults:

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

Verifying the Installation

After the skill completes, verify the setup by confirming that .husky/pre-commit exists and is executable, the prepare script in package.json contains "husky", and both .lintstagedrc and .prettierrc are present in your repository root. You can test hook executability by running test -x .husky/pre-commit && echo "Hook is executable" in your terminal.

Summary

• The setup-pre-commit skill automates the complete workflow to configure pre-commit hooks with lint-staged using setup-pre-commit as specified in setup-pre-commit/SKILL.md.
• It supports npm, pnpm, Yarn, and Bun by detecting their respective lock files and adapting commands accordingly.
• The generated .husky/pre-commit hook runs lint-staged first for formatting, then optionally executes typecheck and test scripts only if they exist in package.json.
• Configuration files .lintstagedrc and .prettierrc are scaffolded automatically with optimized defaults that enforce consistent code style.

Frequently Asked Questions

Which package managers does setup-pre-commit support?

The skill automatically detects npm, pnpm, Yarn, and Bun by scanning for their respective lock files (package-lock.json, pnpm-lock.yaml, yarn.lock, bun.lockb), defaulting to npm if no lock file is present, as implemented in lines 17-20 of setup-pre-commit/SKILL.md.

What happens if my project lacks typecheck or test scripts?

The skill intelligently omits calls to these scripts from the generated .husky/pre-commit hook if they are not defined in package.json, ensuring the commit proceeds after linting and formatting without throwing "missing script" errors (lines 37-45 of setup-pre-commit/SKILL.md).

How does the skill configure Prettier?

If no existing Prettier configuration is found, the skill creates a .prettierrc file with sensible defaults including 2-space indentation, 80-character print width, and semicolons enabled, as defined in lines 57-70 of setup-pre-commit/SKILL.md.

Why does the hook use lint-staged instead of running Prettier directly?

lint-staged executes Prettier only on files staged for commit via the "*" glob pattern in .lintstagedrc, which keeps the hook execution fast and avoids unnecessary reformatting of unchanged files in large repositories.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}