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 skill: MANDATORY corner ralph-test before declaring tooltips done (the clamp rules existed; the AI kept skipping edge verification)
2 files changed
+20−3
page.json+2−3@@ -1,6 +1,6 @@ { "slug": "adom-ui-design",- "version": "1.3.2",+ "version": "1.3.3", "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": {},@@ -82,6 +82,5 @@ "label": "make this UI responsive for mobile", "prompt": "make this UI responsive for mobile" }- ],- "visibility": "public"+ ] }
skills/tooltips/SKILL.md+18@@ -232,6 +232,24 @@ skill for the full touch treatment. - [ ] No ALL CAPS; `text-transform` reset on the tooltip element. - [ ] `--z-*` tokens declared in `:root`; no hardcoded z-index literals. +## MANDATORY ralph-test before you say tooltips are done (added after repeated failures)++Reading the clamp rules is not enough - the off-screen bug keeps shipping because the AI checks one+tooltip on a centered control and calls it done. The bug hides at the EDGES. So, non-negotiable:++1. Trigger the tooltip with the LONGEST tip text on the MOST extreme controls: leftmost, rightmost,+ topmost, bottommost (toolbar corners, panel edges, last row of a list).+2. For each, read the rendered rect and ASSERT it is inside the viewport:+ `const r = tip.getBoundingClientRect();`+ `console.assert(r.left >= 0 && r.right <= innerWidth && r.top >= 0 && r.bottom <= innerHeight, 'TOOLTIP OFF-SCREEN', r);`+3. Drive it live (pup/eval) when you can; otherwise compute the clamp arithmetic for the extreme+ case and show the numbers. Screenshot proof of ONE centered hover does NOT count.+4. Also verify inside iframes: clamp to the IFRAME's viewport (`document.documentElement.clientWidth/Height`),+ not the parent page's.++If any assert fires, fix the clamp (both axes, margin ~8px, flip instead of clip, measure only+after layout) and re-run. Never report tooltips complete without stating this test ran and passed.+ ## Related skills `human-ui-patterns` (the broader interaction rules this was extracted from), `floating-windows`