macos-design
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.
How do I install this agent skill?
npx skills add https://github.com/ceorkm/macos-design-skill --skill macos-designIs this agent skill safe to install?
- Gen Agent Trust Hubpass
This skill is a pure design reference for creating macOS-style user interfaces. It contains no executable scripts, network calls, or data processing logic. It safely provides CSS patterns, layout structures, and visual guidelines for building desktop-like applications.
- Socketpass
No alerts
- Snykpass
Risk: LOW · No issues
What does this agent skill do?
macOS Native App Design Skill
Build interfaces that feel like they belong on the user's computer — not websites crammed into a window.
Core Philosophy
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.
Before You Code
Read these references based on what you're building:
- All macOS apps → Read
references/layout-and-composition.md(required) - Apps with keyboard shortcuts, panels, toasts, popovers → Read
references/interaction-patterns.md - Light/dark mode, color, typography → Read
references/visual-design.md
Quick-Start Checklist
Use this as a pre-flight before writing any code:
- Layout: Top bar for global actions, sidebar for navigation (skip if nav is minimal), center for content
- Traffic lights: Integrate into the UI — top bar or sidebar, never floating awkwardly
- Window drag zone: Top ~50px must be draggable, keep it uncluttered
- Empty states: Show them. Progressive disclosure — only reveal UI when it's useful
- Keyboard shortcuts: Every primary action needs one. Every shortcut needs visual feedback
- Light + Dark mode: Design both. Do NOT directly invert colors (see visual-design reference)
- Search: Always prominent and accessible. Consider floating search bar or command palette
- Drag and drop: Content in AND out of the app. This is non-negotiable for native feel
- Micro-animations: Every state change gets a transition. No interaction without feedback
- Onboarding: Brief, modal-based, teaches shortcuts through doing (not reading)
Implementation Notes
When building as a web artifact (React/HTML):
- Simulate the macOS window chrome (title bar, traffic light dots, rounded corners)
- Use
-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text"font stack - Use
backdrop-filter: blur()for native vibrancy/translucency effects - Rounded corners: 10px for windows, 8px for cards, 6px for buttons, 4px for inputs
- Respect
prefers-color-schememedia query for automatic light/dark switching - Shadows should be subtle and layered, not a single heavy drop shadow
When building with Electron, Tauri, or native frameworks:
- Use system title bar integration where possible
- Respect system accent color and appearance settings
- Use native drag-and-drop APIs, not polyfills
How can the creator link this skill?
Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.
<a href="https://skillzs.dev/skills/ceorkm/macos-design-skill/macos-design">View macos-design on skillZs</a>