{/* Can't shrink! */} // WORKING (scrolls correctly)

{/* Can shrink */} ``` **Rule:** Flex children that scroll need `min-h-0`. Children that shouldn't shrink need `shrink-0`. ### Model 3: Grid Parent/Child Separation Grid is defined on the **parent**. Children just occupy cells. ```tsx // BROKEN

{/* Missing 'grid'! */} // WORKING

{/* 'grid' enables grid-cols-* */} ``` **Rule:** `flex` or `grid` must be declared on parent before direction/template classes work. ### Model 4: Scroll Container Dimensions Scroll containers need **explicit dimensions** to know when to scroll. ```tsx // BROKEN (never scrolls) {/* No height constraint */} // WORKING (flex-constrained)

``` ## Diagnostic States ### SL1: Height Chain Broken **Symptoms:** Elements collapse, `h-full` not working **Fix:** Trace to html, add heights or use `h-screen` ### SL2: Flex Overflow Blocked **Symptoms:** Scroll doesn't work, content overflows **Fix:** Add `min-h-0` to flex children that scroll ### SL3: Grid Structure Wrong **Symptoms:** Items stack vertically instead of columns **Fix:** Ensure `grid grid-cols-*` on parent ### SL4: Styles Not Applying **Symptoms:** Unstyled components, colors wrong **Fix:** Check Tailwind content paths, CSS variables in globals.css ### SL5: Component Dependencies Missing **Symptoms:** "Module not found", functionality broken **Fix:** `npx shadcn add [component]`, install peer deps ## Common Layout Patterns ### Full-Page App Shell ```tsx // layout.tsx {children} // page.tsx

{children}

``` ### Dashboard with Header ```tsx

...

{children}

``` ### Card Grid ```tsx

{items.map(item => ( {item.title} {item.content} ))}

``` ## Anti-Patterns ### The Height Assumption Using `h-full` without verifying ancestor chain. **Fix:** Trace to html. Use `h-screen` to break chain. ### The Overflow Ignorance Adding `overflow-y-auto` without `min-h-0` on flex children. **Fix:** Flex children need `min-h-0` to shrink. ### The Import Guess Guessing import paths like `shadcn/ui`. **Fix:** Check `components.json` for alias. Usually `@/components/ui/*`. ### The Flat Compound Flattening compound components (Dialog without DialogTrigger/DialogContent). **Fix:** Maintain required nesting structure. ## Pre-Generation Checklist - [ ] Import alias known (`@/components/ui/*`) - [ ] html has `h-full` - [ ] body has `h-full` or `min-h-full` - [ ] Scroll containers have explicit height - [ ] Flex scroll children have `min-h-0` - [ ] Fixed elements have `shrink-0` ## Related Skills - **frontend-design** - Design decisions before implementation - **react-pwa** - PWA features for React apps