Adom UI Design System

@@ -1,6 +1,6 @@ {   "slug": "adom-ui-design",-  "version": "1.11.0",+  "version": "1.11.1",   "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": {},

@@ -58,6 +58,23 @@ the panel being asked to live in a column it was never designed for.         the app's own UI starts here, full width, below the panel ``` +## Two traps that make a full-width panel stay a column++Found the hard way by chip-fetcher, the first app to convert:++1. **The panel must be a SIBLING of the app body, outside the app's grid.** If it lives+   inside your `.app-grid` / two-column layout, it inherits a column and stays a column+   however wide you style it. `.newbie` and `.app-body` are siblings; the app body's top+   should measure equal to the panel's bottom.+2. **The demo button must fold WITH the panel.** It is part of the newbie surface, so a+   dismissed panel that leaves a stray demo button behind is half-collapsed and looks like+   a bug.++Measure rather than eyeball: at a wide viewport, assert panel width equals the content+width, inner content is capped near 1100, `appBody.top === panel.bottom`, and no chip is+taller than one line. At 390px, one chip per row and the icon buttons still in a 44px+target.+ ## The demo button  - **One button, inside the panel, directly under the explainer line and ABOVE the prompts.**