setup-pre-commit
Setup Pre-Commit Hooks
Pre-loaded context
Before proceeding, use the Read tool to read package.json, and Glob tool to detect:
- Lock file:
package-lock.json,pnpm-lock.yaml,yarn.lock,bun.lockb - Prettier config:
.prettierrc,.prettierrc.*,prettier.config.*
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 (if they exist)
Workflow
-
Detect package manager from lock file:
package-lock.json(npm),pnpm-lock.yaml(pnpm),yarn.lock(yarn),bun.lockb(bun). Default to npm if unclear. -
Install devDependencies:
husky lint-staged prettier -
Initialize Husky:
npx husky initThis creates
.husky/dir and addsprepare: "husky"to package.json. -
Create
.husky/pre-commit(no shebang needed for Husky v9+):npx lint-staged <pm> run typecheck <pm> run testReplace
<pm>with detected package manager. If repo has notypecheckscript in package.json, omit that line and tell the user. Same fortest. -
Create
.lintstagedrc:{ "*": "prettier --ignore-unknown --write" } -
Create
.prettierrc(only if no Prettier config exists):{ "useTabs": false, "tabWidth": 2, "singleQuote": true, "trailingComma": "all" } -
Verify:
.husky/pre-commitexists and is executable.lintstagedrcexistspreparescript in package.json is"husky"- Prettier config exists
- Run
npx lint-stagedto confirm it works
-
Commit all changed/created files:
Add pre-commit hooks (husky + lint-staged + prettier)This runs through the new pre-commit hooks -- a good smoke test.
Rules
- Never overwrite existing Prettier config
- Never overwrite existing
.husky/pre-commitwithout asking user first - Always use detected package manager consistently
- Husky v9+ doesn't need shebangs in hook files
prettier --ignore-unknownskips files Prettier can't parse (images, etc.)- Pre-commit runs lint-staged first (fast, staged-only), then full typecheck and tests
Error Handling
- No
package.jsonfound -- report and stop - Existing
.husky/pre-commit-- ask user before overwriting husky initfails -- check node_modules exists, suggest running install firstnpx lint-stagedverification fails -- check Prettier is installed, check.lintstagedrcsyntax- No
typecheckortestscripts -- omit from hook, tell user which were skipped
See Also
- validate-code -- run lint/typecheck/tests manually
- commit -- create git commits following repo style
More from helderberto/skills
explain-code
Explains code with visual diagrams and analogies. Use when explaining how code works, teaching about a codebase, or when the user asks "how does this work?" Don't use for modifying code, fixing bugs, or generating new implementations.
45ship
Commit and push changes using atomic commits. Use when user asks to "ship", "commit and push", or requests committing and pushing changes. Don't use for creating pull requests or reviewing changes before committing.
45safe-repo
Check for sensitive data in repository. Use when user asks to "check for sensitive data", "/safe-repo", or wants to verify no company/credential data is in the repository. Don't use for general code review, adding .gitignore entries, or scanning non-git directories.
41coverage
Check test coverage for unstaged changes. Use when user asks to "check coverage", "/coverage", or wants to see which unstaged changes lack test coverage. Don't use for projects without lcov coverage output, running the full test suite without coverage, or checking coverage of already-committed changes.
38e2e
Write end-to-end tests for user flows using Cypress. Use when user asks to "write e2e tests", "/e2e", "add Cypress tests", or wants to test a user flow end-to-end. Don't use for unit tests, component tests, or projects using Playwright, Puppeteer, or other non-Cypress frameworks.
29perf-audit
Audit frontend bundle size and performance. Use when user asks to "audit performance", "/perf-audit", "analyze bundle", "check bundle size", or wants to find performance bottlenecks. Don't use for backend performance, database query optimization, or projects without a frontend build step.
29