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
Tooltips: hard viewport-clamp rule (both axes + margin, flip not clip) + MANDATORY corner ralph-test; add discovery metadata
2 files changed
+30−3
SKILL.md+3−1@@ -130,7 +130,9 @@ Toasts are the standard transient-feedback element, and in Adom they do double d - **Body-appended `position:fixed` elements at `z-index:99999`.** Never a CSS `::after` pseudo-element, which gets clipped by panel `overflow:hidden`, `backdrop-filter`, or `transform` stacking contexts. - Reveal after a **600ms** hover delay so a fast cursor fly-by stays quiet. Motion is a short fade plus translate, `0.18s ease`.-- Anchor near the cursor, offset about 14px into a quadrant that does not cover the cursor or the hovered element. Flip on-screen near an edge. Reset `text-transform:none`.+- Anchor near the cursor, offset about 14px into a quadrant that does not cover the cursor or the hovered element. Reset `text-transform:none`.+- **MUST clamp to the viewport on BOTH axes so it can NEVER run off any edge. This is the #1 tooltip bug the AI ships and users are sick of reporting.** After computing the ideal position, force it inside `[M, clientWidth - elW - M] x [M, clientHeight - elH - M]` (M~=8px), and **flip** above/left instead of clipping when it would overflow the bottom/right. Measure `offsetWidth/offsetHeight` only AFTER the content is set and the element is laid out (0 size gives a meaningless clamp). Keep the caret pointing at the trigger after clamping (`caretX = clamp(anchorX - clampedLeft, 10, elW-10)`). Inside an iframe, clamp to the iframe's own viewport. This applies to EVERY floating element you position by JS: tooltips, popovers, dropdowns, context menus, autocomplete lists, hover cards, toasts.+- **RALPH-TEST it before shipping, at the corners, not the middle.** Show the WIDEST tooltip on the MOST extreme triggers (leftmost, rightmost, topmost, bottommost) and assert the rendered rect is inside the viewport: `const r=tt.getBoundingClientRect(); console.assert(r.left>=0 && r.right<=innerWidth && r.top>=0 && r.bottom<=innerHeight)`. Drive it live (or compute the clamp for the extreme case and show the numbers). A single centered-control hover is NOT a ralph-test; the bug hides at the edges. Never say a tooltip is done without this check. ### Buttons, toggles, and previews
page.json+27−2@@ -1,6 +1,6 @@ { "slug": "adom-ui-design",- "version": "1.3.1",+ "version": "1.3.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). One adompkg install drops the whole set of skill files onto your container.", "dependencies": {},@@ -42,5 +42,30 @@ "type": "image", "path": "screenshots/hero.png" },- "updated_at": "2026-06-20T16:46:26.895Z"+ "updated_at": "2026-06-20T16:46:26.895Z",+ "discovery_triggers": [+ "ui design",+ "adom ui",+ "build an app ui",+ "tooltip",+ "tooltips",+ "app header",+ "toast",+ "floating panel",+ "hud",+ "responsive ui",+ "mobile ui",+ "viewport clamp",+ "dropdown",+ "popover",+ "design system"+ ],+ "discovery_pitch": "The Adom UI design system: how to build app UIs that are beautiful, self-explaining, responsive, and a joy for an AI to drive - headers, tooltips (viewport-clamped, ralph-tested), toasts, floating HUDs, touch.",+ "sample_prompts": [+ "make this app's UI follow the Adom design system",+ "add tooltips to these controls",+ "why does my tooltip run off screen",+ "build the app header",+ "make this UI responsive for mobile"+ ] }