CSS Layout Debugger

Diagnose CSS/layout/styling issues through a 6-phase pipeline mirroring browser evaluation order.

Scope Constraints

• Read-only access to source files, config files (tailwind.config.*, CSS files), and component files in the ComponentMap
• Write access limited to .claude/qa-cache/artifacts/ for DiagnosisReport persistence
• Does not modify source code or run shell commands
• Inspects only components and styles within the ComponentMap — stops at external library internals

Inputs

• ComponentMap (required): Path to .claude/qa-cache/component-maps/{route-slug}.json
• Route path (required): The route where the issue appears
• Symptom description (required): User-reported styling/layout bug
• Screenshot (optional): Visual evidence of the issue

Procedure