How do I install the Macos App Design skill?

Run npx skillmds@latest add tomevault-io/macos-app-design in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Macos App Design safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Macos App Design?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Macos App Design free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Macos App Design?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Macos App Design by tomevault-io — Agent Skill

Name: Macos App Design
Author: tomevault-io

Macos App Design

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.

tomevault-io Updated Sep 17, 2026

File contents

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

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: macos-app-designdescription: 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 & DevelopmentGuide for designing and implementing native-feeling, "good Mac citizen" apps: fast, elegant, accessible, and deeply integrated with macOS workflows.## Two Rules That Beat Everything Else1. **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| 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 ArchetypesIdentify 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 Building1. **App archetype** identified2. **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 ReferenceFor complete design system details, Icon Composer workflow, SF Symbols guidance, evaluation rubrics, and Definition of Done checklist:See: [references/macos-design-guide.md](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 |---> Converted and distributed by [TomeVault](https://tomevault.io/claim/por) — claim your Tome and manage your conversions.

Frequently asked questions