macos-app-design▌
petekp/agent-skills · updated Apr 8, 2026
Guide for designing and implementing native-feeling, "good Mac citizen" apps: fast, elegant, accessible, and deeply integrated with macOS workflows.
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
- Prefer system components and conventions over bespoke UI—fastest path to "feels right on Mac"
- If you customize bars, backgrounds, borders, or control chrome: stop and justify it
Quick Reference: Mac Citizen Checklist
| Area | Requirement |
|---|---|
| Menu Bar | Standard layout (App/File/Edit/View/Window/Help), ⌘, for Settings |
| Keyboard | Every primary command reachable via keyboard, standard shortcuts work |
| Windows | Resize fluidly, support multiple windows, respect fullscreen/minimize |
| Sidebars | Top-level navigation, scannable items, content extends behind |
| Toolbars | Group by function/frequency, demote secondary to "more" menu |
| Text | Use system text components, standard editing behaviors |
| Accessibility | VoiceOver 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
- App archetype identified
- Information architecture (sidebar structure, navigation, window model)
- Command map (menus + keyboard shortcuts for every major feature)
- State + data model (persistence, undo/redo, concurrency)
- 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
| Mistake | Fix |
|---|---|
| Missing menu bar commands | Every feature in menus with keyboard shortcuts |
| Settings outside App menu | Always ⌘, opening from App menu |
| Custom text components | Use system text for Mac editing ecosystem |
| Toolbar overload | Demote secondary actions, group by function |
| Glass on content | Reserve Liquid Glass for navigation layer only |
| Breaking standard shortcuts | Never override ⌘C, ⌘V, ⌘Z, etc. |
| Single-window only | Support multiple windows when it benefits workflows |
Discussion
Product Hunt–style comments (not star reviews)- No comments yet — start the thread.
Ratings
4.6★★★★★39 reviews- ★★★★★Aisha Thompson· Dec 28, 2024
Keeps context tight: macos-app-design is the kind of skill you can hand to a new teammate without a long onboarding doc.
- ★★★★★Anika Diallo· Dec 20, 2024
macos-app-design is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
- ★★★★★Mateo Robinson· Dec 20, 2024
Registry listing for macos-app-design matched our evaluation — installs cleanly and behaves as described in the markdown.
- ★★★★★Chaitanya Patil· Dec 8, 2024
Keeps context tight: macos-app-design is the kind of skill you can hand to a new teammate without a long onboarding doc.
- ★★★★★Piyush G· Nov 27, 2024
Registry listing for macos-app-design matched our evaluation — installs cleanly and behaves as described in the markdown.
- ★★★★★Hassan Tandon· Nov 19, 2024
Registry listing for macos-app-design matched our evaluation — installs cleanly and behaves as described in the markdown.
- ★★★★★Noor Wang· Nov 15, 2024
macos-app-design fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
- ★★★★★Daniel Khan· Nov 11, 2024
macos-app-design reduced setup friction for our internal harness; good balance of opinion and flexibility.
- ★★★★★Hana Haddad· Nov 11, 2024
Keeps context tight: macos-app-design is the kind of skill you can hand to a new teammate without a long onboarding doc.
- ★★★★★Shikha Mishra· Oct 18, 2024
macos-app-design reduced setup friction for our internal harness; good balance of opinion and flexibility.
showing 1-10 of 39