Design and build native-feeling macOS application UIs. Use this skill whenever the user asks to create a desktop app, macOS app, Mac-style interface, Apple-style UI, system utility, or anything that should look and feel like a native Mac application. Also trigger when users mention "native feel", "desktop app design", "Apple design patterns", "sidebar layout", "traffic lights", or want to build tools/utilities that feel like they belong on macOS. This skill covers layout, composition, interaction patterns, animations, light/dark mode, and all the subtle details that make an app feel like Apple built it.
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: