From all-skills
Designs native-feeling macOS UIs for desktop apps with sidebar layouts, traffic lights, interactions, micro-animations, light/dark mode, and effects via React, CSS, or Electron.
How this skill is triggered — by the user, by Claude, or both
Slash command
/all-skills:macos-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Build interfaces that feel like they belong on the user's computer — not websites crammed into a window.
Build interfaces that feel like they belong on the user's computer — not websites crammed into a window.
A native app is not a destination. It is a system tool that lives where the user needs it. Design every interaction around this principle: appear when needed, get out of the way immediately after.
Read these references based on what you're building:
references/layout-and-composition.md (required)references/interaction-patterns.mdreferences/visual-design.mdUse this as a pre-flight before writing any code:
When building as a web artifact (React/HTML):
-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text" font stackbackdrop-filter: blur() for native vibrancy/translucency effectsprefers-color-scheme media query for automatic light/dark switchingWhen building with Electron, Tauri, or native frameworks:
npx claudepluginhub davepoon/buildwithclaude --plugin all-skillsProvides Apple Human Interface Guidelines for Mac apps, covering menu bar, keyboard shortcuts, and window management with SwiftUI and AppKit examples.
Generates SwiftUI and UIKit components for iOS apps following Apple's HIG. Validates designs, ensures accessibility compliance for iPhone, iPad, and Apple Watch.
macOS platform-specific development with menu bar apps, window management, AppKit integration, and notarization. Use when building Mac apps, creating menu bar extras, or distributing outside App Store.