
Setup Pre-Commit Hooks
FreeAutomate your pre-commit process with Husky and lint-staged.
Free · Opens the source repo
What Setup Pre-Commit Hooks does
The Setup Pre-Commit Hooks skill streamlines the process of setting up pre-commit hooks in your repository using Husky and lint-staged. This skill is particularly useful for developers looking to enforce code quality and consistency by automatically formatting code, performing type checks, and running tests before commits. By integrating tools like Prettier, this skill ensures that your codebase adheres to defined styling rules, reducing the likelihood of style-related issues in your project.
When you activate this skill, it intelligently detects your package manager (npm, pnpm, yarn, or bun) and installs the necessary dependencies, including Husky, lint-staged, and Prettier. It then initializes Husky in your project, creating the necessary configuration files and scripts to automate the pre-commit process. The skill also sets up lint-staged to run Prettier on all staged files, ensuring that only the files you intend to commit are formatted correctly.
Moreover, the skill includes checks to create a Prettier configuration file if one does not already exist, ensuring that your project has a consistent formatting standard. The pre-commit hook is designed to run lint-staged first for efficiency, followed by type checking and testing if those scripts are defined in your package.json. This structured approach helps maintain high code quality and can save time during code reviews and merges.
This skill is ideal for teams and individual developers who want to implement a robust pre-commit workflow without manual setup. It simplifies the process of adding essential checks and formatting to your development workflow, making it easier to maintain a clean and functional codebase.
When to use it
Use this skill when you want to implement pre-commit hooks in your repository for linting, formatting, and testing.
When not to use it
This skill may not be suitable if your project does not use a supported package manager or if you prefer to manage pre-commit hooks manually.
What you can build with it
Implementing Code Standards
A team wants to ensure that all code adheres to specific formatting and quality standards before it gets committed.
Automating Testing
A developer seeks to automate running tests and type checks to catch errors early in the development process.
Streamlining Onboarding
New team members need a quick way to set up pre-commit hooks in their local repositories to maintain consistency.
How to install Setup Pre-Commit Hooks
View source1. Install with the skills CLI
npx skills add mattpocock/skills/setup-pre-commit --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by mattpocockSetup 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
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
{
"*": "prettier --ignore-unknown --write"
}
6. Create .prettierrc (if missing)
Only create if no Prettier config exists. Use these defaults:
{
"useTabs": false,
"tabWidth": 2,
"printWidth": 80,
"singleQuote": false,
"trailingComma": "es5",
"semi": true,
"arrowParens": "always"
}
7. Verify
-
.husky/pre-commitexists and is executable -
.lintstagedrcexists -
preparescript in package.json is"husky" -
prettierconfig exists - Run
npx lint-stagedto 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-unknownskips files Prettier can't parse (images, etc.)- The pre-commit runs lint-staged first (fast, staged-only), then full typecheck and tests
Frequently asked questions about Setup Pre-Commit Hooks
Similar skills
Turborepo
Optimized build system for JavaScript/TypeScript monorepos.
Azure Pipelines Validation
Streamline your Azure DevOps pipeline changes locally.
Azure Developer CLI
Streamline your Azure project workflows with best practices.
Azure Container Registry CLI
Manage Azure Container Registry resources with ease.
Aspire
Build and orchestrate polyglot distributed applications seamlessly.
Vercel CLI
Manage and deploy Vercel projects from the command line.
