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