From 018aff20e418751b5606cdb7fed4a1531ca7b8bd Mon Sep 17 00:00:00 2001 From: "russell@unturf.com" Date: Tue, 3 Mar 2026 16:51:29 -0500 Subject: [PATCH] CLAUDE.md: add no-flexbox rule, css grid only --- CLAUDE.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/CLAUDE.md b/CLAUDE.md index c5baf05..e44d9d2 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -140,6 +140,13 @@ ``` ## CSS and Styling Standards +**CRITICAL: NEVER use flexbox. Use CSS Grid exclusively.** + +- ❌ **NEVER** use `display: flex` or any flex properties (`flex-shrink`, `flex-wrap`, `flex-grow`, `flex-direction`) +- ✅ **ALWAYS** use `display: grid` with `grid-template-columns`, `grid-auto-flow`, `place-items`, etc. +- ✅ For inline checkbox+label: `display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 8px;` +- ✅ For centering: `display: grid; place-items: center;` + **CRITICAL: NEVER use !important in CSS** - ❌ **NEVER** use `!important` flags in CSS - it's a lazy hack that creates technical debt