design-ios

## Design iOS/macOS — Mockup and Handoff, Not Code ### When After `design-system` tokens exist. This skill never writes SwiftUI — it produces a static HTML mockup at exact device/window dimensions plus a spec that `swift-expert` or an Apple-platform developer implements. ### Input - `design-system.md` — OKLCH palette, typography direction, motion personality. - The screen/flow to mock up and the target platform: iPhone / iPad (iOS) or a resizable window (macOS). ### Steps — iOS 1. **Map tokens to iOS roles.** Typography → Dynamic Type text styles, anchored at Body 17pt down to Caption 2 11pt (never fixed point sizes) — see `references/dynamic-type.md`. Colors → semantic color roles (never raw RGB/hex) — see `references/semantic-colors.md`. 2. **Pick the device viewport(s)** from `references/viewports.md` — mock up in exact points at the chosen scale factor. 3. **Build the HTML mockup**: a device-frame `<div>` at the exact viewport dimensions, `viewport-fit=cover` meta tag, `env(safe-area-inset-*)` for notch/Dynamic Island/home indicator spacing. See `references/mockup.md`. 4. **Apply Liquid Glass where it fits** — a floating layer of controls *above* regular content, not a content background. Two variants: **regular** (content-aware, the default for controls) and **clear** (more transparent — dim the content beneath it ~35% when clear sits over light content, so controls stay legible). Plus control morphing, concentricity between nested shapes...