Adom UI Design System

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

@@ -7,7 +7,7 @@ description: >-   editor and status bar, and after the Claude-safe resize your dashboard's 14px text is   unreadable and its colours are resampled, so every measurement you try to eyeball from it   is wrong. This skill gives the exact crop recipe (activate the tab by name, read the-  iframe rect from the shell target, derive the scale from hd_shot's own metadata, crop),+  iframe rect AND the shell's CSS viewport width in one call, scale by that, crop),   the ready-made script, and the traps: unforegrounded tabs report zero-height rects, and   the capture is scaled so a hardcoded offset silently drifts. Read BEFORE capturing any   dock dashboard frame for a review, an issue, or the shotlog. Trigger words: screenshot the@@ -77,16 +77,22 @@ return JSON.stringify({x: Math.round(r.x), y: Math.round(r.y),  Only the ACTIVE tab's iframe has a non-zero rect. If you get `0,0,0,0`, step 1 did not take. -**3. DERIVE THE SCALE FROM hd_shot's OWN METADATA. NEVER HARDCODE IT.**--`hd_shot` returns `windowOuter:[w,h]` and the safe copy is resized to `resizeMax` (1400 by-default). So:+**3. SCALE BY THE SHELL'S CSS VIEWPORT WIDTH, MEASURED IN THE SAME CALL AS THE RECT.**  ```python-SCALE = image.width / windowOuter[0]+SCALE = image.width / shellInnerWidth      # from step 2's eval, not from hd_shot ``` -**Do not hardcode a scale or an origin.** An earlier version of this pipeline used+**Do NOT scale by `hd_shot`'s `windowOuter`, even though it sounds like the right metadata.**+It is the OS window in **physical** pixels: **2582** where the CSS viewport is **1706** at+dpr 1.5. The rect from step 2 is in CSS pixels, so mixing them gives a crop about **34% too+small** that still looks like a perfectly plausible picture of a dashboard. This skill's first+version said to use `windowOuter` and its tool did; the error was caught only by comparing the+output dimensions against what they should have been, not by looking at the image. **Do not+assume a metadata field means what its name suggests, and check a tool's output against an+expected number rather than against your impression of it.**++**Do not hardcode a scale or an origin either.** An earlier version of this pipeline used `SCALE = im.width / 1706.0` with a fixed `FX, FY = 963, 117`, which worked only for one window size and one rail state, and drifts silently the moment John resizes the window, opens the dock rail, or moves the pane. Silently: the boxes just land slightly wrong and the