human UI patterns
Public Made by Adomby adom
Non-negotiable UI rules for every Adom app. Read BEFORE writing any hover/click/drag element. Three rules get violated most often: tooltips MUST be body-appended position:fixed divs at z-index 99999 (
Skills
The skills this repo ships, by tier, each with a quick health read. Install the user skills with:
adom-wiki skills install adom/human-ui-patternsNon-negotiable UI rules for every Adom app. Read BEFORE writing any hover/click/drag element. Three rules get violated most often and must be checked first: tooltips MUST be body-appended `position:fixed` divs at z-index 99999 (never CSS `::after` — gets clipped by HUD `overflow:hidden` / `backdrop-filter` / `transform` stacking contexts); toggle buttons MUST visually reflect their on/off state (a flat push-button styling for both states is a UX lie); every interactive element MUST carry a `data-tooltip` (no orphans). Also covers HUDs, click previews, draggable panels, NEVER ALL CAPS, multi-unit displays, viewport-clipping, AI-drivability. Trigger words: UI design, tooltip, hover preview, draggable HUD, floating panel, measure tool, UX polish, component panel, newbie-friendly, human factors, click preview, snap point, z-index, viewport clipping, UI review, toggle button, toggle state, button state, pressed button, active button.
No dev skills in this repo.
How to build, debug, and test this app. Source-only (dev-skills/), never shipped in the tarball.
No publish skills in this repo.
The app-to-wiki publish glue. Source-only (publish-skills/), never shipped in the tarball.
Health: the size chip is green when right-sized, yellow when getting long, red when the model likely skims it. A green check is a passed preamble/structure signal; an amber mark is a gentle nudge, not a hard failure.