mcpField
A
apple-design-os

apple-design-os

github.com/s1gmamale1Design & UI3152 installsUpdated 22w ago
Repository

About apple-design-os

A UI design skill for building native-feeling interfaces across iOS, iPadOS, macOS, visionOS, and watchOS. It focuses on platform-specific input models, component choices, and layout conventions.

Key features

  1. 01Cover five Apple platform interfaces
  2. 02Adapt controls to each platform's input model
  3. 03Use navigation bars, sheets, and modal patterns
  4. 04Choose button hierarchies and list styles
  5. 05Plan empty states

Use cases

  1. 01Place primary controls within iPhone reach
  2. 02Choose sheets or modals for a task
  3. 03Adapt interactions to macOS pointers and menu bar
  4. 04Adjust target sizes for visionOS and watchOS

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/s1gmamale1/apple-design-skills --skill apple-design-os

After installing, type/apple-design-osin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
app-component-anatomy.md
ios-ipados.md
macos.md
visionos-watchos.md

Details

From the project README

Apple Design — OS Surfaces & Components

Designing native-feeling app UI across Apple's platforms, plus the standard component library.

When to use

  • Laying out an iOS/iPadOS/macOS/visionOS/watchOS screen or its chrome.
  • Choosing/standardizing a component (nav bar, list style, button hierarchy, sheet, alert, empty state).

Core rules

  • Anchor primary controls in reach — bottom on iPhone (tab bar 49pt + safe area), and prefer the platform's native bar/sheet patterns over reinventing chrome.
  • Sheets use detents (medium/large/custom) with a grabber; modals are for focused tasks, not navigation.
  • Match the platform's input model: touch (44pt targets) on iOS, pointer precision + the global menu bar on macOS, gaze (60pt targets) + eye/pinch on visionOS, Digital Crown + glanceability on watchOS.
  • Use the documented button hierarchy (borderedProminent → bordered → borderless) and the right list style (plain / grouped / insetGrouped); always design empty states (ContentUnavailableView).
  • iOS 26 / macOS Tahoe restyle controls in Liquid Glass (floating, translucent) — see apple-design-materials.

References

FileUse for
references/ios-ipados.mdHome/lock/control surfaces, nav/tab/sheet metrics, iOS 26 glass, iPad windowing
references/macos.mdWindows, traffic lights, toolbars, sidebars, menu bar, vibrancy, Tahoe glass
references/visionos-watchos.mdSpatial windows/ornaments/immersion + watchOS complications/crown/glance
references/app-component-anatomy.mdThe full UIKit/SwiftUI component catalog + CSS mimics of iOS lists/toggles/segments

Common mistakes

  • Top-only controls out of thumb reach; faking native chrome with wrong metrics.
  • Touch-sized targets on a pointer OS (or vice-versa); modal overuse; missing empty states.
  • Tiny gaze targets / motion-sickness triggers in visionOS; dense watch faces.

Related: the glass on these surfaces → apple-design-materials · their motion/gestures → apple-design-motion · spacing/type → apple-design-foundations.

Comments

Markdown supported