# Design Macos Interfaces

> Design native-feeling macOS interfaces using Apple Human Interface Guidelines and common macOS app conventions. Use when Codex needs to create, redesign, implement, or review Mac app windows, sidebars, toolbars, settings windows, menu behavior, command palettes, document workflows, Flutter macos_ui layouts, desktop web apps with macOS feel, or cross-platform Apple-style desktop experiences.

- Skill: `0xkoru/design-macos-interfaces` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add 0xkoru/design-macos-interfaces`
- Raw SKILL.md: https://api.skillmd.com/api/skills/0xkoru/design-macos-interfaces/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: 0xKoru (https://skillmd.com/u/0xkoru)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/0xkoru/design-macos-interfaces

---


# Design macOS Interfaces

Use this skill when the target experience is a desktop Apple interface or a Mac-like web/Flutter app.

## Workflow

1. Determine whether the app is document-based, utility, content browser, creator tool, settings utility, or dashboard.
2. Choose the window model: single-window app, document windows, utility panels, settings window, sheets, popovers, or inspectors.
3. Place persistent navigation in sidebars or segmented toolbar controls. Keep important commands in the menu bar and toolbar.
4. Design with pointer, keyboard, menus, resizable windows, and multi-window behavior in mind.
5. Specify default, compact, and expanded window sizes. Avoid bottom-only critical controls because windows can be partly off screen.
6. Include accessibility, keyboard shortcuts, menu availability, empty states, and window restoration notes.

## macOS Design Rules

- Keep standard menu items unless there is a strong platform reason to remove them.
- Settings windows should be ordinary windows, not translucent panels. Use grouped forms and expected tabs or sections.
- Toolbars should contain frequent commands; menu bar should still expose commands and keyboard shortcuts.
- Sidebars are for navigation and source lists. Inspectors are for details or properties of the current selection.
- Use sheets for document-modal decisions and popovers for lightweight contextual controls.
- Do not rely on touch-sized spacing; macOS can be denser, but targets and focus states still need to be clear.
- For Flutter, use `macos_ui` components when the project already uses Flutter and wants native macOS conventions.

## References

Read `references/macos-patterns.md` for component mapping and source links.