PR Reviewer / Linter Enforcer

When to use this skill

• User asks to lint or format code

• User wants to review code quality before a PR

• User mentions ESLint, Prettier, or stylelint

• User asks to fix formatting or style issues

• User wants to check changed files for violations

• User mentions code consistency or style enforcement

Workflow

• Identify changed files (staged or branch diff)

• Detect available linting tools in project

• Run linters against changed files only

• Collect and categorize issues

• Present issues with fix suggestions

• Apply automatic fixes if requested

• Verify fixes resolved issues

Instructions

Step 1: Identify Changed Files

For staged changes:

git diff --cached --name-only --diff-filter=ACMR

For branch comparison:

git diff --name-only origin/main...HEAD

Filter to lintable files:

git diff --cached --name-only --diff-filter=ACMR | grep -E '.(js|jsx|ts|tsx|vue|css|scss|json|md)$'

Step 2: Detect Available Linters

Check for linter configurations in project root:

Tool Config Files

ESLint .eslintrc.* , eslint.config.* , package.json

Prettier .prettierrc.* , prettier.config.* , package.json

stylelint .stylelintrc.* , stylelint.config.* , package.json

Verify tools are installed:

npm ls eslint prettier stylelint 2>/dev/null || yarn list --pattern "eslint|prettier|stylelint" 2>/dev/null

Step 3: Run Linters on Changed Files

ESLint (JavaScript/TypeScript):

npx eslint --format stylish <files>

With auto-fix preview:

npx eslint --fix-dry-run --format json <files>

Prettier (formatting):

npx prettier --check <files>

Show what would change:

npx prettier --write --list-different <files>

stylelint (CSS/SCSS):

npx stylelint <css-files>

Step 4: Categorize Issues

Group issues by severity and type:

Errors (must fix):

• Syntax errors

• Type errors

• Security vulnerabilities

• Unused variables in critical paths

Warnings (should fix):

• Unused imports

• Missing accessibility attributes

• Deprecated API usage

Style (nice to fix):

• Formatting inconsistencies

• Naming conventions

• Import ordering

Step 5: Present Issues

Format findings clearly:

Linting Report

Errors (3)

Warnings (2)

Formatting (5 files)

• src/components/Card.tsx
• src/hooks/useAuth.ts
• src/pages/Home.tsx
• src/styles/main.css
• src/types/index.ts

Step 6: Apply Fixes

Auto-fix all fixable issues:

npx eslint --fix <files> npx prettier --write <files> npx stylelint --fix <css-files>

Fix specific rule categories:

Only formatting fixes

npx eslint --fix --rule 'indent: error' --rule 'semi: error' <files>

Only import sorting

npx eslint --fix --rule 'import/order: error' <files>

Step 7: Verify Fixes

Re-run linters to confirm resolution:

npx eslint <files> && npx prettier --check <files> && echo "✓ All checks passed"

Configuration Detection

ESLint Config Patterns

Check for flat config (ESLint 9+):

ls eslint.config.{js,mjs,cjs} 2>/dev/null

Check for legacy config:

ls .eslintrc.{js,cjs,json,yml,yaml} 2>/dev/null

Prettier Config Patterns

ls .prettierrc{,.json,.yml,.yaml,.js,.cjs,.mjs} prettier.config.{js,cjs,mjs} 2>/dev/null

Package.json Scripts

Check for existing lint scripts:

npm pkg get scripts.lint scripts.format scripts.style 2>/dev/null

Prefer using project scripts when available:

npm run lint -- --fix npm run format

Common Fix Patterns

Unused Imports

// Before import { useState, useEffect, useCallback } from "react"; // Only useState used

// After import { useState } from "react";

Missing Accessibility

// Before <div onClick={handleClick}>Click me</div>

// After <button type="button" onClick={handleClick}>Click me</button>

Formatting Issues

// Before const obj = { foo: "bar", baz: 42 };

// After const obj = { foo: "bar", baz: 42 };

Integration with Git Hooks

If user wants pre-commit enforcement, suggest:

npx husky add .husky/pre-commit "npx lint-staged"

With lint-staged config in package.json :

{ "lint-staged": { ".{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"], ".{css,scss}": ["stylelint --fix", "prettier --write"], "*.{json,md}": ["prettier --write"] } }

Validation

Before completing:

• All errors are resolved or acknowledged

• Warnings reviewed and addressed where appropriate

• Formatting is consistent

• No new issues introduced by fixes

• Changes staged for commit

Error Handling

• Linter not installed: Run npm install --save-dev <tool> or check if project uses yarn/pnpm.

• No config found: Linter may use defaults. Run npx <tool> --init to create config.

• Command fails: Run npx <tool> --help for available options.

• No changed files: Run git status to verify. May need to stage changes first.

Resources

• ESLint Documentation

• Prettier Documentation

• stylelint Documentation

• lint-staged