setup-pre-commit
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
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
More from marclelamy/skills
builder-review-loop
Use when one agent is implementing code and another agent must review the resulting changes, compare the summary against the actual files, decide whether to fix now or move on, and write the next tightly scoped prompt with context handoff guidance.
10code-commenting
Code commenting conventions for TypeScript/React projects. Use when adding comments to new files, reviewing uncommented code, or when user asks to document/comment code. Covers file headers, type annotations, function docs, inline comments, and what NOT to comment.
9frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
9find-skills
Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.
9marketing-ideas
When the user needs marketing ideas, inspiration, or strategies for their SaaS or software product. Also use when the user asks for 'marketing ideas,' 'growth ideas,' 'how to market,' 'marketing strategies,' 'marketing tactics,' 'ways to promote,' 'ideas to grow,' 'what else can I try,' 'I don't know how to market this,' 'brainstorm marketing,' or 'what marketing should I do.' Use this as a starting point whenever someone is stuck or looking for inspiration on how to grow. For specific channel execution, see the relevant skill (paid-ads, social-content, email-sequence, etc.).
8tdd
Test-driven development with red-green-refactor loop. Use when user wants to build features or fix bugs using TDD, mentions "red-green-refactor", wants integration tests, or asks for test-first development.
8