macos-swiftui-dev
macOS SwiftUI Development
Overview
Create native macOS applications using SwiftUI with proper structure, navigation patterns, and macOS-specific UI components.
Project Structure
Create files in the working directory with the following structure:
AppName/
├── AppName/
│ ├── AppNameApp.swift # Main app entry point
│ ├── ContentView.swift # Main content view
│ ├── Views/ # Additional views
│ └── Models/ # Data models
└── Info.plist # App configuration
App Type Selection
Choose the appropriate template based on the user's request:
Window-Based Apps
Use assets/templates/BasicWindowApp.swift when creating:
- Standard macOS applications with windows
- Apps with sidebar navigation
- Document-based applications
- Multi-window applications
Menu Bar Apps
Use assets/templates/MenuBarApp.swift when creating:
- Apps that live in the menu bar
- Status bar utilities
- Background monitoring tools
- Quick-access tools
Quick Start Workflows
Creating a Basic Window App
- Copy the BasicWindowApp.swift template from
assets/templates/ - Rename the struct and update app name references
- Customize the ContentView with the desired layout
- Add NavigationSplitView for sidebar navigation if needed
- Include Info.plist from
assets/templates/Info.plist
Example:
// Copy and modify BasicWindowApp.swift
@main
struct MyMacApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
Creating a Menu Bar App
- Copy the MenuBarApp.swift template from
assets/templates/ - Update the app name and status bar icon
- Customize the PopoverContentView with desired UI
- Modify SettingsView for app preferences
- Use Info-MenuBar.plist (with LSUIElement set to true)
Key components:
@NSApplicationDelegateAdaptorfor AppDelegate- NSStatusItem for menu bar presence
- NSPopover for displaying UI
- Settings scene for preferences window
Adding Keyboard Shortcuts
Add to the App struct:
.commands {
CommandMenu("Actions") {
Button("New Item") {
createNewItem()
}
.keyboardShortcut("n", modifiers: .command)
Button("Delete") {
deleteItem()
}
.keyboardShortcut(.delete)
}
}
Reference Documentation
Consult these references for detailed patterns and examples:
references/swiftui-patterns.md: Comprehensive SwiftUI patterns for macOS including navigation, windows, forms, tables, toolbars, and morereferences/menubar-apps.md: Complete guide for menu bar app development including popovers, menus, icons, and launch at login
Common Patterns
Navigation with Sidebar
NavigationSplitView {
List {
NavigationLink("Section 1", destination: Section1View())
NavigationLink("Section 2", destination: Section2View())
}
} detail: {
Text("Select an item")
}
Toolbar
.toolbar {
ToolbarItem(placement: .primaryAction) {
Button("Add") {
addItem()
}
}
}
Settings Window
Settings {
SettingsView()
}
Forms
Form {
Section("General") {
TextField("Name:", text: $name)
Toggle("Enabled", isOn: $enabled)
}
}
.formStyle(.grouped)
macOS-Specific Considerations
- Window Sizing: Always set minimum window sizes with
.frame(minWidth:minHeight:) - Menu Bar: Use template images for automatic dark mode support
- Keyboard Navigation: Ensure all interactive elements support keyboard access
- Settings: Provide a Settings scene for user preferences
- Info.plist: Use
LSUIElement: truefor menu bar-only apps - SF Symbols: Use system symbols for consistent iconography
Workflow
- Determine app type (window-based or menu bar)
- Copy appropriate template from
assets/templates/ - Customize app name and bundle identifier
- Build out UI using SwiftUI components
- Add keyboard shortcuts and menus as needed
- Consult reference files for specific patterns
- Include proper Info.plist configuration
Resources
assets/templates/
BasicWindowApp.swift- Standard window-based app with sidebar navigationMenuBarApp.swift- Complete menu bar app with popover and settingsInfo.plist- Standard app configurationInfo-MenuBar.plist- Menu bar app configuration (LSUIElement: true)
references/
swiftui-patterns.md- Comprehensive SwiftUI patterns for macOSmenubar-apps.md- Menu bar app development guide
More from fanthus/agent-skills
openclaw-expert
OpenClaw learning expert that retrieves and synthesizes information from official documentation (https://docs.openclaw.ai) and GitHub repository (https://github.com/openclaw/openclaw). Use this skill whenever the user asks questions about OpenClaw, including installation, configuration, API usage, concepts, troubleshooting, best practices, or any OpenClaw-related inquiries. Triggers include OpenClaw questions about features, implementation, usage, setup, or any openclaw-related topics.
130github-repo-management
Create and manage GitHub repositories, branches, commits, and PRs via local git commands and GitHub MCP. Use when the user asks to create a repo, push code, get repo info, manage branches, open PRs, or work with GitHub repositories.
16react-native-app
Build cross-platform mobile applications using React Native. Use when the user wants to create, develop, or work with React Native apps for iOS and Android. Triggers include requests to build mobile apps, create React Native components, set up navigation, integrate native modules, handle app state management, implement animations, or work with React Native specific features like FlatList, StyleSheet, or platform-specific code.
7electron-dev
Build cross-platform desktop applications with Electron using best practices for security, performance, and user experience. Use this skill when developing system tools (file managers, screenshot tools, productivity apps) or when working with Electron projects. Triggers include requests to create Electron apps, implement file operations, system tray functionality, window management, IPC communication, or optimize Electron performance. Supports vanilla JavaScript, React, and Vue frameworks with comprehensive code templates that embed security and performance best practices directly in comments.
6git-commit-pro
Generate professional git commit messages following Conventional Commits specification. Use when user asks to commit changes or write a commit message.
6canvas-design
Generates visual art as .png or .pdf from design philosophy or from WeChat public account content. Use when the user asks for a poster, cover image, piece of art, or static visual; when they provide 微信公众号内容 for a cover; or when they want design philosophy expressed on a canvas. Creates original work only; no copying existing artists.
5