From claude-initial-setup
Set up automated code quality tools: ESLint, Prettier, pre-commit hooks, and CI linting. Activate whenever the user sets up a new project, asks about code formatting, configures linters, sets up Git hooks, or mentions Husky, lint-staged, CODEOWNERS, or pre-commit hooks. Also activate when discussing consistent code style enforcement.
npx claudepluginhub versoxbt/claude-initial-setup --plugin claude-initial-setupThis skill uses the workspace's default tool permissions.
Automate code quality enforcement with linters, formatters, pre-commit hooks, and CI
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Automate code quality enforcement with linters, formatters, pre-commit hooks, and CI checks. Catch issues before human review so reviewers can focus on logic and design.
Modern flat config for TypeScript projects.
// eslint.config.js
import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
import eslintPluginImport from 'eslint-plugin-import';
export default tseslint.config(
eslint.configs.recommended,
...tseslint.configs.recommended,
{
rules: {
// Prevent common bugs
'no-console': 'warn',
'no-debugger': 'error',
'no-unused-vars': 'off',
'@typescript-eslint/no-unused-vars': ['error', {
argsIgnorePattern: '^_',
varsIgnorePattern: '^_',
}],
// Enforce code quality
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/no-explicit-any': 'warn',
'@typescript-eslint/no-non-null-assertion': 'warn',
// Import organization
'import/order': ['error', {
groups: ['builtin', 'external', 'internal', 'parent', 'sibling'],
'newlines-between': 'always',
alphabetize: { order: 'asc' },
}],
},
},
{
ignores: ['dist/', 'node_modules/', 'coverage/'],
}
);
Set up Prettier for consistent formatting.
// .prettierrc
{
"semi": true,
"singleQuote": true,
"trailingComma": "all",
"printWidth": 100,
"tabWidth": 2,
"arrowParens": "avoid",
"endOfLine": "lf"
}
// .prettierignore
dist
node_modules
coverage
pnpm-lock.yaml
package-lock.json
// package.json scripts
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"format": "prettier --write .",
"format:check": "prettier --check ."
}
}
Run linters only on staged files for fast feedback.
# Install
npm install -D husky lint-staged
npx husky init
// package.json
{
"lint-staged": {
"*.{ts,tsx,js,jsx}": [
"eslint --fix",
"prettier --write"
],
"*.{json,md,yml,yaml}": [
"prettier --write"
],
"*.{css,scss}": [
"prettier --write"
]
}
}
# .husky/pre-commit
npx lint-staged
# .husky/commit-msg (optional: enforce conventional commits)
npx --no -- commitlint --edit "$1"
Use the pre-commit framework with Ruff for Python projects.
# .pre-commit-config.yaml
repos:
- repo: https://github.com/pre-commit/pre-commit-hooks
rev: v4.5.0
hooks:
- id: trailing-whitespace
- id: end-of-file-fixer
- id: check-added-large-files
args: ['--maxkb=500']
- repo: https://github.com/astral-sh/ruff-pre-commit
rev: v0.3.0
hooks:
- id: ruff
args: [--fix]
- id: ruff-format
pip install pre-commit && pre-commit install
Automatically assign reviewers based on file ownership.
# .github/CODEOWNERS
# Default owners for everything
* @team-lead
# Frontend team owns UI code
/src/components/ @frontend-team
/src/hooks/ @frontend-team
/src/styles/ @frontend-team
# Backend team owns API and database
/src/api/ @backend-team
/src/db/ @backend-team
/src/middleware/ @backend-team
# Security-sensitive files require security review
/src/auth/ @security-team @backend-team
Run quality checks in CI to block merging of non-conforming code.
# .github/workflows/quality.yml
name: Code Quality
on:
pull_request:
branches: [main, develop]
jobs:
lint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 20
cache: 'npm'
- run: npm ci
- run: npm run lint
- run: npm run format:check
- run: npx tsc --noEmit
--no-verify as a habit instead of fixing the issue.prettierrc causing inconsistent formatting across editors| Tool | Purpose | Config File |
|---|---|---|
| ESLint | Catch bugs and enforce patterns | eslint.config.js |
| Prettier | Consistent formatting | .prettierrc |
| Husky | Git hook management | .husky/ |
| lint-staged | Run tools on staged files only | package.json or .lintstagedrc |
| commitlint | Enforce commit message format | commitlint.config.js |
| CODEOWNERS | Auto-assign reviewers | .github/CODEOWNERS |
| Ruff | Python linting + formatting | pyproject.toml |
| pre-commit | Python/polyglot hook framework | .pre-commit-config.yaml |
| Setup Order |
|---|
| 1. Prettier (formatting baseline) |
| 2. ESLint (bug catching, disable style rules handled by Prettier) |
| 3. Husky + lint-staged (pre-commit enforcement) |
| 4. CI pipeline (final gate) |
| 5. CODEOWNERS (reviewer assignment) |