Adom UI Design System

@@ -1,6 +1,6 @@ {   "slug": "adom-ui-design",-  "version": "1.26.0",+  "version": "1.27.0",   "type": "skill",   "description": "The Adom UI Design System plus a bundle of focused UI skills (tooltips, floating-windows, toasts, responsive-ui, app-shell, ai-driven-apps, clickable-paths, dark-default, input-feedback, settings-layout). One install drops the whole set of skill files onto your container, plus shared icon assets (the settings cog) so every Adom app draws the same glyph.",   "dependencies": {},

@@ -96,6 +96,30 @@ instead of the boxes around them. - At the narrow end of the band the left column may shrink to **180px** rather than   collapsing; the demo button still fits on one line at that width. +  **AUDIT EVERY BREAKPOINT IN YOUR PAGE, NOT JUST THIS ONE.** Any `max-width` media query+  that fires inside the **744-853px** pane band collapses something in the place users+  actually work. nb found its own Layer 1 / Layer 2 comparison cards collapsing at 760px, so+  fixing only the contract's panel would have left the page half-collapsed: contract region+  correct, app content still stacked. Grep every media query you own and check each against+  the band. Your app's content breakpoints are yours to choose, but a threshold sitting+  inside the band is almost certainly an accident rather than a decision.++### The capture matrix++Six frames, not four (nb's, and better than what this skill asked for):++| # | Width | Panel |+|---|---|---|+| 1 | **744px** (the real pane) | open |+| 2 | **744px** | closed |+| 3 | 390px | open |+| 4 | 390px | closed |+| 5 | wide (1400px+) | open |+| 6 | wide (1400px+) | closed |++The wide pair proves the fluid-width rule (no dead band), the 390 pair proves the phone+collapse, and the 744 pair is the one that matters most because it is what the user sees.+ **Left column: the demo button** - The panel's ONLY filled button: `background: var(--teal)`, `color: var(--on-accent)`,   `border-radius: 8px`, `padding: 10px 18px`, Familjen Grotesk 600 **14px**,