web-layoutlisted

# Web Layout Rules only. One skill: core below + surface recipes in `references/`. **Before coding any non-trivial surface:** run §Frame, then §Plan, then load the matching recipe. | Surface | Load | |---------|------| | Landing / marketing / portfolio | [references/landing.md](references/landing.md) | | Dashboard / admin / analytics | [references/dashboard.md](references/dashboard.md) | | App chrome / sidebar / scroll regions | [references/shell.md](references/shell.md) | | Mixed | shell + the primary surface recipe | ## Frame (decide first, before any markup) Two frames. Pick one **by name** and say which, in one line, before writing code. | | `fixed` — viewport-locked | `document` — page scrolls | |---|---|---| | For | console, dashboard, editor, canvas, chat, IDE, tool | landing, marketing, docs, article, long form, auth | | Root | `h-dvh overflow-hidden flex` | `min-h-dvh flex flex-col` | | Scrolls | regions, each with its own scroller | the document | | Chrome | permanently visible, `shrink-0` | `sticky top-0` header | **Test:** must the sidebar / topbar stay visible while the user reads? → `fixed`. Mixed page = `document` outside, a `fixed`-style panel with its own scroller inside. **The one mistake that defines this skill:** a `fixed` frame written with `min-height: 100dvh` instead of `height`. `min-height` grows with content, so the shell becomes as tall as the *document*, not the *viewport* — the sidebar stretches past the fold and scrolls away, and any tall