| title | auto-format-on-edit |
| name | auto-format-on-edit |
| description | Automatically format code files after every edit using Prettier and ESLint. Active in the background whenever Claude edits a file. Formatting is silent — no prompts, no output unless a formatter fails. Use when you want consistent formatting enforced automatically during a coding session. |
| user-invocable | false |
| allowed-tools | Bash(npx prettier *) Bash(npx eslint *) |
| hooks | {"PostToolUse":[{"matcher":"Edit|Write","hooks":[{"type":"command","command":"bash ${CLAUDE_SKILL_DIR}/scripts/format.sh"}]}]} |
Formatting is applied automatically after every file edit via the PostToolUse hook defined in this skill's frontmatter. You do not need to run any formatter manually.
What happens after each edit
When Claude uses the Edit or Write tool on any file, the PostToolUse hook fires and runs scripts/format.sh. That script:
- Reads the edited file path from the hook input JSON
- Checks whether the file has a recognized extension (.js, .ts, .jsx, .tsx, .css, .json, .md)
- Runs
npx prettier --write on the file if Prettier is available
- Runs
npx eslint --fix on the file if ESLint is available and the file is a script type (.js, .ts, .jsx, .tsx)
- Exits 0 regardless of outcome — formatting failures are never allowed to block edits
What is not formatted
- Binary files
- Files outside recognized extensions
- Files in node_modules, dist, .git, or similar directories
- Files where the formatter is not installed
If the user asks why files look different after editing
Explain that auto-format-on-edit is active. It runs Prettier and ESLint after each edit to enforce consistent formatting. To disable it, remove or deactivate this skill.
If a formatter produces unexpected results
Ask the user to check their .prettierrc or .eslintrc configuration files. The skill runs formatters with whatever project-level configuration is present — it does not override formatter settings.
