Bulk-Fixing 200 Components with Claude Code — The Full Pipeline of Classification, Fixing, and Verification

#Introduction

This portfolio site has 211 interactive components. Fluid simulation, piano, maze generation, pinball — the result of continuously adding small demos that run in the browser.

The problem is that at this scale, bugs scale proportionally. setTimeout leaks, unhandled AudioContext exceptions, numerical safety issues where NaN flows into Canvas. Each one is small, but manually inspecting and fixing 211 files isn't realistic.

So I used Claude Code to bulk-fix 100+ components in 6 commits. This article is the full record. What worked, what failed, shared alongside commit hashes and file count data.

#Bulk Fix Results Data

Let's start with the results. The following data is extracted from actual commit logs.

• 08925bcb — 31 files: Comprehensive fix for resource leaks, code quality, and safety
• 04163d8e — 18 files: AudioContext error handling, mountedRef guards, clipboard safety
• f51f0c83 — 15 files: Module-level mutable state elimination, render performance optimization
• 1fc14711 — 8 files: Numerical safety guards, Canvas size validation, system settings tracking
• 7723cfaf — 16 components: Passive event listener additions, touch-action settings, Pointer Events unification
• e129df45 — 7 components: Keyboard accessibility support

A total of 95+ files were fixed. Each commit was limited to a single bug category. This was the most important decision for maintaining accuracy.

#Workflow: "Classify, Bulk Apply, Verify"

The bulk fix proceeded in four steps.

#1. Bug Classification

The first step is "pattern discovery." Scan the 211 components and classify recurring bugs.

Examples of patterns actually found:

• setTimeout/setInterval leaks: Not calling clearTimeout in useEffect cleanup
• AudioContext unhandled: new AudioContext() before user interaction throwing exceptions
• NaN propagation: 1 / width becoming Infinity when canvas.width is 0, breaking rendering
• Module-level state: Holding state like let count = 0 at file scope, breaking on HMR
• mouse → pointer not unified: Writing onMouseDown and onTouchStart separately (should unify to Pointer Events)

This classification phase is done by humans. Claude Code excels at "mass application" of patterns rather than pattern "discovery."

#2. Fix Template Definition

Once classified, define "how to fix" templates for each pattern.

For example, the AudioContext fix template:

// Before: May throw exception
const ctx = new AudioContext()

// After: try-catch + resume() guard
let ctx: AudioContext | null = null
try {
  ctx = new AudioContext()
  if (ctx.state === 'suspended') {
    await ctx.resume()
  }
} catch (e) {
  console.warn('AudioContext initialization failed:', e)
}

Numerical safety template:

// Before: NaN/Infinity propagates
const scale = 1 / canvas.width

// After: With guard
const scale = canvas.width > 0 ? 1 / canvas.width : 1

Writing these templates in CLAUDE.md ensures Claude Code applies them consistently across all files.

#3. Bulk Application

Pass the pattern and template to Claude Code with the instruction "fix all files matching this pattern."

The key here is to handle only one category per session. Requesting both "AudioContext fixes" and "passive listener additions" simultaneously leads to oversights. The context window is the scarcest resource.

The actual session flow:

1. Explain the target pattern (with template)
2. Claude Code scans for matching files
3. Apply fixes
4. Confirm the build passes
5. One commit

#4. Verification

Run bun run build for TypeScript type checking and build. This is the minimum validation. Additionally, manual verification is performed depending on the fix category.

• Canvas fixes → Confirm rendering actually works in a browser
• AudioContext fixes → Confirm audio playback in Safari and Chrome
• Accessibility fixes → Confirm operation with keyboard only

It can't be fully automated, but efficiency is good because "verification criteria are predetermined for each bug category."

#Practices That Worked

Four high-impact practices learned through 6 bulk fixes.

#Validation First

Setting up tests and build checks before handing off to Claude Code improves quality by an estimated 2-3x. When AI has a way to determine "what's correct," the self-correction loop kicks in.

Conversely, without validation means, code that "looks right but is actually broken" proliferates. Adding 97 tests in bulk via vitest was based on this philosophy.

