---
name: apple-ecosystem-expert
description: "Expert guide for Apple Ecosystem development. Covers iOS support, Safari WebKit compatibility, PWAs (Progressive Web Apps) for iOS, and Human Interface Guidelines (HIG) for web and native apps / Panduan ahli pengembangan ekosistem Apple (iOS & Web)."
author: "Roedy Rustam"
version: "4.4.2"
---
# Apple Ecosystem Expert — vibes-plug Skill
[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
---
## English
### Orchestration & Integration
- `modern-web-guidance`: Safari WebKit standards, dynamic viewport units, and web platform features.
- `hig`: Direct Human Interface Guidelines alignment, typography, and iconography.
- `design-system-architect`: Apple design tokens, SF Pro font stack, and 44x44pt touch targets.
- `modern-css-native-expert`: Modern CSS `@supports`, `env(safe-area-inset-*)`, and native scrolling.
- `tailwind-expert`: Tailwind utility classes for iOS safe areas and dynamic viewport units.
- `ui-ux-pro-max`: Apple HIG UX patterns, fluid transitions, and iOS layout conventions.
- `visual-ui-auditor`: Multimodal vision auditing of iOS Safari interfaces and touch targets.
- `anti-slop`: Anti-slop iOS UI craft, zero generic Android-style controls in iOS contexts.
- `mobile-expo-expert`: Cross-platform React Native / Expo iOS implementations.
- `passkeys-webauthn-identity-expert`: iCloud Keychain Passkeys, Associated Domains, and FaceID/TouchID WebAuthn.
### Description
Expert engineering guide for Apple Ecosystem development across iOS 18+, iPadOS, macOS Safari WebKit, and Home Screen Web Apps (PWAs). Covers Safari WebKit layout invariants, Dynamic Island & Home Indicator safe areas, Web Push via APNs (`PushManager`), Universal Links (`apple-app-site-association`), and Apple Human Interface Guidelines (HIG).
### 1. Safari WebKit & iOS Platform Compatibility Matrix
| Feature / Behavior | iOS Safari / WebKit Quirk | 2026 Production Standard |
| :--- | :--- | :--- |
| **Viewport Height** | `100vh` includes area behind collapsible URL bar, clipping bottom CTAs | Use `100dvh` for interactive shells and `100svh` for fixed modals |
| **Input Auto-Zoom** | Safari forcefully zooms the page if `` font-size is `< 16px` | Enforce `font-size: max(16px, 1rem)` on all form inputs on mobile breakpoints |
| **Notch & Home Indicator** | Edge-to-edge layouts overlap the Dynamic Island or bottom gesture bar | Set `viewport-fit=cover` + `padding-bottom: max(1rem, env(safe-area-inset-bottom))` |
| **iOS Web Push (APNs)** | Requires Home Screen installation (`display: standalone`) and user gesture | Gate `Notification.requestPermission()` behind an explicit settings button tap |
| **Passkeys & Universal Links** | Requires verified domain association without redirects | Serve `/.well-known/apple-app-site-association` with `application/json` MIME |
### 2. Production iOS Standalone PWA & Safe-Area Shell
Include `viewport-fit=cover` and detect standalone mode reliably to adapt navigation bars and Web Push prompts:
```html
```
```css
/* src/styles/apple-webkit-safe.css */
:root {
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-left: env(safe-area-inset-left, 0px);
--safe-right: env(safe-area-inset-right, 0px);
}
.ios-app-shell {
min-height: 100dvh;
padding-top: var(--safe-top);
padding-bottom: max(0.75rem, var(--safe-bottom));
padding-left: var(--safe-left);
padding-right: var(--safe-right);
overscroll-behavior-y: none;
-webkit-tap-highlight-color: transparent;
}
/* Prevent iOS Safari involuntary zoom on input focus */
@media screen and (max-width: 768px) {
input,
select,
textarea {
font-size: 16px;
}
}
```
### 3. iOS Standalone Detection & Web Push Subscription Helper (TypeScript)
```typescript
// src/lib/ios-pwa-capabilities.ts
export interface IosEnvironmentStatus {
isIosDevice: boolean;
isStandalonePwa: boolean;
supportsWebPush: boolean;
}
export function detectIosCapabilities(): IosEnvironmentStatus {
if (typeof window === 'undefined' || typeof navigator === 'undefined') {
return { isIosDevice: false, isStandalonePwa: false, supportsWebPush: false };
}
const ua = navigator.userAgent;
const isIosDevice =
/iPad|iPhone|iPod/.test(ua) ||
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
const isStandalonePwa =
window.matchMedia('(display-mode: standalone)').matches ||
Boolean((navigator as Navigator & { standalone?: boolean }).standalone);
const supportsWebPush =
'serviceWorker' in navigator &&
'PushManager' in window &&
'Notification' in window &&
(!isIosDevice || isStandalonePwa);
return { isIosDevice, isStandalonePwa, supportsWebPush };
}
```
### 4. Production Verification Checklist
- [ ] All full-height containers use `100dvh` / `100svh` instead of legacy `100vh`.
- [ ] All ``, `