better-desktop-interface

Better Desktop Interface

Desktop not is mobile nor a landing page. Tool density, first-class keyboard, hover and window chrome. The same hierarchy and tokens across the product — without cloning OS pixels.

egui implementation: egui. Webview: tauri + tokens from better-web-interface plus the rules of this skill. Product design system: design-system.

Expected result

• Obvious hierarchy within seconds; one primary action per view.
• App looks like desktop: menu, shortcuts, resize, status — not a boxed website.
• Light/dark with the same roles semantic.
• Keyboard traverses the UI; mouse has hover and context menu.
• Accessible: AA contrast, visible focus, AccessKit / equivalents.

Before designing

1. Product — dense tool vs. consumer app (choose the density and keep it).
2. Signature — one accent, type and shape — not a new look per window.
3. Platform — native menu on macOS vs. in-window on Windows/Linux; Cmd vs Ctrl shortcuts.
4. Inventory — existing tokens and chrome win.

Desktop usability (core)

Window

• Title = current document or context; * / bullet if there are unsaved changes.
• min_size realistic; user resizes. Do not fix 1280×720 without reason.
• Dialog modal for destructive decision or save; document window for continuous work.
• Multi-window only with clear identity (do not clone the same screen twice without a model).
• Close: confirm if dirty; tray only if the product is background (without forcing).

Menu, shortcuts, context

• Menu bar: File / Edit / View / … with predictable items (New, Open, Save, Quit).
• Shortcut visible in the item (⌘S / Ctrl+S). The same command in the menu, toolbar and shortcut.
• Context menu on right click of the target (row, canvas), not a hidden ⋮ mobile-style.
• Command palette (⌘K) is extra — it does not replace the menu in a serious app.

Keyboard and focus

• Tab / Shift+Tab in visual order. Skip repetitive chrome.
• Enter confirms the focused dialog; Esc cancels / closes.
• Arrows in lists and menus; Space checks a checkbox.
• Do not capture the global keyboard (except documented app shortcuts).
• Visible focus (ring / focus-ring / Visuals.selection) — never hover only.

Pointer and targets

• Hover changes cursor and surface; short tooltip on icons without label.
• Dense tool: targets ~20–24px; CTA and menu items more spacious.
• Do not require 44px touch on every toolbar button — that is mobile.
• Drag-and-drop with affordance (drop highlight) and Esc to cancel.
• Scroll: bars when content overflows; don't hide critical overflow.

Feedback and document

• Status bar or equivalent: path, zoom, network/save state.
• Save: explicit or autosave visible ("Saved just now").
• Undo/Redo in Edit when the domain allows it; standard shortcuts.
• Empty / loading / error are UI, not a blank panel.
• Long progress off the UI thread (egui: channel; Tauri: event) + indicator in the chrome.

What not to copy

Avoid	Why
Hamburger + drawer	Desktop has a menu bar
Bottom navigation	Mobile pattern
Airy hero, 80px padding	Marketing web
Mouse only, no shortcut	Desktop HIG
44px touch on everything	Tool density
Swipe / pull-to-refresh	Not the mental model

macOS: native menu at the top of the screen when the toolkit allows it. Windows/Linux: menu in the window. Don't invent a third chrome.

Semantic tokens

Never scatter hex / Color32 across screens. Roles:

Role	Function
background	Window background
surface	Panels, inputs
surfaceElevated	Menus, popovers, dialogs
text / textMuted	Body and metadata
border	Dividers, outlines
accent / onAccent	CTA, selection, brand focus
success / warning / danger	Feedback
focusRing	Keyboard focus

• One accent. Neutrals carry the UI.
• AA contrast: 4.5:1 body, 3:1 large text / essential icons.
• Dark: surfaces by layer + subtle border; avoid #000 + unreadable gray.
• 4/8px base. Tool: tighter spacing than marketing.

egui

• Map roles to egui::Visuals (panel_fill, window_fill, widgets, selection, hyperlink_color, extreme_bg_color).
• Spacing / TextStyle named (Body, Heading, Small) — not loose 13px.
• Light/dark: Visuals::light() / dark() as a base, then product tokens.
• Style::interaction.tooltip_delay conscious; no instant tooltips on everything.

Tauri / web desktop

• CSS tokens from better-web-interface.
• Plus this skill: menu, shortcuts, density, window chrome, context menu.
• A fixed "mobile first" viewport doesn't work; app layouts (sidebar + center + status).

Typography and density

• Short scale: title, body, label, caption. System or a brand font.
• Hierarchy by size and weight.
• Utility: more compact (lists, tables, inspectors). Consumer: a bit more airy — choose and keep.
• Reading measure in text panels (~45–75ch); tables can be dense.

States

• Interactive: default, hover, focus-visible, active, disabled.
• Form: error next to the field + actionable message.
• Selection in lists: token accent / selection, not just bold.
• Reduced motion: no animating layout for no reason.

Anti-patterns (UI “AI” or copied mobile)

• Purple gradient + glassmorphism
• Bottom nav / FAB as primary navigation
• Each window with a different look
• No menu bar and no shortcuts
• Dark = inverting colors without tokens
• Card-stack of a web dashboard in a native tool without need

Implementation flow

1. Density + light/dark tokens (or Visuals) documented.
2. Chrome: menu, shortcuts, title, status.
3. View: sidebar/central with one clear primary.
4. Keyboard (Tab, Enter, Esc, accelerators) + hover + context menu.
5. Contrast and visible focus in both themes.

Integration with other skills

• egui / eframe: egui
• Tauri webview: tauri + better-web-interface
• Product tokens: design-system
• Mobile: better-mobile-interface — not apply this skill in a touch-first app

Completion criteria

• Menu + shortcuts + Esc/Enter in dialogs
• Semantic tokens; no loose hex
• Desktop density (not mobile, not landing)
• Hover, visible focus, context menu where there are item actions
• Light/dark with the same roles
• Title/status reflect the document