layouts▌

Master Flutter's constraint system to build responsive, overflow-free layouts efficiently. \n \n Core principle: constraints flow down, sizes flow up, parents set position. Never pass unbounded constraints in flex boxes or scrollable regions. \n Use Row / Column for linear layouts, Expanded / Flexible for space distribution, Stack for overlapping elements, and SizedBox for tight constraints. \n Apply LayoutBuilder for responsive sizing or conditional rendering for adaptive layouts across mobile,

Advanced CSS Grid, Flexbox, and container query patterns for complex responsive layouts. \n \n Covers CSS Grid mastery including holy grail layouts, grid template areas, auto-fill/auto-fit, and subgrid for nested alignment \n Flexbox patterns for space distribution, flexible item sizing, and masonry-like layouts with proper overflow handling \n Container queries with named containers and container query units for component-level responsiveness independent of viewport \n Sticky and fixed position

Help generate shadcn/Tailwind components that render correctly the first time. Most agent-generated UI fails due to missing mental models about how CSS layout works—not syntax errors, but assumption gaps.