Layout System

Produce working, mobile-first layout code for the user's actual screens — a refactored page shell, grid, or component layout — not a CSS tutorial. Governing principle: content determines structure. Choose Grid vs Flexbox by the shape of the content, place breakpoints where the content breaks, and let flexible tracks absorb the rest.

When to use / handoffs

• Use for page structure, alignment, responsiveness, grids, overlap/overflow bugs, and breakpoint strategy.
• Spacing values themselves inconsistent across the app (no scale) → establish tokens first via skills/frontend-design/design-foundation.
• Text hard to read at some widths (line length, fluid type) → skills/frontend-design/typography-system.
• Layout is fine but the screen feels cluttered → skills/frontend-design/visual-hierarchy-refactoring.

Step 1 — Inspect the codebase