#One Session, One Task

As mentioned, each session handles only one bug category. Commits f51f0c83 (module-level state elimination, 15 files) and 04163d8e (AudioContext fixes, 18 files) were executed in separate sessions.

Mixing not only reduces accuracy but makes review difficult. It's important to maintain granularity where "what changed in this commit" is immediately clear.

#Reference by Name

"Fix it following the same pattern as this file" is the most accurate instruction method. For example:

Use the AudioContext fix pattern from Match3.tsx as reference and apply the same fix to the remaining 17 files.

A concrete code example is overwhelmingly more reproducible than abstract explanations.

#Separate Review Perspectives

Code-level (microscopic) review and specification-level (macroscopic) review are conducted separately.

• Microscopic: "Is clearTimeout called correctly?" "Is the null check missing?"
• Macroscopic: "Has user experience changed with this fix?" "Is there a performance impact?"

Trying to cover both in one review makes both half-baked.

#What Failed

Sharing only successes would be dishonest, so here are the failures too.

#"Fix Everything" Doesn't Work

My first attempt was a blanket "fix all bugs in all components." The results were terrible. The scope was too wide, fix granularity was inconsistent, some files were over-rewritten while others had oversights.

This is where the "one category, one commit" rule was born.

#Mixing Bug Categories

The initial commit 08925bcb (31 files) actually mixed three categories: "resource leaks, code quality, safety." Reviewing this commit took noticeably longer than the other five. The subsequent five commits, limited to one category each, saw drastically reduced review time.

#CLAUDE.md Bloat

Continuously adding rules to the project's CLAUDE.md causes them to stop working at some point. Too many rules competing within the context.

The countermeasure is periodic pruning, deleting "rules that no longer have matching code" and "rules too generic to be useful." Hooks are deterministic, but CLAUDE.md is advisory. Deleting ineffective rules is the best approach.

#Quantitative Results

Sharing project-wide numbers.

• Total commits: 323
• Claude co-authored commits: 82 (about 25%)
• Batch feature commits: 21 (5 new components each)
• Bulk fix commits: 6 (100+ components fixed total)
• Bulk test addition: 97 tests (vitest introduction)

Notable is that while 25% of commits are co-authored with Claude, architecture design and workflow definition are 100% human. What ensures the quality of AI-written code is the "systems" designed by humans.

#Division of Labor with AI

After 6 bulk fixes, the division of labor model with AI became clear.

Human responsibilities:

• Architecture design (Canvas vs. DOM decisions, physics engine design)
• Bug pattern discovery and classification
• Workflow definition (rules like "one category per commit")
• Design goal setting (the directive "maximize dwell time")
• Final quality judgment

AI responsibilities:

• Mass application of pattern-based implementations
• Refactoring (applying the same transformation across many files)
• Bug fixes (when templates are predefined)
• Bulk test generation
• Content generation

The core insight is "running AI within systems." Humans predefine templates, rules, and patterns; AI focuses on selection and placement. Rather than having AI decide "what to build," have it decide "where to apply predefined patterns."

This resembles a factory line. Humans draw the blueprints. AI assembles according to the blueprints. Blueprint quality directly determines output quality.

#Summary: Claude Code Bulk Fixes

Three takeaways from bulk-fixing 211 components.

1. AI excels most at "mass application of patterns"

Applying the same AudioContext fix to 18 files, rewriting mouse events to pointer events across 16 components — AI's accuracy and speed in such repetitive work overwhelms humans.

2. Humans should focus on "pattern discovery and definition"

Noticing "there's a setTimeout leak" is the human's job. Writing the template "add clearTimeout to useEffect cleanup" is also the human's job. Trying to have AI discover patterns significantly reduces accuracy.

3. The secret to bulk fixes is "classification granularity"

One category per commit. That's everything. Keep the scope narrow: AI accuracy improves, review gets easier, and rollback is straightforward if issues arise.

You don't need to fix 200 components one by one. Classify correctly, and 6 operations suffice.