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.

1.13x

Quality

92%

Does it follow best practices?

Impact

99%

1.13x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Evaluation results

97%

25%

macOS Clipboard Manager App — Window Shell

Window chrome and visual design

Criteria

Without context

With context

Apple font stack

100%

Window corner radius

100%

Card corner radius

100%

Traffic light colors

100%

Traffic light sizing

50%

62%

Traffic light hover icons

100%

0.5px border-shadow

100%

Layered shadows

100%

Dark mode not inverted

100%

Dark mode background separation

100%

prefers-color-scheme

100%

Subtle shadows in dark mode

100%

Moodboard App — Layout and Content Management

Layout, sidebar, empty states, drag-and-drop

Criteria

Without context

With context

Sidebar width range

100%

Sidebar vibrancy blur

100%

Sidebar saturate boost

100%

Empty state hides secondary UI

100%

Empty state CTA

100%

Drop zone dashed border

100%

Drop zone accent color

100%

Draggable items

100%

Drag visual feedback

100%

Slide-out detail panel

100%

Grid responsive columns

100%

No blur on content area

100%

Quick-Save Panel Tool — Interaction Layer

Keyboard shortcuts, animations, toasts, onboarding

Criteria

Without context

With context

Shortcut hints visible

100%

kbd box styling

100%

Standard ⌘N shortcut

100%

Standard ⌘F shortcut

100%

Standard Esc shortcut

100%

Onboarding by doing

100%

Single onboarding modal

100%

Toast appears after action

100%

Toast auto-dismisses

100%

Toast entry animation

100%

CSS easing not linear

100%

Hover state transitions

100%

Animation durations in range

75%

100%

Repository: davepoon/buildwithclaude
Commit: 7cc63f3

Evaluated: 28 days ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

macOS Clipboard Manager App — Window Shell Moodboard App — Layout and Content Management Quick-Save Panel Tool — Interaction Layer

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.