Claude repeatedly ignores existing code structure when implementing new components, causing token waste from iterative bug fixes

Summary

Project context: React/TypeScript app with an existing component (PokerFeltV2) used by TrainPage with a specific wrapper structure (position:fixed + maxWidth:480).

Task: Implement a new GamePage using the same PokerFeltV2 component.

What Claude did (repeated pattern)

1. Searched for specific keywords in the existing page (Grep for "flex-1", "min-h-0")
2. Claimed to have "referenced the existing UI"
3. Implemented the new page — missing the critical outer wrapper
4. Reported the task as complete
5. Bug discovered only after user manually tested on desktop browser
6. Required multiple additional rounds to diagnose and fix

Root cause Claude acknowledged

Used Grep (keyword search) instead of Read (full file content) to examine the reference component's caller. This is structurally equivalent to "narrative-without-verify" — giving a specific implementation without actually verifying the reference structure.

Why memory/rules don't fix it

The project has explicit CLAUDE.md rules and Layer 5 hooks specifically for this pattern. Claude acknowledges the rule exists, records it in memory, then repeats the same mistake the next session.

Token cost to user

~3-4 extra conversation turns per occurrence, across multiple sessions. User is requesting token compensation.

Request

This appears to be a systematic issue where keyword search (Grep) is treated as equivalent to full content review (Read) when implementing code that depends on existing structures. Consider whether there's a way to strengthen the model's tendency to Read complete files before implementing dependent components.