developer coding skill risk: low
Husky Pre-Commit Hooks Setup Guide
Instructs the model to detect the package manager, install husky/lint-staged/prettier as devDependencies, initialize Husky, create .husky/pre-commit, .lintstagedrc, and optional .p…
- External action: medium
SKILL 1 file
SKILL.md
---
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
REQUIRED CONTEXT
- current repository state
- package manager lockfile
ROLES & RULES
- Detect package manager by checking lockfiles
- Install husky lint-staged prettier as devDependencies
- Initialize Husky with npx husky init
- Create .husky/pre-commit containing the three commands
- Adapt commands to use the detected package manager
- Omit typecheck or test lines if the scripts are absent and tell the user
- Create .lintstagedrc with the given JSON
- Create .prettierrc only if no Prettier config exists
- Verify the listed checklist items
- Stage all changed files and commit with the exact message
EXPECTED OUTPUT
- Format
- markdown
- Constraints
- follow the exact numbered steps
- adapt commands to detected package manager
- omit missing scripts
- verify all checklist items
SUCCESS CRITERIA
- All listed files exist and are correct
- prepare script equals husky
- lint-staged runs successfully
CAVEATS
- Ambiguities
- Does not specify exact logic for 'if unclear' when detecting package manager
- Does not define how to check for existing Prettier config (file names or package.json field)
QUALITY
- OVERALL
- 0.70
- CLARITY
- 0.90
- SPECIFICITY
- 0.85
- REUSABILITY
- 0.35
- COMPLETENESS
- 0.80
IMPROVEMENT SUGGESTIONS
- Add explicit placeholders or variables for package manager commands to improve reusability across templates
- Specify supported project types or required preconditions (e.g., existing package.json)
USAGE
Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.
MORE FOR DEVELOPER
- Context7 Library Documentation Expertdevelopercoding
- Structured Python Production Code Generatordevelopercoding
- Angular Standalone Directive Generatordevelopercoding
- Pytest Unit Test Suite Generatordevelopercoding
- Unity Architecture Specialistdevelopercoding
- Web Typography CSS Generatordevelopercoding
- VSCode CodeTour File Expertdevelopercoding
- Senior Python Code Reviewerdevelopercoding
- Structured Cross-Language Code Translatordevelopercoding
- Multi-DB SQL Query Optimizer and Builderdevelopercoding
- Base R Programming Reference Guidedevelopercoding
- Flutter Map SDK Layer Bug Fixerdevelopercoding
- Expert Mobile App Builder for iOS Androiddevelopercoding
- Scalable Backend Architect Expertdevelopercoding
- Comprehensive TypeScript Codebase Reviewerdevelopercoding
- Code Improvement and Refactoring Suggesterdevelopercoding
- Vercel SPA Blank Screen Diagnoserdevelopercoding
- CLAUDE.md File Generator for AI Codersdevelopercoding
- App Store Screenshots Gallery Generatordevelopercoding
- Spring Boot SOLID Architect Specialistdevelopercoding
- React SaaS Metrics Dashboard Generatordevelopercoding
- Software Optimization Auditordevelopercoding
- Senior Frontend Task Checklist Architectdevelopercoding
- POSIX Shell Script Developer with Checklistsdevelopercoding
- Astro v6 Strict Architecture Rulesdevelopercoding