skills.rest
bocan
bocanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

macos-design

Generate macOS design specifications for native-feeling apps across web, Electron, Tauri, and Swift.

27|5|Updated Apr 18, 2026
Search Tags:#cross-platform#swift#macos#ui-design#desktop-ui#native-apps#apple-human-interface-guidelines
One-click install
npx skills add https://github.com/bocan/bocan-music --skill macos-design-bocan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: macos-design
Source: https://github.com/bocan/bocan-music/tree/main/.github/skills/macos-design-skill
Command: npx skills add https://github.com/bocan/bocan-music --skill macos-design-bocan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Most cross-platform and web-wrapped desktop applications feel out of place on macOS, lacking the native polish, interaction patterns, and visual consistency that Mac users expect from system tools.

Core Features & Use Cases

  • Complete native design system: Covers Apple's standard layout formula (traffic lights, top bar, sidebar, content area), visual styling (colors, typography, blur/vibrancy, shadows), and interaction patterns (keyboard shortcuts, drag-and-drop, micro-animations).
  • Light/dark mode guidance: Provides independent palette design for both modes, avoiding the common mistake of direct color inversion that leads to poor contrast.
  • Cross-platform implementation support: Includes actionable CSS values, code snippets, and framework-specific notes for web, Electron, Tauri, and native Swift projects.
  • Use case example: Use this skill to build a native-feeling screenshot organizer, note-taking app, or developer tool that integrates seamlessly with the Mac ecosystem, including proper window chrome, system shortcuts, and share sheet integration.

Quick Start

Use the macos-design skill to build a native-feeling screenshot management app for macOS with proper sidebar navigation, traffic light integration, and system-aligned light and dark mode styling.

Frequently Asked Questions about macos-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a cross-platform desktop app feel native on macOS?▼

To make a cross-platform desktop app feel native on macOS, apply Apple's Human Interface Guidelines for layout composition, visual styling, and interaction patterns like keyboard shortcuts and drag-and-drop. This ensures your app matches Mac ecosystem expectations.

What is the correct layout formula for native macOS desktop UI design?▼

The correct layout formula for native macOS UI design includes standard window chrome with traffic lights, a top bar, a sidebar for navigation, and a dedicated content area. This structure prevents the generic feel of web-wrapped tools.

Does this macOS UI design guidance work with Electron and Tauri frameworks?▼

Yes, this macOS UI design guidance works with Electron and Tauri frameworks by providing actionable CSS values, code snippets, and framework-specific implementation notes. It also supports native Swift projects for complete cross-platform coverage.

How do I implement light and dark mode in a macOS app without poor contrast?▼

To implement light and dark mode in a macOS app without poor contrast, design independent color palettes for both modes rather than directly inverting colors. This approach maintains proper visual consistency and contrast across system themes.

Why do web-wrapped desktop applications feel out of place on macOS?▼

Web-wrapped desktop applications feel out of place on macOS because they lack native polish, standard interaction patterns, and visual consistency. They miss system-aligned features like proper vibrancy, shadows, and micro-animations that Mac users expect.

Related Skills

Explore More Design & Creative Skills→
miles990miles990
20

desktop-apps

Develop cross-platform desktop applications using Electron and Tauri frameworks.

Community
Intermediate
patriotnewsactivismpatriotnewsactivism
2

expo

Provide Expo guidelines for building cross-platform mobile applications with TypeScript and native features.

Community
Advanced
mosif16mosif16
18

Swift iOS Design Best Practices

Review Swift iOS apps against Apple Human Interface Guidelines.

Community
Advanced
musujmusuj

desktop-app

Guide cross-platform desktop app development using Electron and Tauri frameworks.

Community
Intermediate