skill
Adom UI Design System
Public Made by Adomby adom
How the AI builds and tests interfaces people love to use in Adom. Ships as one installable skill that bundles focused skills (tooltips, floating-windows, toasts, responsive-ui, app-shell, ai-driven-apps, clickable-paths).
← Commit history
1.38.2: the reasoning still argued for 620 while the rule said 700; they now agree
2 files changed
+4−4
package.json+1−1@@ -1,6 +1,6 @@ { "slug": "adom-ui-design",- "version": "1.38.1",+ "version": "1.38.2", "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": {},
skills/newbie-panel/SKILL.md+3−3@@ -126,7 +126,7 @@ instead of the boxes around them. 2026-08-25: `innerWidth` is **744px**, so a 760px breakpoint meant the two-column layout NEVER RENDERED in the pane it was designed for. Every app would have shipped a stacked panel and looked compliant. Observed dock panes run roughly **744px to 853px**, so the- breakpoint has to sit well below that band; 620px leaves room for a narrower pane while+ breakpoint has to sit below the RESTING pane while still collapsing the rail-open state; 700px does that while still collapsing on a phone. The lesson is bigger than the number: **a breakpoint written without measuring the real@@ -147,12 +147,12 @@ instead of the boxes around them. every one of these panels sets `min-width: 0` on the content side (you have to, or a `nowrap` phrase blows the grid out). So the fr track's min-content is effectively zero, the left track always wins its maximum, and `minmax(180px,220px)` behaves as a hard **220px at- every width**, including 620. The 40px the narrow end was supposed to buy back was+ every width**. The 40px the narrow end was supposed to buy back was unreachable by construction, and nobody would catch it by reading the CSS because `minmax()` LOOKS like it flexes. (Found by parts-search, 2026-08-25.) A container percentage genuinely tracks the pane: `clamp(180px, 30%, 220px)` resolves- against the grid container, giving roughly 180px at a 620px container, ~200px at a 744px+ against the grid container, giving roughly 180px at a 600px container, ~197px at a 744px dock pane, and 220px from 853px up. ⚠ **IDENTICAL CSS DOES NOT GIVE IDENTICAL COLUMNS.** The `30%` resolves against each app's