skills.rest
leobbaroni
leobbaroniCOMMUNITY
Explore all skills by this author →
GitHub

desktop-principles

Implements desktop UX patterns for hover states, keyboard shortcuts, multi-window, and focus management.

1|Updated Jul 19, 2026
Search Tags:#swiftui#keyboard shortcuts#focus management#multi-window#compose desktop#desktop ux#hover states
One-click install
npx skills add https://github.com/leobbaroni/maestro --skill desktop-principles-leobbaroni
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: desktop-principles
Source: https://github.com/leobbaroni/maestro/tree/main/skills/maestro/library/genjutsu/_jutsu/desktop-principles
Command: npx skills add https://github.com/leobbaroni/maestro --skill desktop-principles-leobbaroni

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Desktop applications often ship with mobile-first habits: missing hover feedback, no keyboard shortcuts, hidden navigation, and broken focus rings. This Skill provides concrete, cross-platform guidance for building interfaces that feel native on macOS, Windows, Linux, and web desktop. ## Core Features & Use Cases - Hover and Pointer Guidance: Mandatory hover states with 100-200ms transitions, Fitts's Law target sizing, and WCAG 2.5.8 minimum 24x24px targets, with CSS, SwiftUI, and Compose Desktop examples. - Keyboard Shortcuts and Focus: Canonical shortcut tables (Cmd/Ctrl+N, S, F, K), cross-platform modifier detection, chord patterns, and focus management via @FocusState, FocusRequester, and :focus-visible. - Multi-Window Architecture: When to use WindowGroup vs Window, state sharing via singletons or DI, and lifecycle pitfalls like offscreen window restoration. - Use Case: You are building a desktop web app and users complain it feels like a mobile site. Apply this Skill to add hover feedback, bind Cmd+K to a command palette, restore focus rings, and replace the hamburger menu with a persistent sidebar. ## Quick Start Review my desktop app's main screen and apply desktop UX principles for hover states, keyboard shortcuts, and focus management.

Frequently Asked Questions about desktop-principles

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add keyboard shortcuts to a desktop web app?▼

Detect the platform once, then listen for keydown events using event.metaKey on macOS and event.ctrlKey elsewhere. Bind canonical combos like Cmd/Ctrl+K for a command palette and Cmd/Ctrl+S for save, and surface them in menus and tooltips.

What are the standard keyboard shortcuts on macOS vs Windows?▼

Core shortcuts mirror across platforms: Cmd+N vs Ctrl+N for new, Cmd+S vs Ctrl+S for save, Cmd+F vs Ctrl+F for find, and Cmd+W vs Ctrl+W for close window. macOS uses Cmd+Q to quit while Windows uses Alt+F4.

What is the minimum click target size for desktop interfaces?▼

WCAG 2.5.8 sets the minimum target size at 24x24 CSS pixels for pointer input. Common desktop ranges are 24-32px for icon buttons and 28-36px for toolbar items, smaller than the 44pt mobile minimum.

How do I share state between multiple windows in SwiftUI or Compose Desktop?▼

Hold the source of truth in a singleton, DI container, or an @Observable model injected via environment, and let each window observe it. Secondary windows like inspectors should never own primary state, so closing them never loses work.

Why should I not remove focus outlines with outline none?▼

Removing focus outlines leaves keyboard users with no indication of where focus is, an accessibility regression. Use :focus-visible instead, which keeps mouse clicks ring-free while showing a visible outline during keyboard navigation.

When should a desktop app open a new window instead of a modal?▼

Open a new window for long-running tasks like exports, parallel document comparison, or floating inspectors. Use sheets, popovers, or tabs for transient confirmations and brief settings, since extra windows multiply state and testing surface.

Related Skills

Explore More Design & Creative Skills→
testdriveraitestdriverai
238

testdriver:press-keys

Simulate keyboard input across web and desktop applications using the testdriver.pressKeys API.

Official
Intermediate
samjhechtsamjhecht
4

frontend-accessibility-verification

Verify frontend UI accessibility compliance with axe-core, keyboard, screen reader, and Lighthouse audits.

Community
Advanced
TimeKastTimeKast

mobile-games

Translate mobile game constraints into touch, performance, and app store design decisions.

Official
Intermediate
luyangliuableluyangliuable

adapt

Rework existing designs for different devices, screen sizes, and input methods.

Community
Advanced