Skip to content
cccskills
FreePublished on GitHub

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.

The English summary is being prepared. Showing the original description.

See how to install

Files included (4)

  • SKILL.md3.1 KB
  • references/interaction-patterns.md9.5 KB
  • references/layout-and-composition.md7.1 KB
  • references/visual-design.md9.0 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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:

  1. Layout: Top bar for global actions, sidebar for navigation (skip if nav is minimal), center for content
  2. Traffic lights: Integrate into the UI — top bar or sidebar, never floating awkwardly
  3. Window drag zone: Top ~50px must be draggable, keep it uncluttered
  4. Empty states: Show them. Progressive disclosure — only reveal UI when it's useful
  5. Keyboard shortcuts: Every primary action needs one. Every shortcut needs visual feedback
  6. Light + Dark mode: Design both. Do NOT directly invert colors (see visual-design reference)
  7. Search: Always prominent and accessible. Consider floating search bar or command palette
  8. Drag and drop: Content in AND out of the app. This is non-negotiable for native feel
  9. Micro-animations: Every state change gets a transition. No interaction without feedback
  10. 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

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Automate ActiveCampaign tasks via Rube MCP (Composio): manage contacts, tags, list subscriptions, automation enrollment, and tasks. Always search tools first for current schemas.

The English summary is being prepared. Showing the original description.

davepoon/buildwithclaude3.7KUpdated Oct 19, 2026

Pull the ads a competitor is running right now on Meta (Facebook/Instagram) and Google, then extract the hooks, offers, CTAs and landing pages worth modelling. Use when writing ad copy, planning creative tests, choosing a landing page angle, or when the user asks "what is X advertising", "what ads does X run", "find competitor ad hooks". Reads live Ad Library and Ads Transparency data through the Tracetify MCP; falls back to a manual Ad Library walkthrough when the connector is absent.

The English summary is being prepared. Showing the original description.

davepoon/buildwithclaude3.7KUpdated Oct 19, 2026

Analytics your AI agent can actually use. Track, analyze, run A/B experiments, and optimize across all your projects via CLI. Includes a growth playbook so your agent knows HOW to grow, not just what to track.

The English summary is being prepared. Showing the original description.

davepoon/buildwithclaude3.7KUpdated Oct 19, 2026

Teaches when to recall from long-term memory before acting and when to save durable decisions, corrections and failures afterwards. Use when a memory tool or MCP memory server is connected but the agent is not using it consistently, when the user complains that the assistant forgets preferences, conventions or past decisions between sessions, or when setting up persistent memory for a project. Works with any memory backend: a folder of Markdown files, a local MCP server, or a managed service.

The English summary is being prepared. Showing the original description.

davepoon/buildwithclaude3.7KUpdated Oct 19, 2026

Audit local AI coding-agent sessions with agenttrace for cost, tokens, tool failures, latency, anomalies, health, diffs, and CI gates.

The English summary is being prepared. Showing the original description.

davepoon/buildwithclaude3.7KUpdated Oct 19, 2026

Checks which private files (.env, keys, secrets) Claude Code and its subagents reached in this project, whether a value came into an agent's context, and which key to change, by running the open source agentwhy CLI over the session records Claude Code already keeps on disk. Use when the user asks whether the agent or a subagent read their .env or other secrets, which private files a session touched, whether a key leaked into the conversation, or which key to rotate. Runs locally and never prints a secret value.

The English summary is being prepared. Showing the original description.

davepoon/buildwithclaude3.7KUpdated Oct 19, 2026

See all skills by davepoon

Report a problem with this skill