Skill

macos-design

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.

React

Css

Install

npx claudepluginhub davepoon/buildwithclaude --plugin all-skills

Tool Access

This skill uses the workspace's default tool permissions.

Preview

Build interfaces that feel like they belong on the user's computer — not websites crammed into a window.

Supporting Assets

references/interaction-patterns.mdreferences/layout-and-composition.mdreferences/visual-design.md

SKILL.md

Similar Skills

skill-lookup

Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.

prompts.chat

159.9k

prompt-lookup

Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.

prompts.chat

159.9k

using-git-worktrees

Creates isolated Git worktrees for feature branches with prioritized directory selection, gitignore safety checks, auto project setup for Node/Python/Rust/Go, and baseline verification.

superpowers

158.9k

Stats

Parent Repo Stars2696

Parent Repo Forks300

Last CommitFeb 21, 2026

Actions

View Source View Plugin View on GitHub View README

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-scheme media 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