CSS Conventions in CLAUDE.md for 5 Parallel Agents
CSS Conventions in CLAUDE.md for 5 Parallel Agents
Running multiple AI agents on the same codebase creates a consistency problem. Each agent makes its own styling decisions - different spacing, different color values, different naming conventions. The result is a codebase that looks like five different developers with five different opinions built it.
The Fix - CLAUDE.md as a Style Guide
The solution is putting all your CSS conventions directly in CLAUDE.md. Not a link to a style guide. Not a reference to a design system. The actual rules, inline, where every agent reads them at the start of every session.
A practical CLAUDE.md CSS section includes your spacing scale (4px, 8px, 16px, 24px, 32px), your color tokens (use --color-primary not #3b82f6), your naming convention (BEM, utility-first, or whatever you use), and your component patterns (how a card looks, how buttons are structured, how modals behave).
Why This Works for Parallel Agents
When five agents read the same CLAUDE.md, they all make the same styling decisions. Agent 1 building the header and Agent 4 building the footer both use --spacing-lg for padding. Agent 2 writing a modal and Agent 5 writing a dropdown both follow the same border-radius convention.
No coordination needed. No orchestrator resolving style conflicts. Each agent independently produces code that matches the others because they all started from the same source of truth.
What to Include
Be specific. "Use consistent spacing" is useless. "All component padding uses --spacing-md (16px). Section gaps use --spacing-xl (32px). Never use arbitrary pixel values" - that is actionable. The more explicit your rules, the more consistent your output across agents.
Include examples of common patterns. Show the exact HTML/CSS structure for a card, a form field, a navigation item. Agents follow examples more reliably than abstract rules.
The Result
Your codebase looks like one person built it, even when five agents worked on it simultaneously. Code reviews become simpler because you are not constantly flagging inconsistencies. Merge conflicts in CSS files drop dramatically because agents choose the same approaches.
- CLAUDE.md and Parallel Agents Guide
- CLAUDE.md for Product Context and Design Quality
- Skill.md Per Folder for Parallel Agent Isolation
Fazm is an open source macOS AI agent. Open source on GitHub.