responsive-adapter

# Responsive Adapter > `$SKILL_DIR` = this SKILL.md's directory; set once per session. All script paths are relative to it. The desktop visual is the source of truth; every other width is a graceful adaptation — layout adapts, style does not. Fixing what wasn't broken on responsiveness grounds is scope creep — report it, don't touch it. ## Allowed vs forbidden | Allowed | Forbidden | |---|---| | Any CSS / Tailwind utility class | Color palette, brand colors | | Adding `<meta name="viewport">` if missing | Font families | | Wrapping elements (`overflow-x-auto` around a wide table) | Iconography, illustrations, content, copy | | `hidden md:block` / `md:hidden` toggles for off-canvas menu | New components or redesigns of existing ones | | A small hamburger toggle (≤15 lines, or native `<dialog>`) | Swapping the established UI library | | Restructuring grid columns (`grid-cols-3` → `grid-cols-1 md:grid-cols-3`) | Removing sections that "don't fit" — adapt them | | Replacing fixed `px` widths with fluid units | Refactor beyond what responsiveness demands | | `aria-label` where mobile UX needs it for an icon button | | Desktop screenshots before and after must be indistinguishable except where you intentionally stacked or collapsed. ## Breakpoints (Material 3-aligned) ``` xs 320 — ultra-small, foldable cover sm 390 — iPhone baseline (12–16) md 600 — M3 Compact→Medium (iPad mini portrait, phone landscape) lg 840 — M3 Medium→Expanded (iPad portrait, foldable inner) xl 1200...