ci-fix

ryo-yama55's avatarfrom ryo-yama55

Diagnose and fix CI/CD failures related to Lint errors and test failures. Use when: (1) User mentions CI/CD failures, lint errors, or test failures, (2) User asks to fix code quality issues or make tests pass, (3) User requests to check or verify code before committing/pushing, (4) Working on a task that requires running lint or tests to validate changes. This skill provides systematic workflows for identifying, diagnosing, and fixing common Lint and test errors in TypeScript/React projects using ESLint, Prettier, and Vitest.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 2, 2026
[CI and CD]

When & Why to Use This Skill

This Claude skill automates the diagnosis and resolution of CI/CD pipeline failures, specifically focusing on Lint errors and unit test failures in TypeScript and React environments. It streamlines the development workflow by providing systematic steps to identify, auto-fix, and verify code quality issues using industry-standard tools like ESLint, Prettier, and Vitest, ensuring a seamless path from local development to successful deployment.

Use Cases

  • Fixing CI/CD pipeline blocks caused by Prettier formatting inconsistencies or ESLint rule violations through automated 'lint --fix' workflows.
  • Diagnosing and resolving failing Vitest unit tests in React applications by analyzing test intent versus implementation behavior.
  • Performing pre-commit code quality audits to ensure all linting and testing criteria are met before pushing changes to remote repositories.
  • Systematically refactoring TypeScript code to eliminate 'any' types and other technical debt identified during the CI process.
  • Automating the generation of standardized, Japanese-language commit messages and PR descriptions after successful local verification of fixes.
nameci-fix
description"Diagnose and fix CI/CD failures related to Lint errors and test failures. Use when: (1) User mentions CI/CD failures, lint errors, or test failures, (2) User asks to fix code quality issues or make tests pass, (3) User requests to check or verify code before committing/pushing, (4) Working on a task that requires running lint or tests to validate changes. This skill provides systematic workflows for identifying, diagnosing, and fixing common Lint and test errors in TypeScript/React projects using ESLint, Prettier, and Vitest."

CI Fix

Overview

This skill provides systematic workflows for diagnosing and fixing CI/CD failures caused by Lint errors and test failures. It covers common error patterns in TypeScript/React projects and provides step-by-step remediation procedures.

Workflow

Step 1: Run Lint Check

Execute lint check to identify code quality issues:

cd app && npm run lint

Check:

  • Error count
  • Error types (Prettier, TypeScript, ESLint)
  • Affected files

Auto-fix attempt:

cd app && npm run lint -- --fix

Most Prettier formatting errors can be auto-fixed with the --fix flag.

Step 2: Run Unit Tests

Execute unit tests (excluding Storybook tests):

cd app && npm run test -- --run --project=unit

Check:

  • Pass/fail count
  • Failed test names and error messages
  • Stack traces

Step 3: Diagnose Errors

For detailed error patterns and fixes:

Lint errors:

  • See references/lint_errors.md for:
    • Prettier formatting errors
    • TypeScript any type errors
    • Storybook import warnings
    • ESLint rule violations

Test errors:

  • See references/test_errors.md for:
    • Expectation mismatches
    • Mock function issues
    • React act() warnings
    • Timeout errors
    • Common stderr messages (informational only)

Step 4: Fix Errors

Apply fixes based on diagnosis:

  1. Auto-fixable errors: Already fixed by --fix command
  2. Manual fixes: Follow patterns in reference files
  3. Test fixes: Determine whether to fix test or implementation based on specification

Key decision point for test failures:

  • Read test code → Understand intent
  • Read implementation → Understand behavior
  • Check specification/requirements
  • Decide: Fix test or fix implementation?

Step 5: Verify Fixes

Re-run checks to confirm all errors are resolved:

# Verify lint
cd app && npm run lint

# Verify tests
cd app && npm run test -- --run --project=unit

Success criteria:

  • Lint: 0 errors
  • Tests: All passing (e.g., 124/124 passed)

Step 6: Commit & Create PR

Follow project commit conventions (Japanese commit messages):

git add .
git commit -m "$(cat <<'EOF'
fix: Lintエラーとテストエラーを修正

- Prettierフォーマットエラーを自動修正
- TypeScript any型を明示的な型に変更
- テストの期待値を仕様に合わせて修正

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
EOF
)"

Create PR with:

  • Title: Same as first commit line
  • Description: Detailed changes in Japanese
  • Test plan checklist

Quick Reference

Common Commands

# Lint check
cd app && npm run lint

# Auto-fix lint errors
cd app && npm run lint -- --fix

# Run unit tests only
cd app && npm run test -- --run --project=unit

# Build check (optional)
cd app && npm run build

Pre-commit Checklist

Before committing fixes:

  • npm run lint returns 0 errors
  • npm run test -- --run --project=unit all tests pass
  • Changes align with specifications
  • Commit message follows project conventions
  • PR description is complete

Resources

references/

  • lint_errors.md: Detailed Lint error patterns and fixes

    • Prettier formatting
    • TypeScript any types
    • Storybook imports
    • ESLint rules

  • test_errors.md: Detailed test error patterns and fixes

    • Expectation mismatches
    • Mock setup issues
    • Async handling
    • React warnings

Notes

  • stderr messages: Many stderr messages during tests are intentional (error handling tests) - focus on whether tests pass/fail
  • Storybook tests: Separate project - if unit tests pass, Storybook test failures can be addressed separately
  • Specification priority: When in doubt, check project docs (/.claude/CLAUDE.md, /aidlc-docs/) to determine correct behavior