macos-app-design — macos-app-design install macos-app-design, community, macos-app-design install, ide skills, native mac app development, system component integration, Claude Code, Cursor, Windsurf

v1.0.0
GitHub

About this Skill

Perfect for UI/UX Agents needing to design native-feeling Mac apps with system components and conventions macos-app-design is a set of guidelines and best practices for designing and implementing native-feeling, accessible, and deeply integrated macOS apps using system components and conventions.

Features

Prefer system components and conventions over bespoke UI for a native Mac feel
Customize bars, backgrounds, borders, or control chrome with justification
Follow the Mac Citizen Checklist for fast, elegant, and accessible app design
Integrate deeply with macOS workflows for a seamless user experience
Use opinionated local-dev orchestration to run multiple projects without port conflicts

# Core Topics

macos-app-design install native mac app development system component integration
hack-dance hack-dance
[2]
[1]
Updated: 2/28/2026

Agent Capability Analysis

The macos-app-design skill by hack-dance is an open-source community AI agent skill for Claude Code and other IDE workflows, helping agents execute tasks with better context, repeatability, and domain-specific guidance. Optimized for macos-app-design install, native mac app development, system component integration.

Ideal Agent Persona

Perfect for UI/UX Agents needing to design native-feeling Mac apps with system components and conventions

Core Value

Empowers agents to create fast, elegant, and accessible Mac apps by leveraging system components, conventions, and native macOS workflows, ensuring a seamless user experience through proper justification of customized UI elements, bars, backgrounds, borders, or control chrome

↓ Capabilities Granted for macos-app-design

Designing intuitive Mac app interfaces
Implementing native macOS workflows
Optimizing app performance for a seamless user experience

! Prerequisites & Limits

  • Requires adherence to macOS design conventions
  • Limited to Mac app development
Labs Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

macos-app-design

Install macos-app-design, an AI agent skill for AI agent workflows and automation. Works with Claude Code, Cursor, and Windsurf with one-command setup.

SKILL.md
Readonly

macOS App Design & Development

Guide for designing and implementing native-feeling, "good Mac citizen" apps: fast, elegant, accessible, and deeply integrated with macOS workflows.

Two Rules That Beat Everything Else

  1. Prefer system components and conventions over bespoke UI—fastest path to "feels right on Mac"
  2. If you customize bars, backgrounds, borders, or control chrome: stop and justify it

Quick Reference: Mac Citizen Checklist

AreaRequirement
Menu BarStandard layout (App/File/Edit/View/Window/Help), ⌘, for Settings
KeyboardEvery primary command reachable via keyboard, standard shortcuts work
WindowsResize fluidly, support multiple windows, respect fullscreen/minimize
SidebarsTop-level navigation, scannable items, content extends behind
ToolbarsGroup by function/frequency, demote secondary to "more" menu
TextUse system text components, standard editing behaviors
AccessibilityVoiceOver labels, full keyboard navigation, Reduced Motion support

Liquid Glass Quick Rules

Do:

  • Use for navigation/controls layer (toolbars, sidebars, bars)
  • Let system components provide built-in behaviors

Don't:

  • Apply to content layer (tables, lists, document content)
  • Stack "glass on glass"

App Archetypes

Identify your app type first:

  • Document-based: Files as primary units (open/save/duplicate)
  • Library + editor: Sidebar lists items, detail in main area
  • Utility: Single window, optional menu bar
  • Menu-bar app: Lives in menu bar, minimal UI
  • Pro tool: Dense, power-user workflows

Deliverables Before Building

  1. App archetype identified
  2. Information architecture (sidebar structure, navigation, window model)
  3. Command map (menus + keyboard shortcuts for every major feature)
  4. State + data model (persistence, undo/redo, concurrency)
  5. Accessibility plan (VoiceOver, keyboard, contrast, reduce motion)

Full Reference

For complete design system details, Icon Composer workflow, SF Symbols guidance, evaluation rubrics, and Definition of Done checklist:

See: references/macos-design-guide.md

Common Mistakes

MistakeFix
Missing menu bar commandsEvery feature in menus with keyboard shortcuts
Settings outside App menuAlways ⌘, opening from App menu
Custom text componentsUse system text for Mac editing ecosystem
Toolbar overloadDemote secondary actions, group by function
Glass on contentReserve Liquid Glass for navigation layer only
Breaking standard shortcutsNever override ⌘C, ⌘V, ⌘Z, etc.
Single-window onlySupport multiple windows when it benefits workflows

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is macos-app-design?

Perfect for UI/UX Agents needing to design native-feeling Mac apps with system components and conventions macos-app-design is a set of guidelines and best practices for designing and implementing native-feeling, accessible, and deeply integrated macOS apps using system components and conventions.

How do I install macos-app-design?

Run the command: npx killer-skills add hack-dance/hack/macos-app-design. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for macos-app-design?

Key use cases include: Designing intuitive Mac app interfaces, Implementing native macOS workflows, Optimizing app performance for a seamless user experience.

Which IDEs are compatible with macos-app-design?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for macos-app-design?

Requires adherence to macOS design conventions. Limited to Mac app development.

↓ How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add hack-dance/hack/macos-app-design. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use macos-app-design immediately in the current project.

Related Skills

Looking for an alternative to macos-app-design or another community skill for your workflow? Explore these related open-source skills.

View All

widget-generator

Logo of f
f

f.k.a. Awesome ChatGPT Prompts. Share, discover, and collect prompts from the community. Free and open source — self-host for your organization with complete privacy.

★ 149.6k
⑂ 0
AI

flags

Logo of vercel
vercel

flags is a Next.js feature management skill that enables developers to efficiently add or modify framework feature flags, streamlining React application development.

★ 138.4k
⑂ 0
Browser

zustand

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI

data-fetching

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI