Code Formatter
Overview
Formats and validates code files using Prettier and related formatting tools. Supports JavaScript, TypeScript, JSON, CSS, Markdown, and many other file types.
Prerequisites
- Node.js (v16+) and npm/npx installed
- Prettier available globally (
npm install -g prettier) or locally in the project
- Write permissions for target files and configuration directories
- Supported file types present in the project (
.js, .jsx, .ts, .tsx, .json, .css, .md)
Instructions
- Check whether Prettier is available by running
npx prettier --version. If missing, install it locally with npm install --save-dev prettier or globally with npm install -g prettier.
- Detect existing configuration by searching for
.prettierrc, .prettierrc.json, prettier.config.js, or a "prettier" key in package.json. If no configuration exists, create a .prettierrc with sensible defaults (see ${CLAUDE_SKILL_DIR}/references/implementation.md).
- Run
npx prettier --check "**/*.{js,jsx,ts,tsx,json,css,md}" --ignore-path .prettierignore to identify files that need formatting. Report the count and list of non-conforming files.
- Apply formatting to identified files using
npx prettier --write on the target paths. For single files, specify the exact path; for directories, use glob patterns.
- Create or update
.prettierignore to exclude generated outputs (dist/, build/, *.min.js, *.min.css), dependencies (node_modules/, vendor/), and lock files.
- Optionally set up pre-commit enforcement by installing
husky and lint-staged, then configuring lint-staged in package.json to run prettier --write on staged files matching supported extensions.
- Run a final
npx prettier --check to confirm all target files now conform to the configured style rules.
Output
A formatting execution report containing:
- Count of files checked and files reformatted
- List of files that were modified with before/after formatting status
- Configuration file(s) created or updated (
.prettierrc, .prettierignore)
- Any git hook integration changes applied
- Confirmation of final formatting compliance
Error Handling
| Error |
Cause |
Solution |
prettier: command not found |
Prettier not installed globally or locally |
Run npm install -g prettier or npx prettier --version to use npx |
| Syntax errors in source files |
Malformed code that Prettier cannot parse |
Fix syntax errors first using npx eslint --fix-dry-run <file> then retry formatting |
| Configuration conflicts |
Multiple .prettierrc files or conflicting editorconfig |
Locate all config files with find . -name ".prettier*" and consolidate to a single config |
| Permission denied on write |
File or directory lacks write permission |
Run chmod u+w <file> to grant write access |
| Parser not found for file type |
Unsupported file extension or missing Prettier plugin |
Install the appropriate Prettier plugin (e.g., prettier-plugin-svelte) or exclude the file type |
Examples
Format a single file:
Trigger: "Format src/app.js"
Process: Run npx prettier --write src/app.js. Report the file as reformatted or already conformant.
Project-wide formatting setup:
Trigger: "Set up code formatting for this project."
Process: Create .prettierrc with project defaults, create .prettierignore excluding build outputs, run npx prettier --write "src/**/*.{js,ts,json,css}", install husky and lint-staged for pre-commit hooks, verify compliance.
Check formatting without modifying files:
Trigger: "Check formatting across the project."
Process: Run npx prettier --check "**/*.{js,jsx,ts,tsx,json,css,md}". Report non-conforming files with their paths. Suggest npx prettier --write to fix.
Resources
${CLAUDE_SKILL_DIR}/references/implementation.md -- detailed implementation guide with configuration examples${CLAUDE_SKILL_DIR}/references/errors.md -- common error scenarios and solutions- Prettier documentation -- official configuration and CLI reference
- ESLint -- complementary linting and code quality tool
- Husky -- git hooks for pre-commit formatting enforcement
1---
2name: code-formatter-2
3description: |
4 Execute automatically formats and validates code files using Prettier and other formatting tools.
5 Use when users mention "format my code", "fix formatting", "apply code style",
6 "check formatting", "make code consistent", or "clean up code formatting".
7 Handles JavaScript, TypeScript, JSON, CSS, Markdown, and many other file types. Trigger with relevant phrases based on skill purpose.
8allowed-tools: Read, Write, Edit, Grep, Glob, Bash(cmd:*)
9version: 1.0.0
10author: Jeremy Longshore <jeremy@intentsolutions.io>
11license: MIT
12compatible-with: claude-code, codex, openclaw
13tags: [example, typescript, code-formatter]
14
15---
16
17# Code Formatter
18
19## Overview
20
21Formats and validates code files using Prettier and related formatting tools. Supports JavaScript, TypeScript, JSON, CSS, Markdown, and many other file types.
22
23## Prerequisites
24
25- Node.js (v16+) and npm/npx installed
26- Prettier available globally (`npm install -g prettier`) or locally in the project
27- Write permissions for target files and configuration directories
28- Supported file types present in the project (`.js`, `.jsx`, `.ts`, `.tsx`, `.json`, `.css`, `.md`)
29
30## Instructions
31
321. Check whether Prettier is available by running `npx prettier --version`. If missing, install it locally with `npm install --save-dev prettier` or globally with `npm install -g prettier`.
332. Detect existing configuration by searching for `.prettierrc`, `.prettierrc.json`, `prettier.config.js`, or a `"prettier"` key in `package.json`. If no configuration exists, create a `.prettierrc` with sensible defaults (see `${CLAUDE_SKILL_DIR}/references/implementation.md`).
343. Run `npx prettier --check "**/*.{js,jsx,ts,tsx,json,css,md}" --ignore-path .prettierignore` to identify files that need formatting. Report the count and list of non-conforming files.
354. Apply formatting to identified files using `npx prettier --write` on the target paths. For single files, specify the exact path; for directories, use glob patterns.
365. Create or update `.prettierignore` to exclude generated outputs (`dist/`, `build/`, `*.min.js`, `*.min.css`), dependencies (`node_modules/`, `vendor/`), and lock files.
376. Optionally set up pre-commit enforcement by installing `husky` and `lint-staged`, then configuring `lint-staged` in `package.json` to run `prettier --write` on staged files matching supported extensions.
387. Run a final `npx prettier --check` to confirm all target files now conform to the configured style rules.
39
40## Output
41
42A formatting execution report containing:
43- Count of files checked and files reformatted
44- List of files that were modified with before/after formatting status
45- Configuration file(s) created or updated (`.prettierrc`, `.prettierignore`)
46- Any git hook integration changes applied
47- Confirmation of final formatting compliance
48
49## Error Handling
50
51| Error | Cause | Solution |
52|---|---|---|
53| `prettier: command not found` | Prettier not installed globally or locally | Run `npm install -g prettier` or `npx prettier --version` to use npx |
54| Syntax errors in source files | Malformed code that Prettier cannot parse | Fix syntax errors first using `npx eslint --fix-dry-run <file>` then retry formatting |
55| Configuration conflicts | Multiple `.prettierrc` files or conflicting `editorconfig` | Locate all config files with `find . -name ".prettier*"` and consolidate to a single config |
56| Permission denied on write | File or directory lacks write permission | Run `chmod u+w <file>` to grant write access |
57| Parser not found for file type | Unsupported file extension or missing Prettier plugin | Install the appropriate Prettier plugin (e.g., `prettier-plugin-svelte`) or exclude the file type |
58
59## Examples
60
61**Format a single file:**
62Trigger: "Format src/app.js"
63Process: Run `npx prettier --write src/app.js`. Report the file as reformatted or already conformant.
64
65**Project-wide formatting setup:**
66Trigger: "Set up code formatting for this project."
67Process: Create `.prettierrc` with project defaults, create `.prettierignore` excluding build outputs, run `npx prettier --write "src/**/*.{js,ts,json,css}"`, install `husky` and `lint-staged` for pre-commit hooks, verify compliance.
68
69**Check formatting without modifying files:**
70Trigger: "Check formatting across the project."
71Process: Run `npx prettier --check "**/*.{js,jsx,ts,tsx,json,css,md}"`. Report non-conforming files with their paths. Suggest `npx prettier --write` to fix.
72
73## Resources
74
75- `${CLAUDE_SKILL_DIR}/references/implementation.md` -- detailed implementation guide with configuration examples
76- `${CLAUDE_SKILL_DIR}/references/errors.md` -- common error scenarios and solutions
77- [Prettier documentation](https://prettier.io/docs/en/) -- official configuration and CLI reference
78- [ESLint](https://eslint.org/) -- complementary linting and code quality tool
79- [Husky](https://typicode.github.io/husky/) -- git hooks for pre-commit formatting enforcement
jeremylongshore