Adom UI Design System - Commit

Overview Files Skills Discover Packages Releases Dependencies Issues2 Breadcrumbs Pull Requests2 Activity

Add scrollbars to the skill map, add a fill-the-window rule, fix stale sub-skill counts

John Lauer ·1396b22706 ·1mo ago ·parent 79baf29

scrollbars/ has shipped in this repo for a while but was never listed in the skill map, so the AI had no way to discover it and apps kept shipping the default OS scrollbar. Adds the row, plus a note to add the row in the same commit as any new sub-skill. Section 4 said 'reshape, not shrink', which an app can satisfy while still leaving a third of a wide monitor empty behind a max-width. Adds an explicit fill-the-window rule and points at the linter's UI-09 check. The 'seven skills' counts were already stale (18 rows link into this repo).

1 file changed +6−2

SKILL.md+6−2

@@ -158,6 +158,7 @@ When several iterations of the same animation each help only a little, stop tuni  The same app should feel native on a 32 inch monitor and on a phone. +- **Fill the window.** An app gets 100% of the width it is given. A centered column with a `max-width` leaves dead margin on a wide monitor, and on a dashboard that margin is columns the user paid for: a card grid on `repeat(auto-fill, minmax(Npx, 1fr))` should buy MORE columns as the window grows, never a wider gutter. Cap the measure only where a cap is the point, which is running prose, and cap that element, never the page. The linter's fluid-layout check (UI-09) flags a large fixed width; the fix is to remove the cap, not to hide the number in a variable. - **Design the layout to reshape, not to shrink.** Define a few breakpoints (phone, tablet, desktop) and change the layout at each, rather than scaling one fixed desktop layout down until it is unusable. - **Rich on desktop, focused on mobile.** A desktop has room for side panels, dense tables, persistent toolbars, secondary stats. On a phone, collapse those into a single column, move actions into a bottom bar or a menu, and reveal secondary detail on demand. The header models this already: the subject meta line hides below roughly 720px and returns on request. - **Touch targets are at least 44 by 44 px.** Fingers are not cursors.@@ -417,7 +418,9 @@ slip straight through it, and all three have shipped:  ## 13. The skill map -This whole system ships as **one installable skill**. `adom-wiki pkg install adom/adom-ui-design` drops the design-system skill **plus all seven skills below** onto your container as separate skill files, so the AI loads each by its own trigger words. The first seven live as files in **this** repo; click to read them. The rest are existing platform skills.+This whole system ships as **one installable skill**. `adom-wiki pkg install adom/adom-ui-design` drops the design-system skill **plus every sub-skill below** onto your container as separate skill files, so the AI loads each by its own trigger words. The rows that link into `files/skills/` live in **this** repo; click to read them. The rest are existing platform skills.++If you add a sub-skill to `skills/`, ADD ITS ROW HERE in the same commit. A skill that ships but is not listed is a skill nobody loads: `scrollbars` sat in this repo unlisted, and apps kept shipping the default OS scrollbar because the AI had no way to discover it.  | Skill | Governs | |---|---|@@ -432,6 +435,7 @@ This whole system ships as **one installable skill**. `adom-wiki pkg install ado | [**status-leds**](https://wiki.adom.inc/adom/adom-ui-design/files/skills/status-leds/SKILL.md) | One status language: a compact LED pill row (the chip-fetcher pattern canonized), prose on tap never by default, red LEDs always carry their next step, staleness escalates, and the row never disagrees with the dock card's LED | | [**newbie-graduation**](https://wiki.adom.inc/adom/adom-ui-design/files/skills/newbie-graduation/SKILL.md) | The scaffolding-fade contract: Fresh, Graduated, Recallable states per app; triggers are dismissal, 3 green launches, or the first AI-driven action the bridge sees; the say strip folds last because handing the user to the AI is the point | | [**tooltips**](https://wiki.adom.inc/adom/adom-ui-design/files/skills/tooltips/SKILL.md) | Great desktop tooltips: 600ms reveal, the fixed-div renderer, placement that never covers what you hover, edge-aware flipping, the z-index ladder |+| [**scrollbars**](https://wiki.adom.inc/adom/adom-ui-design/files/skills/scrollbars/SKILL.md) | The pretty scrollbar and only the pretty one: a thin translucent pill on a transparent track, teal only on hover, the `background-clip: padding-box` trick that floats it off the edge, the inset track that stops a bar slicing a rounded container's corners, and never a page-level horizontal scrollbar | | [**floating-windows**](https://wiki.adom.inc/adom/adom-ui-design/files/skills/floating-windows/SKILL.md) | Draggable floaty tool windows and HUDs that never get in the way | | [**toasts**](https://wiki.adom.inc/adom/adom-ui-design/files/skills/toasts/SKILL.md) | Non-blocking confirmations, and the AI's live narration channel to the user | | [**responsive-ui**](https://wiki.adom.inc/adom/adom-ui-design/files/skills/responsive-ui/SKILL.md) | Phone-to-desktop layouts, touch targets, and tooltips on touch where hover does not exist |@@ -452,7 +456,7 @@ This whole system ships as **one installable skill**. `adom-wiki pkg install ado | `adom-wiki-hero` | Rendering a billboard-grade hero image | | [adom-ui-linter](https://wiki.adom.inc/adom/adom-ui-linter) | The deterministic check suite that enforces this page | -*(The first seven are files in this repo and install together with the design system. The other linked skills are existing platform skills with their own pages; plain-text ones have no standalone page yet.)*+*(Rows linking into `files/skills/` are files in this repo and install together with the design system. The other linked skills are existing platform skills with their own pages; plain-text ones have no standalone page yet.)*  ---