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
Make the skill map clickable; link the six new dedicated UI skills
2 files changed
+38−26
README.md+19−13@@ -304,25 +304,31 @@ Fix every FAIL (the hint tells you exactly what to do), address relevant WARNs, ## 13. The skill map -This system is split across focused skills. The AI loads them by trigger word. Use this as the index of where each rule lives.+This system is split across focused skills. The AI loads them by trigger word. Click any skill below to read it. The first six are the dedicated UI skills that this page breaks out. | Skill | Governs | |---|---|-| `human-ui-patterns` | Tooltips, HUDs, toggles, feedback, the user-first interaction primitives |-| `app-creator` | Building a webview app: two-way comms, the live channel, proxy URL, favicon, publish flow |+| [**tooltips**](https://wiki.adom.inc/john/tooltips) | Great desktop tooltips: 600ms reveal, the fixed-div renderer, placement that never covers what you hover, edge-aware flipping, the z-index ladder |+| [**floating-windows**](https://wiki.adom.inc/john/floating-windows) | Draggable floaty tool windows and HUDs that never get in the way |+| [**toasts**](https://wiki.adom.inc/john/toasts) | Non-blocking confirmations, and the AI's live narration channel to the user |+| [**responsive-ui**](https://wiki.adom.inc/john/responsive-ui) | Phone-to-desktop layouts, touch targets, and tooltips on touch where hover does not exist |+| [**app-shell**](https://wiki.adom.inc/john/app-shell) | The full-height single-page app shell, the footer / status bar, and the sizing traps |+| [**ai-driven-apps**](https://wiki.adom.inc/john/ai-driven-apps) | The build-show-drive-ralph loop, the live SSE/WebSocket channel, the three display surfaces |+| [human-ui-patterns](https://wiki.adom.inc/adom/human-ui-patterns) | The broader user-first interaction primitives these were extracted from |+| [app-creator](https://wiki.adom.inc/adom/app-creator) | Scaffolding a webview app: two-way comms, proxy URL, favicon, publish flow | | `adom-app-header` | The 44px three-zone header and the app-info popover |-| `adom-app-model` | How an Adom app is structured, distributed, and versioned |-| `adom-screenshot` | Ralph loops and the visual feedback loop for debugging UI |+| [adom-screenshot](https://wiki.adom.inc/adom/adom-screenshot) | Ralph loops and the visual feedback loop for debugging UI | | `pup-vs-webview` / `adom-desktop-pup` | Choosing and driving pup, webview, or the user's native browser |-| `adom-cli-design` | The `OK:`/`ERROR:`/`Hint:` CLI contract, in Rust |-| `ai-hints-in-clis` | Writing hints that actually steer the AI |-| `relay-hint-pattern` | Teaching a relay server to redirect callers to the CLI |-| `3d-viewer-design` / `measure-tool-design` | Every rule for Adom 3D viewports and measurement |-| `adom-panels` / `adom-workspace-control` | The panel catalog and safe workspace layout control |-| `carbon-preferences` | Per-user settings that persist across sessions |-| `brand` | Colors, typography, logo, the icon law, the dark theme tokens |+| [adom-cli-design](https://wiki.adom.inc/adom/adom-cli-design) | The `OK:`/`ERROR:`/`Hint:` CLI contract, in Rust |+| `ai-hints-in-clis` / `relay-hint-pattern` | Writing hints, and redirecting direct HTTP callers to the CLI |+| [3d-viewer-design](https://wiki.adom.inc/adom/3d-viewer-design) / `measure-tool-design` | Every rule for Adom 3D viewports and measurement |+| [adom-panels](https://wiki.adom.inc/adom/adom-panels) / [adom-workspace-control](https://wiki.adom.inc/kyle/adom-workspace-control) | The panel catalog and safe workspace layout control |+| [carbon-preferences](https://wiki.adom.inc/adom/carbon-preferences) | Per-user settings that persist across sessions |+| [brand](https://wiki.adom.inc/adom/brand) | Colors, typography, logo, the icon law, the dark theme tokens | | `adom-wiki-hero` | Rendering a billboard-grade hero image |-| `adom-ui-linter` | The deterministic check suite that enforces this page |+| [adom-ui-linter](https://wiki.adom.inc/adom/adom-ui-linter) | The deterministic check suite that enforces this page |++*(Skills shown in plain text do not have a standalone wiki page yet; the linked ones are live.)* ---
SKILL.md+19−13@@ -327,25 +327,31 @@ Fix every FAIL (the hint tells you exactly what to do), address relevant WARNs, ## 13. The skill map -This system is split across focused skills. The AI loads them by trigger word. Use this as the index of where each rule lives.+This system is split across focused skills. The AI loads them by trigger word. Click any skill below to read it. The first six are the dedicated UI skills that this page breaks out. | Skill | Governs | |---|---|-| `human-ui-patterns` | Tooltips, HUDs, toggles, feedback, the user-first interaction primitives |-| `app-creator` | Building a webview app: two-way comms, the live channel, proxy URL, favicon, publish flow |+| [**tooltips**](https://wiki.adom.inc/john/tooltips) | Great desktop tooltips: 600ms reveal, the fixed-div renderer, placement that never covers what you hover, edge-aware flipping, the z-index ladder |+| [**floating-windows**](https://wiki.adom.inc/john/floating-windows) | Draggable floaty tool windows and HUDs that never get in the way |+| [**toasts**](https://wiki.adom.inc/john/toasts) | Non-blocking confirmations, and the AI's live narration channel to the user |+| [**responsive-ui**](https://wiki.adom.inc/john/responsive-ui) | Phone-to-desktop layouts, touch targets, and tooltips on touch where hover does not exist |+| [**app-shell**](https://wiki.adom.inc/john/app-shell) | The full-height single-page app shell, the footer / status bar, and the sizing traps |+| [**ai-driven-apps**](https://wiki.adom.inc/john/ai-driven-apps) | The build-show-drive-ralph loop, the live SSE/WebSocket channel, the three display surfaces |+| [human-ui-patterns](https://wiki.adom.inc/adom/human-ui-patterns) | The broader user-first interaction primitives these were extracted from |+| [app-creator](https://wiki.adom.inc/adom/app-creator) | Scaffolding a webview app: two-way comms, proxy URL, favicon, publish flow | | `adom-app-header` | The 44px three-zone header and the app-info popover |-| `adom-app-model` | How an Adom app is structured, distributed, and versioned |-| `adom-screenshot` | Ralph loops and the visual feedback loop for debugging UI |+| [adom-screenshot](https://wiki.adom.inc/adom/adom-screenshot) | Ralph loops and the visual feedback loop for debugging UI | | `pup-vs-webview` / `adom-desktop-pup` | Choosing and driving pup, webview, or the user's native browser |-| `adom-cli-design` | The `OK:`/`ERROR:`/`Hint:` CLI contract, in Rust |-| `ai-hints-in-clis` | Writing hints that actually steer the AI |-| `relay-hint-pattern` | Teaching a relay server to redirect callers to the CLI |-| `3d-viewer-design` / `measure-tool-design` | Every rule for Adom 3D viewports and measurement |-| `adom-panels` / `adom-workspace-control` | The panel catalog and safe workspace layout control |-| `carbon-preferences` | Per-user settings that persist across sessions |-| `brand` | Colors, typography, logo, the icon law, the dark theme tokens |+| [adom-cli-design](https://wiki.adom.inc/adom/adom-cli-design) | The `OK:`/`ERROR:`/`Hint:` CLI contract, in Rust |+| `ai-hints-in-clis` / `relay-hint-pattern` | Writing hints, and redirecting direct HTTP callers to the CLI |+| [3d-viewer-design](https://wiki.adom.inc/adom/3d-viewer-design) / `measure-tool-design` | Every rule for Adom 3D viewports and measurement |+| [adom-panels](https://wiki.adom.inc/adom/adom-panels) / [adom-workspace-control](https://wiki.adom.inc/kyle/adom-workspace-control) | The panel catalog and safe workspace layout control |+| [carbon-preferences](https://wiki.adom.inc/adom/carbon-preferences) | Per-user settings that persist across sessions |+| [brand](https://wiki.adom.inc/adom/brand) | Colors, typography, logo, the icon law, the dark theme tokens | | `adom-wiki-hero` | Rendering a billboard-grade hero image |-| `adom-ui-linter` | The deterministic check suite that enforces this page |+| [adom-ui-linter](https://wiki.adom.inc/adom/adom-ui-linter) | The deterministic check suite that enforces this page |++*(Skills shown in plain text do not have a standalone wiki page yet; the linked ones are live.)* ---