Back to list
petekp

macos-app-design

by petekp

My personal Claude Code setup

10🍴 3📅 Jan 23, 2026

SKILL.md


name: macos-app-design description: Use when designing or building native macOS applications with SwiftUI or AppKit. Triggers on menu bar structure, keyboard shortcuts, multi-window behavior, Liquid Glass design system, macOS Tahoe/Sequoia, sidebar navigation, toolbar design, app icons, SF Symbols, or making an app feel like a "good Mac citizen."

macOS App Design & Development

Guide for designing and implementing native-feeling, "good Mac citizen" apps: fast, elegant, accessible, and deeply integrated with macOS workflows.

Two Rules That Beat Everything Else

  1. Prefer system components and conventions over bespoke UI—fastest path to "feels right on Mac"
  2. If you customize bars, backgrounds, borders, or control chrome: stop and justify it

Quick Reference: Mac Citizen Checklist

AreaRequirement
Menu BarStandard layout (App/File/Edit/View/Window/Help), ⌘, for Settings
KeyboardEvery primary command reachable via keyboard, standard shortcuts work
WindowsResize fluidly, support multiple windows, respect fullscreen/minimize
SidebarsTop-level navigation, scannable items, content extends behind
ToolbarsGroup by function/frequency, demote secondary to "more" menu
TextUse system text components, standard editing behaviors
AccessibilityVoiceOver labels, full keyboard navigation, Reduced Motion support

Liquid Glass Quick Rules

Do:

  • Use for navigation/controls layer (toolbars, sidebars, bars)
  • Let system components provide built-in behaviors

Don't:

  • Apply to content layer (tables, lists, document content)
  • Stack "glass on glass"

App Archetypes

Identify your app type first:

  • Document-based: Files as primary units (open/save/duplicate)
  • Library + editor: Sidebar lists items, detail in main area
  • Utility: Single window, optional menu bar
  • Menu-bar app: Lives in menu bar, minimal UI
  • Pro tool: Dense, power-user workflows

Deliverables Before Building

  1. App archetype identified
  2. Information architecture (sidebar structure, navigation, window model)
  3. Command map (menus + keyboard shortcuts for every major feature)
  4. State + data model (persistence, undo/redo, concurrency)
  5. Accessibility plan (VoiceOver, keyboard, contrast, reduce motion)

Full Reference

For complete design system details, Icon Composer workflow, SF Symbols guidance, evaluation rubrics, and Definition of Done checklist:

See: references/macos-design-guide.md

Common Mistakes

MistakeFix
Missing menu bar commandsEvery feature in menus with keyboard shortcuts
Settings outside App menuAlways ⌘, opening from App menu
Custom text componentsUse system text for Mac editing ecosystem
Toolbar overloadDemote secondary actions, group by function
Glass on contentReserve Liquid Glass for navigation layer only
Breaking standard shortcutsNever override ⌘C, ⌘V, ⌘Z, etc.
Single-window onlySupport multiple windows when it benefits workflows

Score

Total Score

65/100

Based on repository quality metrics

SKILL.md

SKILL.mdファイルが含まれている

+20
LICENSE

ライセンスが設定されている

+10
説明文

100文字以上の説明がある

0/10
人気

GitHub Stars 100以上

0/15
最近の活動

1ヶ月以内に更新

+10
フォーク

10回以上フォークされている

0/5
Issue管理

オープンIssueが50未満

+5
言語

プログラミング言語が設定されている

+5
タグ

1つ以上のタグが設定されている

+5

Reviews

💬

Reviews coming soon