layout-compositionlisted

# Layout Composition ## Coverage Compose page and screen structure so the hierarchy survives real viewports. Covers section order, scan pattern, grid and flex choices, responsive breakpoints, mobile-first stacking, stable dimensions, responsive media, density, empty/loaded-state footprint, and handoff from task hierarchy to implementation-ready layout. ## Philosophy Layout is the visible contract between task priority and available space. A surface that has the right content can still fail if primary information collapses below the fold, controls jump between states, or a desktop-only composition is squeezed into a narrow viewport. Start from hierarchy, then choose structure. Do not design to named devices; design to the point where the content starts to break. ## Method 1. Read the primary, secondary, and supporting hierarchy from `task-analysis` or the route contract. 2. Identify fixed-format elements: tables, cards, charts, boards, media, toolbars, and forms. 3. Choose the scan pattern: single column, master-detail, sidebar/content, table-first, card grid, or step flow. 4. Define responsive breakpoints where content breaks, not where devices are marketed. 5. Set stable dimensions for elements that must not resize on hover, loading, or label changes. 6. Decide what collapses, stacks, pins, hides, or moves at each breakpoint. 7. Check mobile, tablet, desktop, low-data, loading, empty, and error states. ## Evals This skill ships a comprehension-eval artifact at [`exa