davepoon/macos-design
plugins/all-skills/skills/macos-design/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add davepoon/buildwithclaude macos-designInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jun 4, 2026, 5:08 AM227.6s1 file scanned
SKILL.md
- name:
- macos-design
- category:
- design
- description:
- 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.
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-schememedia 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
Related Skills
davepoon/anti-ui-slop
development
VerifiedTrustedCommunity
Stop coding agents from shipping generic UI. Use UIZZE's 800,000+ real web and iOS screens to build product-specific interfaces, define a design contract, cover required states, and run a hard finish gate. Use for web or iOS UI design, implementation, redesign, critique, and pre-ship review in Codex, Claude Code, Cursor, Copilot, and other coding agents.
3,220SKILL.mdUpdated Jul 27, 2026
davepoon/theboardroom
development
VerifiedTrustedCommunity
Convene an AI executive board of directors (CEO, CFO, COO, CLO, CISO sub-agent personas) to vet a business idea, product concept, new service offering, M&A target, or operational initiative — and deliver an integrated board memo with a Go/No-Go recommendation. Use this skill whenever the user wants an idea vetted, stress-tested, or reviewed from multiple executive perspectives; asks to "present this to the board," "run this by the boardroom," "vet this idea," "poke holes in this plan," or "prep me for a board meeting"; or shares a business plan, pitch, proposal, or initiative document and asks for structured executive feedback. Also trigger when the user asks for a Go/No-Go decision, risk review across finance/legal/security/operations, or preparation for presenting an initiative to real leadership.
3,183SKILL.mdUpdated Jul 16, 2026
davepoon/travel-agent-skill
data-ai
VerifiedTrustedCommunity
私人旅行管家 — 从出发地到目的地的完整行程规划+攻略导出。 输入出发地、目的地、天数、预算、风格偏好，自动输出闭环行程， 包含交通推荐、酒店推荐、美食路线、每日预算，并可选生成攻略。 当用户提到「做攻略」「旅行规划」「旅游计划」「行程安排」时使用。
3,180SKILL.mdUpdated Jul 15, 2026
davepoon/ontoly-software-graph
tools
VerifiedTrustedCommunity
Use Ontoly's deterministic Software Graph and MCP server for codebase architecture, request tracing, dependency analysis, and impact analysis.
3,180SKILL.mdUpdated Jul 15, 2026