apple-design

Name: apple-design
Author: f0d010c

19stars0forks

How to install apple-design?

f0d010c/stark/apple-design

$npx -y skills add f0d010c/stark --skill apple-design

Installs into the current project.

Summary

Use when the user asks for SwiftUI, UIKit, AppKit, iOS, iPadOS, macOS, watchOS, visionOS, Liquid Glass, HIG, SF Symbols, App Store deliverables, Apple settings/forms, branded Apple apps, React Native iOS, Flutter Cupertino, or Electron/Tauri macOS shells. Builds Apple-platform ap

Files · 1

View on GitHub

SKILL.md

1	# apple-design — pick the track first
2
3	Apple platforms have multiple stacks with different visual ceilings and cost. Ask the user which one before any code.
4
5	## What This Skill Can Do
6
7	- Choose the right Apple track: strict SwiftUI, branded SwiftUI, React Native, Flutter Cupertino, or Electron/Tauri for macOS.
8	- Design iPhone task flows, iPad/macOS productivity surfaces, menu-bar utilities, document apps, settings, inspectors, media apps, and desktop-class workbenches.
9	- Preserve UX briefs, state coverage, action hierarchy, keyboard flow, Dynamic Type, focus, accessibility, and safe areas.
10	- Apply HIG, Liquid Glass, SF Symbols, SF typography, NavigationSplitView, DocumentGroup, inspectors, sheets, toolbars, and platform-specific motion.
11	- Add originality through composition, content, and state treatment without replacing native controls with web-style chrome.
12
13	## Step 0 (MANDATORY) — Ask the user which track
14
15	> Which track for this app?
16	>
17	> 1. System-like native (SwiftUI strict + Liquid Glass + HIG) — feels like Settings, Notes, Reminders, Mail. Best for: utilities, productivity. Visual ceiling: medium. Stays App Store-friendly. Examples: Things 3, NetNewsWire, Soulver.
18	>
19	> 2. Branded native (SwiftUI + HIG + custom identity) — native chrome (Liquid Glass, SF Symbols, Dynamic Type) but bespoke content surface (custom typography, hero atmospheres, magazine layouts). Best for: consumer/media/creative apps that want fit-in and identity. Visual ceiling: high. Examples: Ivory, Reeder, Mela, Craft, CARROT Weather.
20	>
21	> 3. React Native (New Architecture + Fabric + Hermes) — real UIKit views, decent native feel, JavaScript codebase, cross-platform with Android. Liquid Glass partial via `expo-glass-effect`. Best for: cross-platform apps with web-team velocity. Examples: Discord mobile, Coinbase, Microsoft Office mobile.
22	>
23	> 4. Flutter Cupertino — Skia-painted UIKit-look. Always one OS behind, no Liquid Glass. Cross-platform. Best for: utility apps where pixel control beats native feel. Visual ceiling: high if you bring your own design language; low if you try to mimic iOS.
24	>
25	> 5. Electron / Tauri 2 (macOS only — no iOS) — web stack desktop apps. Tauri 2 (~5MB, WKWebView) or Electron (~150MB, bundled Chromium). Same React/Tailwind/Motion code as web. Best for: cross-platform desktop with brand-first identity. Examples: Spotify, Discord, VSCode, Slack, Figma desktop, Linear.
26	>
27	> Which? Or describe priorities (App Store, brand vs HIG fit, cross-platform reach) and I'll pick.
28
29	If brief gives a strong signal (e.g. "iOS App Store launch" → 1 or 2; "cross-platform with our existing React team" → 3 or 5; "web team building desktop-only" → 5), state your pick + reasoning in one sentence. If ambiguous, ask.
30
31	## Step 0b — Once picked, route
32
33	\| Track \| Reference docs \| Default stack \|
34	\|---\|---\|---\|
35	\| 1. System-like SwiftUI \| `../../references/apple-hig.md` + `../../references/liquid-glass.md` \| SwiftUI 7 + Xcode 26 + iOS 26 SDK strict \|
36	\| 2. Branded SwiftUI \| Same as 1 \| Same as 1 + custom display font + hero atmospheres + bespoke surfaces \|
37	\| 3. React Native \| `../../references/web-fonts.md` + cross-platform docs \| RN 0.78+ New Arch + Expo Router + react-native-screens \|
38	\| 4. Flutter Cupertino \| None for native fidelity (will feel imported) \| Flutter 3+ stable \|
39	\| 5. Tauri 2 / Electron (macOS) \| `../../references/web-fonts.md` + `../../references/web-motion.md` + `../../references/web-bans.md` + `../../references/awwwards-ceiling.md` \| React 19 + Tailwind v4 + Motion \|
40
41	For tracks 3, 4, 5: web/cross-platform anti-slop rules apply. Read the web design references.
42
43	State the chosen aesthetic direction and track in one sentence at top of response, then proceed.
44
45	## Step 0c — UI decision brief
46
47	Before code, read:
48
49	- `../../references/ui-patterns/surface-taxonomy.md`
50	- `../../references/ui-patterns/ui-decision-brief.md`
51	- `../../references/ui-patterns/desktop-app-archetypes.md`
52	- `../../references/ui-patterns/originality-engine.md`
53	- `../../references/ui-patterns/design-recipes.md`
54	- `../../references/ui-patterns/anti-default-contrasts.md`
55	- `../../references/ui-patterns/visual-hierarchy.md`
56	- `../../references/ui-patterns/motion-budget.md`
57
58	Write the UI decision brief and, for macOS/iPad desktop-class work, the desktop archetype brief and compa

