← Commit history

tooltips skill: MANDATORY corner ralph-test before declaring tooltips done (the clamp rules existed; the AI kept skipping edge verification)

John Lauer ·072f4415e8 ·3mo ago ·parent bcb3407
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"+  ] }\ No newline at end of file
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`