storybooklisted

# Storybook and Chromatic Catalogue, naming, MSW, and Definition of Done: [`docs/storybook.md`](../../../docs/storybook.md). This skill is the capture playbook. A `play` assertion passing does **not** mean Chromatic photographed the thing you care about. ## Before you snapshot 1. Name the **visual subject** (footer Save gate, dialog overlay, empty list). Everything else is noise. 2. Confirm the subject is inside Chromatic's captured box, not only in the DOM. 3. Look at the Chromatic image, not Storybook canvas. If two stories look the same in Chromatic, the crop is wrong even when `play` is green. Global default is **one 1280 px Chromium viewport**. Add another viewport only when the subject is invisible or tiny at 1280 (see `Components/Drawer/OpenNarrow` at 375). Do not add viewports "for coverage". ## `position: fixed` and sticky footers Chromatic snapshots `#storybook-root`. Fixed drawers (`fixed inset-0`, `fixed inset-y-0 right-0`) do not give that root a natural size. A 1280-wide shot buries a 420 px rail footer, or clips it entirely. **Do this in the story harness (not production):** - Wrap the component in a frame with **explicit width and height**. - Put `transform: translate(0)` on the frame so nested `position: fixed` descendants (dialogs) are contained by the frame instead of the viewport. - Force the drawer/panel to `position: relative` with `inset: auto` so it participates in document flow. - Hide the drawer backdrop. Worked example: `apps/web