Layout & CSS — What Claude Gets Wrong

You wrap everything in cards, use flexbox for 2D layouts, hardcode values that exist as design tokens, and leave dead wrapper elements everywhere. In production: designs drift from the system, layouts break at intermediate widths, and every component has 3 unnecessary nesting levels.

The Eight Rules

1. Cards are for repeated/grouped content only — not for page sections
2. Grid for 2D, flex for 1D — stop using flex-wrap + calc
3. Reference every token — if a CSS variable or theme token exists, use it
4. Every element earns its place — no wrapper around a single child
5. min-height: 100dvh — never height: 100vh
6. Z-index needs a system — isolation: isolate + named scale
7. Flex children need min-width: 0 for truncation to work
8. Transition specific properties — never transition: all

Anti-Patterns