Apple Ecosystem Expert — vibes-plug Skill

English | Bahasa Indonesia

---

English

Description

Expert guide for Apple Ecosystem development. Covers Safari WebKit compatibility, Progressive Web Apps (PWAs) tailored for iOS, touch interactions, manifest.json configurations, and applying Human Interface Guidelines (HIG) principles to web and iOS applications.

Trigger Conditions

Activate this skill when the user is:

• Asking for Safari browser compatibility or fixing WebKit bugs.
• Developing PWAs or web apps targeting iOS/iPadOS devices.
• Asking about apple-touch-icon, apple-mobile-web-app-capable, or related meta tags.
• Building UI elements that need to look and feel native on Apple devices.

---

Core Concepts

1. iOS PWA & Meta Tags

To ensure a web application looks and acts like a native app on iOS when added to the home screen, include these specific meta tags and configurations:

<!-- iOS Safari PWA Meta Tags -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="App Title" />
<link rel="apple-touch-icon" href="/icon-192x192.png" />
<!-- Support for splash screens requires specific sizes, consider using PWA asset generators -->

2. Safari WebKit CSS Quirks

Safari (WebKit) has distinct behavior for viewport sizing and scrolling.

CSS Feature	WebKit Problem	Solution / Workaround
100vh	Ignores the bottom navigation bar on mobile Safari, causing overflow.	Use 100dvh (Dynamic Viewport Height) or safe area insets.
Over-scrolling	"Rubber-banding" effect reveals background on scroll limits.	overscroll-behavior: none; on body.
Safe Area	Notches and Dynamic Islands block content.	Use env(safe-area-inset-bottom), env(safe-area-inset-top).

/* Example: Handling safe area and dynamic viewport height */
.container {
  height: 100dvh;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

3. Touch and Interactions

To achieve native feel on iOS, touch interactions must be smooth. Use CSS properties like -webkit-tap-highlight-color: transparent; to remove the default grey tap highlight.

---

Best Practices

1. Always use Dynamic Viewports (dvh, svh, lvh): Standard vh in mobile Safari causes layout shifts or hidden content due to the dynamic browser UI.
2. Handle Safe Areas: Utilize CSS env() variables to avoid content overlapping with the iOS notch or home indicator.
3. Optimized Touch Targets: Apple HIG dictates a minimum touch target size of 44x44 pt. Ensure buttons are easily clickable.
4. PWA Icons and Manifest: iOS does not fully respect standard manifest.json icons; you must provide <link rel="apple-touch-icon"> explicitly.

---

Common Pitfalls to Avoid

Anti-Pattern	Problem	Correct Approach
Using 100vh for full screen apps	Bottom content gets hidden under Safari's tab bar.	Use 100dvh.
Ignoring -webkit-appearance	Buttons/inputs look like default iOS forms instead of custom UI.	Set -webkit-appearance: none; on form elements.
Relying only on manifest.json for PWA icons	iOS won't use them for the "Add to Home Screen" icon.	Include <link rel="apple-touch-icon" href="...">.

---

Integration with Other Skills (MANDATORY)

This skill works best when combined with:

• hig — For detailed implementation of Apple Human Interface Guidelines styling.
• mobile-expo-expert — When building React Native/Expo apps for iOS.
• tailwind-expert — To apply CSS adjustments like dvh and safe-areas using Tailwind utility classes.
• ui-components-expert — To ensure UI components are sized correctly for iOS touch targets (44x44).

Referenced By Orchestrators (MANDATORY)

This skill should be referenced by the following orchestrators:

• brainstorming — Add to the "Mobile & Web Ecosystems" row in the Skill Integration & Orchestration Matrix
• zero-to-prod-orchestrator — Add to Phase 4 (Frontend Implementation) & Phase 8 (Production Audit)
• production-ready-hardener — Add to Phase 2 (PWA & Compatibility Audit)

---

Bahasa Indonesia

Integrasi Orkestrasi

Terhubung dan mengorkestrasi skill domain yang relevan seperti brainstorming, zero-to-prod-orchestrator, dan project-context-mapper untuk memastikan eksekusi yang kohesif.

Deskripsi

Panduan ahli untuk pengembangan ekosistem Apple. Mencakup kompatibilitas Safari WebKit, Progressive Web Apps (PWA) khusus iOS, interaksi sentuhan, konfigurasi manifest.json, dan penerapan prinsip Human Interface Guidelines (HIG) untuk web dan aplikasi iOS.

Kondisi Pemicu

Aktifkan skill ini ketika pengguna sedang:

• Menanyakan kompatibilitas browser Safari atau memperbaiki bug WebKit.
• Mengembangkan PWA atau aplikasi web yang menargetkan perangkat iOS/iPadOS.
• Menanyakan tentang apple-touch-icon, meta tag PWA iOS, atau safe area.
• Membangun elemen UI agar terlihat dan terasa native di ekosistem Apple.

Panduan Singkat

Panduan praktis untuk dukungan Ekosistem Apple (iOS & Web):

• [Gunakan 100dvh]: Jangan pernah gunakan 100vh di web app iOS, gunakan 100dvh (Dynamic Viewport Height) agar tidak tertutup navigation bar Safari.
• [Meta Tag PWA Khusus]: Wajib menggunakan <link rel="apple-touch-icon"> dan <meta name="apple-mobile-web-app-capable" content="yes"> agar PWA berjalan optimal saat ditambahkan ke Home Screen.
• [Safe Area]: Terapkan padding env(safe-area-inset-top) dsb, untuk menghindari notch (poni) dan Dynamic Island iPhone.
• [Touch Targets HIG]: Area sentuh minimum untuk elemen interaktif di iOS adalah 44x44 points.

Integrasi dengan Skill Lain (WAJIB)

Skill ini bekerja paling baik dikombinasikan dengan:

• hig — Untuk menerapkan struktur dan prinsip desain dari Human Interface Guidelines Apple.
• mobile-expo-expert — Jika menggunakan React Native untuk aplikasi iOS.
• tailwind-expert — Mengatur penyesuaian WebKit seperti dvh dan safe-areas dengan utility class.

Direferensikan oleh Orchestrator (WAJIB)

Skill ini harus direferensikan oleh orchestrator berikut:

• brainstorming — Bagian Mobile & Web Ecosystems.
• zero-to-prod-orchestrator — Fase 4 dan 8 (Kesiapan Produksi).
• production-ready-hardener — Fase 2 (Audit Kompatibilitas Lintas Browser & PWA).

Orchestration & Integration

• Integrates with: hig, mobile-expo-expert, tailwind-expert, ui-components-expert.
• Orchestrated by: brainstorming, zero-to-prod-orchestrator, production-ready-hardener.