Composing a Page

Default to one column inside a capped container, and make every additional column earn its place. A page is a vertical stack of full-width bands; each band holds one centred content well; a grid arranges items inside a band and never the page itself. That posture is correct more often than it feels, because a product page is read down one axis and every extra column is a decision you then owe at every width. The sibling spacing owns every gap, padding value and density mode — this skill decides which regions exist, how wide they are, and which one sits above which; the moment the question becomes how far apart, hand it over. Three neighbours take the rest: responsive owns what changes as the width changes, navigation owns movement between pages rather than composition within one, and a request that names a table or a dashboard is dense-ui by the named-noun rule.

Read the project's layout primitives before adding any of your own. Look for a <Container> / <Stack> / <PageShell> component, a max-w-* convention in existing pages, a grid-template-areas block in a layout stylesheet, and an existing z-index token set (--z-*, theme.zIndex, a zIndex.ts). Compose with what you find. Two containers with different caps, or a second z-index vocabulary alongside the first, is the failure this skill exists to prevent — a page that "looks fine" while every future page inherits the ambiguity.

Quick Reference

Topic	File
The page's shape is a known type — split view, sidebar + detail, feed, settings, wizard	Open page-archetypes.md before writing markup, and read only the archetype that matches.
Something is stacked wrongly, a popover is trapped inside a card, or you are about to type a `z-index` literal	Open z-index.md — it holds the layer set and the stacking-context traps that make `z-index` appear not to work.

Core Principles

Cap the container, and know it is not the same cap as the measure. An uncapped page produces unreadable line lengths and compositions that drift apart on wide monitors. The default content well is max-width: 1200px centred, with full-bleed reserved for bands whose background spans the viewport while their contents still sit in the well. The reading measure (65ch) is a different, narrower cap and belongs to typography — a page routinely uses both, nested. Exception: canvases, editors, maps and data grids take the whole viewport and set their own bound; capping them wastes the screen the user opened them for.
One column until a second one is justified by content, not by width available. The ladder is 1 column for reading, forms, settings detail and wizards; 2 for sidebar + detail; 8 for marketing composition; 12 only where users arrange tiles themselves, because 12 divides evenly by 2, 3, 4 and 6. A twelve-column grid on a marketing page is configuration overhead nobody reads. Exception: an existing design file that already specifies 12 — match it rather than re-deriving.