Adom UI Design System

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

@@ -310,6 +310,35 @@ the page. Check it by toggling: screenshot with the panel open and closed and compare the distance from the header to the first content row. It should be identical. +## Two traps that make a CORRECT-LOOKING panel render wrong++Both found by parts-search on 2026-08-25, and both passed every computed-style check it ran.++**1. A shared `.btn` class can silently eat the demo button's fill.** Its CSS genuinely said+`background: var(--accent)` on `.demo-btn`, but `.demo-btn` and `.btn` are both single-class+selectors, so specificity ties and SOURCE ORDER decides: `.btn` was declared 85 lines later+and painted the button surface. It read as correct in the source and rendered wrong on+screen. **Scope the rule** (`.say .demo-btn`, plus hover/active/disabled and the svg). The+tell is exactly what a measurement returns: `rgb(28,33,40)` where teal belongs.++**2. Malformed markup is silently repaired by the browser, and computed styles cannot see+it.** A stray closing `div` ended the heading block early, dropped the right-hand wrapper+entirely, and left the prompts table as a bare grid child; auto-placement then put the+heading inside a column. Every computed-style assertion still passed, because by the time you+measure, the browser has already fixed the tree its own way.++So **assert STRUCTURE, not only style**: that the wrapper elements exist, that open and close+tags balance, that the heading is a direct child of the panel rather than of a column. Better,+remove the ordering dependency entirely with explicit areas:++```css+.say { display: grid; grid-template-areas: "head head" "left right";+       grid-template-columns: clamp(180px,30%,220px) 1fr; }+```++Then the heading spans both columns BY CONSTRUCTION rather than by luck, and the+single-column form just redefines the areas.+ ## Two traps that keep a full-width panel a column  Found by chip-fetcher, the first app to convert: