playbooks

home / skills / dasien / claudemultiagenttemplate / desktop-ui-design

desktop-ui-design skill

/templates/.claude/skills/desktop-ui-design

This skill helps you design intuitive desktop interfaces by applying native widgets, platform conventions, and usability patterns to boost usability and

npx playbooks add skill dasien/claudemultiagenttemplate --skill desktop-ui-design

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
2.2 KB
---
name: "Desktop UI Design"
description: "Design intuitive desktop interfaces following platform conventions with proper layouts, keyboard shortcuts, and native widgets"
category: "ui-design"
required_tools: ["Read", "Write", "WebSearch"]
---

# Desktop UI Design

## Purpose
Design intuitive desktop application interfaces using native UI frameworks (Tkinter, Qt, WPF, etc.) following platform conventions and usability best practices.

## When to Use
- Creating desktop application interfaces
- Designing forms and dialogs
- Planning menu structures and navigation
- Organizing application windows

## Key Capabilities
1. **Layout Design** - Organize controls logically with proper spacing
2. **Platform Conventions** - Follow OS-specific design guidelines
3. **Usability Patterns** - Apply desktop UI best practices

## Approach
1. Understand user workflows and tasks
2. Group related controls together
3. Follow platform conventions (Windows, macOS, Linux)
4. Use familiar patterns (menus, toolbars, status bars)
5. Ensure keyboard accessibility
6. Provide visual feedback for actions

## Example
**Context**: Task management application main window
````
Menu Bar: File | Edit | View | Tools | Help
Toolbar: [New] [Open] [Save] [Refresh]
─────────────────────────────────────
Main Content Area:
┌─ Task List ─────────────────────┐
│ ☐ Task 1    High    Pending     │
│ ☑ Task 2    Normal  Complete    │
│ ☐ Task 3    Low     Pending     │
└─────────────────────────────────┘
Status Bar: 3 tasks | 1 active | Last refresh: 2:30 PM
````

**Design Principles**:
- Most important actions in toolbar
- Full functionality in menus
- Context menus for quick access
- Status bar for non-critical info
- Keyboard shortcuts for common actions

## Best Practices
- ✅ Use native widgets for platform consistency
- ✅ Provide keyboard shortcuts (Ctrl+N, F5, etc.)
- ✅ Show visual feedback (disabled states, progress indicators)
- ✅ Use standard dialog patterns (OK/Cancel, Yes/No)
- ❌ Avoid: Custom widgets that don't match platform look
- ❌ Avoid: Hiding important actions deep in menus

Overview

This skill helps design intuitive desktop application interfaces that follow platform conventions and usability best practices. It focuses on layout, native widgets, keyboard accessibility, and clear interaction patterns to make desktop apps feel familiar and efficient. The guidance applies across common frameworks like Tkinter, Qt, and WPF.

How this skill works

The approach starts by mapping user workflows and grouping related controls, then applying OS-specific conventions for menus, dialogs, and keyboard shortcuts. It inspects layout hierarchy, control spacing, affordances (disabled/enabled states), and feedback mechanisms such as progress indicators and status bars. Recommendations produce concrete UI structure, keyboard mappings, and component choices consistent with the target platform.

When to use it

  • Designing the main window, dialogs, or complex forms for a desktop app
  • Planning menus, toolbars, context menus, and application navigation
  • Implementing keyboard shortcuts and accessibility for power users
  • Choosing native widgets and controls for platform consistency
  • Evaluating visual feedback and state messaging (progress, errors)

Best practices

  • Use native widgets and platform-standard controls to match user expectations
  • Place the most common actions in toolbars and keep full functionality in menus
  • Provide clear keyboard shortcuts and make them discoverable in menus
  • Group related controls and use consistent spacing and alignment
  • Give immediate visual feedback for actions and show non-critical info in a status bar
  • Follow standard dialog patterns (OK/Cancel, Yes/No) and avoid hiding key actions

Example use cases

  • Designing a task manager main window with a task list, filters, toolbar, and status bar
  • Creating a multi-step settings dialog that respects platform modal and layout conventions
  • Reworking a legacy form to use native input widgets and keyboard navigation
  • Planning a menu structure and global shortcuts for a productivity application
  • Designing context menus and right-click actions for a file explorer-like view

FAQ

Should I always use native widgets?

Yes—native widgets provide the most consistent look, accessibility, and platform-specific behavior. Use custom widgets only when native options cannot meet functional needs.

How do I choose keyboard shortcuts across platforms?

Prefer platform conventions (e.g., Ctrl on Windows/Linux, Cmd on macOS) and map common actions to well-known shortcuts while avoiding conflicts with system-level keys.