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
1.11.0: newbie-panel skill (full-width band, icon buttons), toast look/motion spec, cog redrawn as a true line icon
6 files changed
+202−6
SKILL.md+1@@ -427,6 +427,7 @@ This whole system ships as **one installable skill**. `adom-wiki pkg install ado | [**dock-dashboard**](https://wiki.adom.inc/adom/adom-ui-design/files/skills/dock-dashboard/SKILL.md) | THE parent contract for every Dock Bar launch dashboard: one anatomy (house header, say strip, status pill row, then the app's own content), the two legitimate species (bridge launch page vs full app whose main UI is the dock target), and the shared token stub - ends the seven-dashboards-seven-designs era | | [**dash-header**](https://wiki.adom.inc/adom/adom-ui-design/files/skills/dash-header/SKILL.md) | One header grammar for dashboards: human name never a slug echo, version NEVER inline in the bar (popover only), the standard target box chip, and the ? that recalls the newbie scaffolding | | [**say-strip**](https://wiki.adom.inc/adom/adom-ui-design/files/skills/say-strip/SKILL.md) | The ONE say strip: "Say it" heading, quoted phrases with the noun in teal, two buttons on every phrase: Copy (clipboard + the fleet toast) and Send to AI (a NEW AI thread via the panel API, submitted), with the unfocused-window clipboard recipe |+| [**newbie-panel**](https://wiki.adom.inc/adom/adom-ui-design/files/skills/newbie-panel/SKILL.md) | The prompts-and-demo band every dock dashboard renders FULL WIDTH across the top, never squeezed into a column: where the demo button sits and what it looks like, prompt rows with icon-only copy and send-to-AI buttons (tooltip + toast, never text labels), the single X that collapses it and the ? that brings it back | | [**dash-demo**](https://wiki.adom.inc/adom/adom-ui-design/files/skills/dash-demo/SKILL.md) | The demo contract: one guided demo per dashboard driven by a step list, play/pause/prev/next/exit toolbar, pre-created adom-tts mp3s (audio on by default, mute button), and ab captions perfectly synced at the bridge default size so every app's demo feels identical | | [**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 |
assets/icons/settings-cog-outline.svg+10−1@@ -1 +1,10 @@-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 8a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 2a2 2 0 0 0-2 2a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2m-2 12c-.25 0-.46-.18-.5-.42l-.37-2.65c-.63-.25-1.17-.59-1.69-.99l-2.49 1.01c-.22.08-.49 0-.61-.22l-2-3.46a.493.493 0 0 1 .12-.64l2.11-1.66L4.5 12l.07-1l-2.11-1.63a.493.493 0 0 1-.12-.64l2-3.46c.12-.22.39-.31.61-.22l2.49 1c.52-.39 1.06-.73 1.69-.98l.37-2.65c.04-.24.25-.42.5-.42h4c.25 0 .46.18.5.42l.37 2.65c.63.25 1.17.59 1.69.98l2.49-1c.22-.09.49 0 .61.22l2 3.46c.13.22.07.49-.12.64L19.43 11l.07 1l-.07 1l2.11 1.63c.19.15.25.42.12.64l-2 3.46c-.12.22-.39.31-.61.22l-2.49-1c-.52.39-1.06.73-1.69.98l-.37 2.65c-.04.24-.25.42-.5.42zm1.25-18l-.37 2.61c-1.2.25-2.26.89-3.03 1.78L5.44 7.35l-.75 1.3L6.8 10.2a5.55 5.55 0 0 0 0 3.6l-2.12 1.56l.75 1.3l2.43-1.04c.77.88 1.82 1.52 3.01 1.76l.37 2.62h1.52l.37-2.61c1.19-.25 2.24-.89 3.01-1.77l2.43 1.04l.75-1.3l-2.12-1.55c.4-1.17.4-2.44 0-3.61l2.11-1.55l-.75-1.3l-2.41 1.04a5.42 5.42 0 0 0-3.03-1.77L12.75 4z"/></svg>+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"+ fill="none" stroke="#e6edf3" stroke-width="1.8"+ stroke-linecap="round" stroke-linejoin="round">+ <!-- THE Adom settings cog: a true line drawing (strokes, no filled silhouette).+ Hardcoded #e6edf3 because this file is loaded as its own document via+ <img src> / favicon, where currentColor would resolve to black. Inline+ copies pasted into markup may swap the stroke to currentColor. -->+ <circle cx="12" cy="12" r="3"/>+ <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>+</svg>
package.json+3−3@@ -1,6 +1,6 @@ { "slug": "adom-ui-design",- "version": "1.10.2",+ "version": "1.11.0", "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, clickable-paths, dark-default, input-feedback, settings-layout). One install drops the whole set of skill files onto your container, plus shared icon assets (the settings cog) so every Adom app draws the same glyph.", "dependencies": {},@@ -9,7 +9,6 @@ "SKILL.md", "assets/icons/README.md", "assets/icons/settings-cog-outline.svg",- "assets/icons/settings-cog.svg", "install.sh", "page.json", "screenshots/tokens.png",@@ -31,7 +30,8 @@ "skills/say-strip/SKILL.md", "skills/status-leds/SKILL.md", "skills/dash-demo/SKILL.md",- "skills/icons/SKILL.md"+ "skills/icons/SKILL.md",+ "skills/newbie-panel/SKILL.md" ], "scripts": { "install": "./install.sh",
skills/newbie-panel/SKILL.mdadded+127@@ -0,0 +1,127 @@+---+name: newbie-panel+user-invocable: true+description: >-+ THE newbie panel every dock dashboard renders: one FULL-WIDTH band across the top of the+ page (never a narrow column squeezed beside the app's own UI), holding the sample AI+ prompts and the demo button. Defines when it shows, the X that hides it, the ? in the+ header that brings it back, where the demo button sits and what it looks like, how prompt+ rows are laid out, and the two ICON buttons on every prompt (copy, send to AI) with+ tooltips and toasts instead of text labels. Read BEFORE building or restyling the+ prompts/demo area of any dashboard. Trigger words: newbie panel, sample prompts panel,+ prompts area, say it panel, demo button, copy button, send to ai button, prompt row,+ dismiss panel, bring back help, onboarding panel, getting started panel.+---++Parent skill: **adom-ui-design** (layout partner to **say-strip**, **dash-demo**,+**newbie-graduation**, **icons**, **toasts**)++# The newbie panel++John, 2026-08-24, looking at a dashboard that squeezed the prompts into a narrow left+column beside the app's own two-column UI:++> "this looks not great. it seems to me the right column should not be showing and the+> whole width of the screen should have the newbie panel that has the sample ai prompts+> and the demo button."++The panel is a BAND, not a column. Text wrapping mid-phrase at 200px, six stacked rows+pushing the app off screen, buttons wider than the prompt they belong to: all of that is+the panel being asked to live in a column it was never designed for.++## Layout law++- **Full page width.** The panel spans the dashboard's content width, top of the page,+ above everything the app itself renders. It is never placed inside a sidebar, a split+ pane, or one column of the app's own grid.+- **While the panel is open, the app's own columns yield.** On a full app (chip-fetcher,+ lbr, parts-search) the panel pushes the app's UI DOWN; it does not sit beside it and it+ does not overlay it. A user in the fresh state is reading the panel, not the app.+- **Prompts flow, they do not stack.** Chips wrap left-to-right across the full width,+ three or four per row at desktop width, one per row only on a phone. A phrase must never+ wrap inside itself at desktop width; if it does, the panel is too narrow, which means it+ is in the wrong place.+- **Max width for readability:** cap the panel's inner content at about 1100px and center+ it on very wide screens, so phrases stay scannable.++```+┌──────────────────────────────────────────────────────────────────────────┐+│ Say it ✕ │+│ You never need this page's buttons: just tell your AI, using the word cf.│+│ │+│ ▶ Play the 2-minute demo │+│ │+│ "get me the files for the STM32H757 with cf" ⧉ ➤ │+│ "plan a batch for my BOM with cf" ⧉ ➤ │+│ "find a 3.3V LDO in stock at mouser with cf" ⧉ ➤ │+└──────────────────────────────────────────────────────────────────────────┘+ the app's own UI starts here, full width, below the panel+```++## The demo button++- **One button, inside the panel, directly under the explainer line and ABOVE the prompts.**+ The demo is the fastest path to understanding, so it comes before the reading material.+- Label: `Play the demo`, or with the real duration when you know it+ (`Play the 2-minute demo`). Never "Tour", "Walkthrough", "Start", or an emoji.+- Look: the panel's only PRIMARY button. Teal fill `--teal`, `--on-accent` text, radius 8,+ padding 9px 16px, with a small play glyph (line icon, per **icons**) to its left.+ Everything else in the panel is quiet, so the one filled button reads as the invitation.+- While the demo runs the panel stays put and the player toolbar appears per **dash-demo**;+ the button becomes a disabled "Demo running" state rather than vanishing.++## Prompt rows++Each row is the phrase, then its two buttons, right-aligned in a fixed column so the+buttons form a clean vertical pair down the panel:++- Phrase in curly quotes, body face, never monospace, with the app's noun in `--teal`+ (see **say-strip** for the wording rules).+- Clicking the PHRASE itself copies, same as the copy button. Largest target, safest action.+- The two buttons are **ICONS, not words** (John's ruling): text labels like "Copy" and+ "Send to AI" repeated six times eat the width the phrases need. Icons keep the row to one+ line and let the panel breathe.++## The two icon buttons++Both are line icons per the **icons** skill: 16px, `fill="none"`,+`stroke="currentColor"` (they are inlined into your markup, so inheritance works),+stroke-width 1.8, in a 28x28 ghost button, `--muted` at rest and `--teal` on hover.++| Button | Glyph | Tooltip | On click |+|---|---|---|---|+| **Copy** | two offset rounded rectangles | `Copy this prompt to your clipboard` | Copy, then the success toast `Copied to clipboard. Paste it into any AI thread.` |+| **Send to AI** | a paper-plane / arrow leaving a line | `Send this prompt to a new AI thread` | Open a NEW thread and submit, then `Sent to a new AI thread.` On failure: error toast plus the copy fallback (see **say-strip**) |++Rules that make icon buttons legible rather than cryptic:++- **Every icon button carries a tooltip** (600ms, per the **tooltips** skill) AND an+ `aria-label` with the same words. An icon with no tooltip is a guessing game.+- **Every click answers with a toast** (see **toasts**), because an icon gives no built-in+ confirmation the way a labelled button does. Icon + tooltip + toast is one contract:+ never ship the icon without the other two.+- On touch, where hover cannot happen, the tooltip text is reachable by long-press and the+ toast does the explaining. Keep the 28px button inside a 44px touch target.++## Showing, hiding, bringing back++- **Shows** on a fresh dashboard, expanded, per **newbie-graduation**'s Fresh state.+- **Hidden** by ONE `✕` at the panel's top-right, which collapses the WHOLE panel (prompts,+ demo, explainer) to a single quiet line: `Say it: 6 phrases`, tappable to expand for the+ session. One X for the whole panel is the sanctioned shape, not an X per section.+- **Brought back** by the `?` in the app header, left of the settings cog (see+ **dash-header**). It restores the Fresh panel for the current session; the user's+ dismissal is remembered across reloads until they ask for it again.+- The collapsed one-liner NEVER disappears entirely: it is the user's thread back to+ "you can just say it", which is the whole point of the dashboard.+- Auto-graduation (3 green launches, first AI-driven action) folds the panel the same way a+ dismissal does. See **newbie-graduation** for the triggers and the localStorage key,+ which MUST be namespaced with your app slug.++## Ralph-test++Open the dashboard at 1400px and at 390px and LOOK: the panel spans the full width, no+phrase wraps inside itself, the demo button is the only filled button, and the app's own UI+starts below the panel rather than beside it. Hover both icon buttons and read the+tooltips. Click each and watch for the toast. Press ✕, confirm the one-liner, reload,+confirm it stayed collapsed, press ?, confirm Fresh returns.
skills/settings-layout/SKILL.md+8−2@@ -71,8 +71,14 @@ take the file: - [`assets/icons/settings-cog-outline.svg`](https://wiki.adom.inc/adom/adom-ui-design/files/assets/icons/settings-cog-outline.svg) (THE cog, every app, every surface) - [`assets/icons/README.md`](https://wiki.adom.inc/adom/adom-ui-design/files/assets/icons/README.md)-- `assets/icons/settings-cog.svg` (the old filled cog) is DEPRECATED: do not use it in- anything new, and swap it out when you touch a header that still has it.+- `assets/icons/settings-cog.svg` (the old filled cog) has been DELETED from this pack.+ Anything still pointing at it must move to the outline file.++The shipped file is a TRUE line drawing (2026-08-24): `fill="none"`, stroke paths, a circle+plus the gear ring, hardcoded `stroke="#e6edf3"` because it is loaded as its own document+via `<img src>`. The version before that date was an outline-SHAPED but filled path on+`currentColor`, which is neither a line drawing nor visible when loaded as a file; if you+copied the cog before 2026-08-24, re-copy it. See the **icons** sub-skill for why. It is `viewBox="0 0 24 24"`, sized `1em`, painted `currentColor`, so it inherits colour and size from the button. If your app already renders Iconify, `<Icon icon="mdi:cog-outline" />`
skills/toasts/SKILL.md+53@@ -50,6 +50,59 @@ broken, and a toast is the cheapest way to confirm it worked. .toast .action { margin-left: auto; color: #64abff; font-weight: 600; cursor: pointer; } ``` +## The exact look, so every Adom app's toast is the same toast++The rules above left too much to taste and the fleet drifted (2026-08-24 audit). These are+the numbers. Copy them; do not re-derive them.++- **Placement:** bottom center, `position: fixed`, `bottom: 24px`, horizontally centered,+ `z-index: 400`. Not bottom-right, not top, not anchored to a panel.+- **Size:** `min-width: 280px`, `max-width: min(520px, calc(100vw - 32px))`. Text wraps+ rather than the toast growing wider.+- **Stack:** newest ON TOP (so it appears nearest the bottom edge and older ones ride up),+ `gap: 10px`, max 3 visible.+- **Icon:** a 16px LINE icon per the **icons** skill, in the type's color, at the left.+ A check for success, an exclamation-in-circle for error, an info-circle for info.+ Never emoji.+- **Type color appears in exactly two places:** the icon and the 3px left border. The+ toast's own background stays `--surface` for all three types, so a stack of mixed toasts+ reads as one family rather than a traffic light.++## Motion++One entrance, one exit, fleet-wide:++```css+@keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(.98); }+ to { opacity: 1; transform: none; } }+@keyframes toast-out { from { opacity: 1; }+ to { opacity: 0; transform: translateY(4px); } }+.toast { animation: toast-in 180ms cubic-bezier(.2,.8,.2,1) both; }+.toast.leaving{ animation: toast-out 140ms ease both; }+@media (prefers-reduced-motion: reduce) {+ .toast, .toast.leaving { animation-duration: 1ms; }+}+```++Rise 8px and fade in over 180ms, fade out over 140ms. No slide from the side, no bounce, no+spin. A toast is a whisper, and the exit is faster than the entrance so dismissing feels+instant.++## The container++```css+.toast-stack {+ position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);+ display: flex; flex-direction: column-reverse; gap: 10px;+ z-index: 400; pointer-events: none; /* clicks fall through the gaps */+}+.toast { pointer-events: auto; } /* but the toasts themselves are clickable */+```++`column-reverse` is what puts the newest nearest the bottom edge while older ones ride up.+`pointer-events: none` on the stack keeps a lingering toast from eating clicks meant for+the app underneath.+ ## The `POST /ui/toast` hook: feedback AND AI narration Build a server endpoint that raises a toast, from day one. It serves two callers with one