People who liked this also viewed

6 picks

Type

apple-design

19stars0forks

View on GitHub

How to install apple-design?

f0d010c/stark/apple-design

$npx -y skills add f0d010c/stark --skill apple-design

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# apple-design — pick the track first
2
3	Apple platforms have multiple stacks with different visual ceilings and cost. Ask the user which one before any code.
4
5	## What This Skill Can Do
6
7	- Choose the right Apple track: strict SwiftUI, branded SwiftUI, React Native, Flutter Cupertino, or Electron/Tauri for macOS.
8	- Design iPhone task flows, iPad/macOS productivity surfaces, menu-bar utilities, document apps, settings, inspectors, media apps, and desktop-class workbenches.
9	- Preserve UX briefs, state coverage, action hierarchy, keyboard flow, Dynamic Type, focus, accessibility, and safe areas.
10	- Apply HIG, Liquid Glass, SF Symbols, SF typography, NavigationSplitView, DocumentGroup, inspectors, sheets, toolbars, and platform-specific motion.
11	- Add originality through composition, content, and state treatment without replacing native controls with web-style chrome.
12
13	## Step 0 (MANDATORY) — Ask the user which track
14
15	> Which track for this app?
16	>
17	> 1. System-like native (SwiftUI strict + Liquid Glass + HIG) — feels like Settings, Notes, Reminders, Mail. Best for: utilities, productivity. Visual ceiling: medium. Stays App Store-friendly. Examples: Things 3, NetNewsWire, Soulver.
18	>
19	> 2. Branded native (SwiftUI + HIG + custom identity) — native chrome (Liquid Glass, SF Symbols, Dynamic Type) but bespoke content surface (custom typography, hero atmospheres, magazine layouts). Best for: consumer/media/creative apps that want fit-in and identity. Visual ceiling: high. Examples: Ivory, Reeder, Mela, Craft, CARROT Weather.
20	>
21	> 3. React Native (New Architecture + Fabric + Hermes) — real UIKit views, decent native feel, JavaScript codebase, cross-platform with Android. Liquid Glass partial via `expo-glass-effect`. Best for: cross-platform apps with web-team velocity. Examples: Discord mobile, Coinbase, Microsoft Office mobile.
22	>
23	> 4. Flutter Cupertino — Skia-painted UIKit-look. Always one OS behind, no Liquid Glass. Cross-platform. Best for: utility apps where pixel control beats native feel. Visual ceiling: high if you bring your own design language; low if you try to mimic iOS.
24	>
25	> 5. Electron / Tauri 2 (macOS only — no iOS) — web stack desktop apps. Tauri 2 (~5MB, WKWebView) or Electron (~150MB, bundled Chromium). Same React/Tailwind/Motion code as web. Best for: cross-platform desktop with brand-first identity. Examples: Spotify, Discord, VSCode, Slack, Figma desktop, Linear.
26	>
27	> Which? Or describe priorities (App Store, brand vs HIG fit, cross-platform reach) and I'll pick.
28
29	If brief gives a strong signal (e.g. "iOS App Store launch" → 1 or 2; "cross-platform with our existing React team" → 3 or 5; "web team building desktop-only" → 5), state your pick + reasoning in one sentence. If ambiguous, ask.
30
31	## Step 0b — Once picked, route
32
33	\| Track \| Reference docs \| Default stack \|
34	\|---\|---\|---\|
35	\| 1. System-like SwiftUI \| `../../references/apple-hig.md` + `../../references/liquid-glass.md` \| SwiftUI 7 + Xcode 26 + iOS 26 SDK strict \|
36	\| 2. Branded SwiftUI \| Same as 1 \| Same as 1 + custom display font + hero atmospheres + bespoke surfaces \|
37	\| 3. React Native \| `../../references/web-fonts.md` + cross-platform docs \| RN 0.78+ New Arch + Expo Router + react-native-screens \|
38	\| 4. Flutter Cupertino \| None for native fidelity (will feel imported) \| Flutter 3+ stable \|
39	\| 5. Tauri 2 / Electron (macOS) \| `../../references/web-fonts.md` + `../../references/web-motion.md` + `../../references/web-bans.md` + `../../references/awwwards-ceiling.md` \| React 19 + Tailwind v4 + Motion \|
40
41	For tracks 3, 4, 5: web/cross-platform anti-slop rules apply. Read the web design references.
42
43	State the chosen aesthetic direction and track in one sentence at top of response, then proceed.
44
45	## Step 0c — UI decision brief
46
47	Before code, read:
48
49	- `../../references/ui-patterns/surface-taxonomy.md`
50	- `../../references/ui-patterns/ui-decision-brief.md`
51	- `../../references/ui-patterns/desktop-app-archetypes.md`
52	- `../../references/ui-patterns/originality-engine.md`
53	- `../../references/ui-patterns/design-recipes.md`
54	- `../../references/ui-patterns/anti-default-contrasts.md`
55	- `../../references/ui-patterns/visual-hierarchy.md`
56	- `../../references/ui-patterns/motion-budget.md`
57
58	Write the UI decision brief and, for macOS/iPad desktop-class work, the desktop archetype brief and compa

People who liked this also viewed

6 picks

Type