Module 5: Advanced TechniquesLesson 2 of 6

Lesson 2·4 min

Multi-file Edits

Handle changes across multiple files efficiently

Multi-file Edits

Real features touch multiple files. Here's how to handle coordinated changes.

The Challenge

A feature might require changes to:

Component file
Styling file
Type definitions
Tests
Documentation

Terminal

> Add a review system for coffee shops

Claude: This will require changes to:

📄 Create: src/components/ReviewForm.tsx

📄 Create: src/components/ReviewList.tsx

📄 Edit: src/types/index.ts (add Review type)

📄 Edit: src/app/shop/[id]/page.tsx (add reviews section)

📄 Create: src/lib/reviews.ts (API functions)

📄 Edit: supabase/schema.sql (add reviews table)

Proceed with all changes? [Y/n]

▌

Tip

Review the list of files before approving. Make sure it makes sense!

Staged Approach

For complex changes, ask Claude to go step by step:

Terminal

> Add a review system. Let's do it in stages:

> 1. First, create the database schema

> 2. Then the API functions

> 3. Then the components

> 4. Finally, integrate into the page

> Let's start with step 1.

Claude: Starting with the database schema...

📄 Edit: supabase/schema.sql

Proceed? [Y/n]

▌

Referencing Related Files

Terminal

> The ReviewForm component should match the styling of @components/ContactForm.tsx

> Use the same validation pattern as @lib/validators.ts

> Follow the type conventions in @types/index.ts

▌

Coordinating Types

Terminal

> Add a Review type to types/index.ts and use it in both ReviewForm and ReviewList

Claude: I'll add the type and ensure both components use it:

types/index.ts:

export interface Review {

id: string;

shopId: string;

rating: number;

comment: string;

authorName: string;

createdAt: string;

}

ReviewForm.tsx:

const [review, setReview] = useState<Partial<Review>>({});

ReviewList.tsx:

const reviews: Review[] = await fetchReviews(shopId);

▌

Aussie Note

Shared types prevent bugs. Define once, use everywhere! 🔗

Checking Dependencies

After multi-file edits:

Terminal

> List all files that import from @lib/reviews.ts

Claude: These files depend on lib/reviews:

- src/app/shop/[id]/page.tsx

- src/components/ReviewForm.tsx

- src/components/ReviewList.tsx

> Make sure all of them handle the new error states

▌

Review with /diff

Terminal

> /diff types/index.ts

export interface Shop {

id: string;

name: string;

}

+export interface Review {

+ id: string;

+ shopId: string;

+ rating: number;

+ comment: string;

▌

Warning

For changes touching 5+ files, use Plan Mode first. Review the plan before letting Claude make changes.

Key Takeaways

Multi-file edits are common for real features
Review the file list before approving
Use staged approach for complex changes
Reference related files for consistency
Check dependencies after changes

Using /compact for Long Sessions

Git Integration