macos-app-design_skill

This skill helps you design macOS apps that feel native and citizen-friendly by aligning with system conventions and Liquid Glass rules.

Makefile

2

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill petekp/agent-skills --skill macos-app-design

SKILL.md3.1 KB

Overview

This skill helps designers and developers build native-feeling macOS apps with SwiftUI or AppKit, focusing on system conventions, keyboard-first workflows, and macOS visual language like Liquid Glass. It prioritizes making apps behave like a “good Mac citizen”: fast, accessible, multi-window aware, and consistent with platform expectations. Use it to audit or plan menu structure, shortcuts, sidebars, toolbars, icons, and overall app archetype.

How this skill works

The skill inspects your app’s UI and interaction surface against macOS conventions: menu bar layout, keyboard shortcuts, window behavior, sidebar/navigation patterns, toolbar grouping, and where Liquid Glass is applied. It flags deviations from platform standards, recommends keyboard mappings and menu placement, and produces concrete deliverables to resolve gaps (archetype, information architecture, command map, state model, accessibility plan).

When to use it

Early design phase to choose an app archetype (document, library+editor, utility, menu-bar, pro tool)
Before implementation to define menu structure and keyboard command map
While designing sidebars, toolbars, or Liquid Glass usage to avoid misapplication
When auditing an existing macOS app for platform consistency and accessibility
Prior to release to confirm multi-window behavior, fullscreen support, and system shortcut compatibility

Best practices

Prefer built-in system components and conventions; custom chrome must be justified
Put Settings in the App menu and expose primary commands in the menu bar with standard ⌘ shortcuts
Make every primary command reachable by keyboard; do not override common system shortcuts (⌘C/⌘V/⌘Z)
Use Liquid Glass only for navigation/controls (toolbars, sidebars), never for main content layers
Group toolbar items by function and demote secondary actions into a “more” menu or popover
Plan accessibility and state early: VoiceOver labels, full keyboard navigation, Reduced Motion, undo/redo, and persistence

Example use cases

Designing a mail or notes app that uses a sidebar + editor layout and multiple windows
Converting a single-window utility into a multi-window, document-based workflow
Auditing an app that misuses translucent chrome or places settings outside the App menu
Defining a keyboard-first command map for a pro tool with dense shortcuts
Planning iconography and SF Symbols usage for consistent macOS look-and-feel

FAQ

Use Liquid Glass for navigation and controls (sidebars, toolbars, bars). Avoid applying it to content areas like documents, tables, and lists.

How should I handle keyboard shortcuts?

Expose every primary command via keyboard, follow macOS standard shortcuts, and never reassign common system shortcuts like ⌘C/⌘V/⌘Z.

When should I support multiple windows?

Support multiple windows whenever users work on multiple items or compare content; single-window is appropriate only for simple utilities or menu-bar apps.