Lint-Staged Configuration Skill

Purpose

Generate lint-staged configuration to automatically fix and format staged files before commit.

🚨 MANDATORY FILE COUNT

This skill MUST create exactly 1 file:

• .lintstagedrc.json (preferred format)

🔍 BEFORE GENERATING - CRITICAL RESEARCH REQUIRED

⚠️ HIGH PRIORITY: Verify current tool CLI flags to prevent outdated commands

Required Research Steps:

1. ESLint CLI Flags: Verify eslint --fix is still the correct flag
   • Check if ESLint CLI has deprecated or changed flags
   • Verify --fix flag still works with current ESLint version
2. Prettier CLI Flags: Verify prettier --write is still correct
   • Check if Prettier CLI has changed flags
   • Verify --write flag syntax hasn't changed
3. Stylelint CLI (if project uses Stylelint):
   • Check package.json for stylelint dependency
   • If found: Verify stylelint --fix is correct flag
   • Include style file patterns in configuration
4. File Patterns: Verify glob patterns work with lint-staged version
   • Check if pattern syntax has changed
   • Verify file extension support (jsx, tsx, css, scss)
5. Command Chaining: Verify array of commands still executes sequentially
6. Alternative Formats: Check if .lintstagedrc.json is still recommended format
   • Verify not deprecated in favor of .lintstagedrc.js or package.json field

Output

Create the file: .lintstagedrc.json

Supported Format:

• .lintstagedrc.json (strict preferred format - simple JSON configuration)

Alternative Formats (only if JSON deprecated):

• .lintstagedrc.js (JavaScript with dynamic logic)
• lint-staged field in package.json
• .lintstagedrc.cjs (CommonJS format)

Example File

See: examples.md in this directory for complete examples and detailed explanations.

⚠️ IMPORTANT: The examples.md file contains December 2025 configurations. Always verify current CLI flags before using.

Execution Checklist

• [ ] Research current ESLint CLI flags (verify --fix)
• [ ] Research current Prettier CLI flags (verify --write)
• [ ] Check if project has Stylelint in package.json
• [ ] If Stylelint found, verify stylelint --fix flag
• [ ] Determine file patterns based on project needs (jsx/tsx/css/scss)
• [ ] Verify lint-staged glob pattern syntax hasn't changed
• [ ] Create .lintstagedrc.json with appropriate commands and patterns
• [ ] Verify JSON format is still recommended (not deprecated)

🛑 BLOCKING VALIDATION CHECKPOINT

STOP! Before proceeding to the next skill, verify:

Automated Verification

Run this command to verify the file exists:

if [ -f ".lintstagedrc.json" ] || [ -f ".lintstagedrc.js" ] || [ -f ".lintstagedrc.cjs" ] || grep -q "lint-staged" package.json 2>/dev/null; then
  echo "✓ Lint-staged configuration found"
  if [ -f ".lintstagedrc.json" ]; then
    echo "✓ Using .lintstagedrc.json (preferred format)"
    # Validate JSON syntax
    if command -v jq >/dev/null 2>&1; then
      jq empty .lintstagedrc.json && echo "✓ Valid JSON syntax" || echo "✗ Invalid JSON syntax"
    fi
  fi
else
  echo "✗ Lint-staged configuration missing"
  exit 1
fi

Manual Verification

1. ✓ .lintstagedrc.json exists at project root
2. ✓ File contains valid JSON syntax
3. ✓ File includes ESLint command with current flags
4. ✓ File includes Prettier command with current flags
5. ✓ File patterns match project file types (js/ts/vue, optionally jsx/tsx/css/scss)
6. ✓ Commands use current CLI flags (not deprecated)
7. ✓ If Stylelint in project, style files have stylelint command

If Validation Fails

DO NOT PROCEED to the next skill. Create or fix the missing/incorrect file immediately.

Notes

• ESLint Auto-Fix: Runs eslint --fix on JS/TS/Vue files (verify flag current)
• Prettier Formatting: Runs prettier --write on code and config files (verify flag current)
• Fast and Efficient: Only processes staged files, not entire codebase
• Husky Integration: Works with pre-commit hook for automated quality checks
• Prevents Bad Commits: Blocks commits that don't meet linting standards
• Sequential Execution: Commands in array run sequentially for each file
• File Patterns: Supports glob patterns (*.{js,ts,vue}, *.{css,scss})
• Extended Patterns: Include jsx/tsx if React, css/scss if using style files
• Stylelint Optional: Only include if project has stylelint in package.json
• Always verify current CLI flags - Tools may change flag syntax
• JSON Format Preferred: Simple, declarative, works without build step
• Command Arrays: Multiple commands per pattern run sequentially on same files