vibes-plug 1.0.0 → 2.11.0

package/skills/api-gateway-proxy-expert/SKILL.md

@@ -0,0 +1,81 @@
+---
+name: api-gateway-proxy-expert
+description: "Expert guide for API Gateways, Reverse Proxies, and Service Mesh. Covers Kong, Traefik, NGINX, Cloudflare Gateway, and load balancing / Panduan ahli untuk API Gateway, Reverse Proxy, dan Service Mesh."
+author: "Roedy Rustam"
+---
+
+# API Gateway & Reverse Proxy Expert
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+A comprehensive guide for routing, load balancing, and managing traffic at the perimeter of your microservices architecture. Covers configuring API Gateways (Kong, Tyk), modern reverse proxies (Traefik, Caddy, NGINX), and understanding Service Mesh patterns.
+
+### Trigger Conditions
+- When architecting a microservices backend that needs a unified entry point (BFF - Backend for Frontend).
+- When configuring SSL/TLS termination, rate limiting, or IP allowlisting at the infrastructure level.
+- When the user asks about "Traefik", "NGINX config", "Kong", or "API routing".
+- When implementing blue-green deployments or canary releases via traffic splitting.
+
+### Core Architectural Guidelines
+
+#### 1. API Gateway Pattern
+Instead of client applications calling individual microservices, route all traffic through an API Gateway.
+- **Cross-Cutting Concerns**: Offload authentication (JWT verification), rate limiting, and CORS handling to the Gateway.
+- **Routing**: Use path-based routing (e.g., `/api/users` -> Users Service, `/api/billing` -> Billing Service).
+
+#### 2. Tool Selection
+- **Traefik**: Best for Docker/Kubernetes environments due to its auto-discovery capabilities via labels/annotations.
+- **Caddy**: Best for simplicity and automatic HTTPS (Let's Encrypt provisioning).
+- **Kong API Gateway**: Best for enterprise environments requiring extensive plugins (OIDC, rate limiting, analytics).
+- **Cloudflare (Edge)**: Use Cloudflare rules for edge-level caching, WAF, and DDoS protection before traffic even reaches your origin proxy.
+
+#### 3. Configuration Best Practices
+- **Timeouts**: Always configure strict proxy read/write timeouts to prevent stalled connections from exhausting worker pools.
+- **Health Checks**: Configure active health checks so the proxy can automatically remove failing backend instances from the load balancer pool.
+- **X-Forwarded Headers**: Ensure your proxy correctly sets `X-Forwarded-For` and `X-Forwarded-Proto` so backend services know the client's real IP and protocol.
+
+## Orchestration & Integration
+- Sits in front of `js-backend-expert`, `go-programming-expert`, and `rust-programming-expert` services.
+- Offloads work from `rate-limit-abuse-prevention` by handling rate limits at the L7 proxy layer.
+- Complements `ci-cd-devops-architect` when configuring Docker Compose or Kubernetes Ingress.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Panduan komprehensif untuk routing, load balancing, dan manajemen trafik di lapisan terluar (perimeter) arsitektur microservices. Mencakup konfigurasi API Gateway (Kong), reverse proxy modern (Traefik, Caddy, NGINX), dan Service Mesh.
+
+### Kondisi Pemicu
+- Saat merancang backend microservices yang membutuhkan satu pintu masuk terpadu (BFF).
+- Saat mengonfigurasi terminasi SSL/TLS, rate limiting, atau IP allowlisting di tingkat infrastruktur.
+- Saat menerapkan rilis canary atau blue-green deployment melalui pembagian trafik (traffic splitting).
+
+### Panduan Arsitektur Inti
+
+#### 1. Pola API Gateway
+Jangan biarkan klien (frontend/mobile) memanggil microservices secara langsung.
+- Gunakan Gateway untuk menangani masalah lintas-layanan (cross-cutting) seperti verifikasi JWT, CORS, dan rate limiting.
+- Gunakan routing berbasis *path* (jalur).
+
+#### 2. Pemilihan Tool
+- **Traefik**: Pilihan terbaik untuk lingkungan Docker/Kubernetes karena penemuan layanan otomatis (auto-discovery) melalui label.
+- **Caddy**: Pilihan terbaik untuk kemudahan setup dan HTTPS otomatis (Let's Encrypt).
+- **Kong**: Standar industri untuk kebutuhan Enterprise dengan sistem plugin yang kuat.
+- **Cloudflare**: Lini pertahanan pertama untuk WAF dan perlindungan DDoS di sisi Edge.
+
+#### 3. Praktik Terbaik Konfigurasi
+- **Timeouts**: Selalu tetapkan batas waktu (timeout) koneksi proxy untuk mencegah server kehabisan resource karena koneksi yang menggantung.
+- **Health Checks**: Aktifkan health check agar proxy tidak mengirimkan request ke service yang sedang mati.
+- **Header X-Forwarded**: Pastikan proxy menyertakan header `X-Forwarded-For` agar backend mengetahui IP asli klien.
+
+## Integrasi Orkestrasi
+- Berada di depan service yang dibangun dengan `js-backend-expert`, `go-programming-expert`, atau `rust-programming-expert`.
+- Bekerja sama dengan `ci-cd-devops-architect` untuk konfigurasi Ingress Kubernetes atau Docker Compose.

package/skills/app-analyzer-optimizer/SKILL.md

@@ -1,189 +1,196 @@
----
-name: app-analyzer-optimizer
-description: "Deeply analyzes application architecture and structure to perform audit, bottleneck detection, and code/performance optimization / Mempelajari arsitektur dan struktur aplikasi secara mendalam untuk melakukan audit, deteksi bottleneck, serta optimasi performa dan kode."
+---
+name: app-analyzer-optimizer
+description: "Deeply analyzes application architecture and structure to perform audit, bottleneck detection, and code/performance optimization / Mempelajari arsitektur dan struktur aplikasi secara mendalam untuk melakukan audit, deteksi bottleneck, serta optimasi performa dan kode."
 author: "Roedy Rustam"
----
-
-# App Analyzer & Optimizer (2026 Edition)
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Description
-Deep application analysis and optimization skill. Performs architectural audits, bottleneck detection, bundle analysis, database query profiling, and AI-assisted code review across Next.js, React, Node.js, Go, Python, and Rust applications.
-
-### Trigger Conditions
-- Auditing an existing codebase for architectural issues or technical debt.
-- Detecting performance bottlenecks (slow API routes, large bundles, N+1 queries).
-- Analyzing bundle size and suggesting code splitting opportunities.
-- Reviewing code quality (complexity, duplication, dead code).
-- Using AI-assisted tools to accelerate code review and analysis.
-
-### Analysis Protocol (5 Phases)
-
-#### Phase 1: Architecture Discovery
-```bash
-# Map the entire project structure
-find . -type f -name "*.ts" -o -name "*.tsx" -o -name "*.go" | head -100
-# Count lines per file (find largest files)
-find . -name "*.ts" -exec wc -l {} + | sort -rn | head -20
-# Find circular dependencies (TypeScript/JS)
-npx madge --circular --extensions ts,tsx src/
-```
-
-#### Phase 2: Bundle Analysis (Next.js / Vite)
-```bash
-# Next.js bundle analyzer
-ANALYZE=true next build
-
-# Or install dedicated tool
-npx @next/bundle-analyzer
-
-# Vite bundle visualization
-npx vite-bundle-visualizer
-
-# Check for duplicate dependencies
-npx depcheck
-npx bundle-phobia-cli check package.json
-```
-
-Key bundle red flags:
-- Any single chunk > 500KB (uncompressed).
-- Importing entire libraries (`import _ from 'lodash'` vs `import debounce from 'lodash/debounce'`).
-- Moment.js (replace with `date-fns` or `Temporal`).
-- `node_modules` leaking into client bundle.
-
-#### Phase 3: Database Query Analysis
-```sql
--- PostgreSQL: Find slow queries
-SELECT query, mean_exec_time, calls, total_exec_time
-FROM pg_stat_statements
-ORDER BY mean_exec_time DESC
-LIMIT 20;
-
--- Find missing indexes (sequential scans on large tables)
-SELECT schemaname, tablename, attname, n_distinct, correlation
-FROM pg_stats
-WHERE tablename = 'your_table'
-ORDER BY n_distinct DESC;
-
--- Detect N+1 queries: Enable query logging
--- In Drizzle:
-const db = drizzle(client, { logger: true });
--- In Prisma:
-DATABASE_URL="...?connection_limit=5" prisma studio
-```
-
-#### Phase 4: AI-Assisted Code Review
-Use AI tools to accelerate analysis:
-
-| Tool | Purpose |
-|---|---|
-| **CodeRabbit** | Automated PR review, pattern detection |
-| **Sourcegraph Cody** | Codebase-wide semantic search and explanation |
-| **GitHub Copilot** | Inline suggestions and refactoring |
-| **Cursor / Windsurf** | AI IDE with full-repo context |
-
-AI review prompts for Gemini Agent:
-```
-Analyze all files in src/features/ and identify:
-1. Functions longer than 30 lines
-2. Duplicated business logic across files
-3. Missing error handling in async functions
-4. Components that directly call APIs (violating separation of concerns)
-```
-
-#### Phase 5: Performance Profiling
-
-**Frontend (React / Next.js):**
-```bash
-# React DevTools Profiler — identify render bottlenecks
-# Chrome DevTools > Performance tab > Record interaction
-
-# Lighthouse CI — automated CWV tracking
-npm install -g @lhci/cli
-lhci autorun
-```
-
-**Backend (Node.js):**
-```bash
-# Built-in Node.js profiler
-node --prof server.js
-node --prof-process isolate-*.log > processed.txt
-
-# Clinic.js — flamegraph, bubble chart, doctor
-npm install -g clinic
-clinic doctor -- node server.js
-clinic flame -- node server.js
-```
-
-**Go:**
-```bash
-# Built-in pprof profiler
-go tool pprof http://localhost:6060/debug/pprof/profile?seconds=30
-go tool pprof -http=:8080 profile.out
-```
-
-### Common Bottleneck Patterns & Fixes
-
-| Bottleneck | Symptom | Fix |
-|---|---|---|
-| N+1 queries | DB calls proportional to list length | Add `.include()` / JOIN or DataLoader |
-| Missing indexes | Slow queries on filtered columns | `CREATE INDEX CONCURRENTLY` |
-| Unoptimized images | Large LCP, slow page load | Next.js `<Image>`, WebP, lazy loading |
-| Over-fetching | Fetching full objects when only 1 field needed | Select specific columns |
-| No pagination | Fetching entire tables | Add `LIMIT/OFFSET` or cursor pagination |
-| Blocking main thread | High INP, unresponsive UI | `useTransition`, web workers |
-| No caching | Same data fetched repeatedly | Redis, React Query staleTime, HTTP cache |
-| Bundle bloat | Large JS payload | Tree-shaking, code splitting, lazy imports |
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Deskripsi
-Skill analisis dan optimasi aplikasi mendalam. Melakukan audit arsitektur, deteksi bottleneck, analisis bundle, profiling query database, dan code review berbantuan AI di aplikasi Next.js, React, Node.js, Go, Python, dan Rust.
-
-### Kondisi Pemicu
-- Mengaudit codebase yang ada untuk masalah arsitektur atau hutang teknis.
-- Mendeteksi bottleneck performa (rute API lambat, bundle besar, query N+1).
-- Menganalisis ukuran bundle dan menyarankan peluang code splitting.
-- Meninjau kualitas kode (kompleksitas, duplikasi, kode mati).
-- Menggunakan tool berbantuan AI untuk mempercepat code review dan analisis.
-
-### Protokol Analisis (5 Fase)
-
-#### Fase 1: Penemuan Arsitektur
-Petakan seluruh struktur proyek, hitung baris per file untuk menemukan file terbesar, dan deteksi dependensi circular dengan `npx madge --circular`.
-
-#### Fase 2: Analisis Bundle (Next.js / Vite)
-Gunakan `ANALYZE=true next build` atau `npx vite-bundle-visualizer`. Tanda bahaya bundle: chunk tunggal > 500KB, mengimpor library penuh, Moment.js, atau `node_modules` yang bocor ke bundle klien.
-
-#### Fase 3: Analisis Query Database
-Gunakan `pg_stat_statements` untuk menemukan query lambat. Cari scan sequential pada tabel besar (tanda indeks yang hilang). Aktifkan logging query di Drizzle/Prisma untuk mendeteksi pola N+1.
-
-#### Fase 4: Code Review Berbantuan AI
-Gunakan CodeRabbit untuk review PR otomatis, Sourcegraph Cody untuk pencarian semantik seluruh codebase, dan Gemini Agent dengan prompt analisis spesifik untuk menemukan fungsi panjang, logika bisnis yang diduplikasi, dan error handling yang hilang.
-
-#### Fase 5: Profiling Performa
-- **Frontend**: React DevTools Profiler, Lighthouse CI.
-- **Backend Node.js**: `node --prof`, Clinic.js untuk flamegraph.
-- **Go**: `go tool pprof` untuk CPU dan memory profiling.
-
-### Pola Bottleneck Umum & Perbaikan
-
-| Bottleneck | Gejala | Perbaikan |
-|---|---|---|
-| Query N+1 | Panggilan DB proporsional dengan panjang daftar | Tambahkan `.include()` / JOIN atau DataLoader |
-| Indeks yang hilang | Query lambat pada kolom yang difilter | `CREATE INDEX CONCURRENTLY` |
-| Gambar tidak dioptimalkan | LCP besar, halaman lambat | Next.js `<Image>`, WebP, lazy loading |
-| Over-fetching | Mengambil objek penuh saat hanya 1 field dibutuhkan | Pilih kolom spesifik |
-| Tanpa paginasi | Mengambil seluruh tabel | Tambahkan `LIMIT/OFFSET` atau cursor pagination |
-| Memblokir thread utama | INP tinggi, UI tidak responsif | `useTransition`, web workers |
-| Tanpa caching | Data yang sama diambil berulang kali | Redis, React Query staleTime, HTTP cache |
-| Bundle membengkak | Payload JS besar | Tree-shaking, code splitting, lazy imports |
+---
+
+# App Analyzer & Optimizer (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+Deep application analysis and optimization skill. Performs architectural audits, bottleneck detection, bundle analysis, database query profiling, and AI-assisted code review across Next.js, React, Node.js, Go, Python, and Rust applications.
+
+### Trigger Conditions
+- Auditing an existing codebase for architectural issues or technical debt.
+- Detecting performance bottlenecks (slow API routes, large bundles, N+1 queries).
+- Analyzing bundle size and suggesting code splitting opportunities.
+- Reviewing code quality (complexity, duplication, dead code).
+- Using AI-assisted tools to accelerate code review and analysis.
+
+### Analysis Protocol (5 Phases)
+
+#### Phase 1: Architecture Discovery
+```bash
+# Map the entire project structure
+find . -type f -name "*.ts" -o -name "*.tsx" -o -name "*.go" | head -100
+# Count lines per file (find largest files)
+find . -name "*.ts" -exec wc -l {} + | sort -rn | head -20
+# Find circular dependencies (TypeScript/JS)
+npx madge --circular --extensions ts,tsx src/
+```
+
+#### Phase 2: Bundle Analysis (Next.js / Vite)
+```bash
+# Next.js bundle analyzer
+ANALYZE=true next build
+
+# Or install dedicated tool
+npx @next/bundle-analyzer
+
+# Vite bundle visualization
+npx vite-bundle-visualizer
+
+# Check for duplicate dependencies
+npx depcheck
+npx bundle-phobia-cli check package.json
+```
+
+Key bundle red flags:
+- Any single chunk > 500KB (uncompressed).
+- Importing entire libraries (`import _ from 'lodash'` vs `import debounce from 'lodash/debounce'`).
+- Moment.js (replace with `date-fns` or `Temporal`).
+- `node_modules` leaking into client bundle.
+
+#### Phase 3: Database Query Analysis
+```sql
+-- PostgreSQL: Find slow queries
+SELECT query, mean_exec_time, calls, total_exec_time
+FROM pg_stat_statements
+ORDER BY mean_exec_time DESC
+LIMIT 20;
+
+-- Find missing indexes (sequential scans on large tables)
+SELECT schemaname, tablename, attname, n_distinct, correlation
+FROM pg_stats
+WHERE tablename = 'your_table'
+ORDER BY n_distinct DESC;
+
+-- Detect N+1 queries: Enable query logging
+-- In Drizzle:
+const db = drizzle(client, { logger: true });
+-- In Prisma:
+DATABASE_URL="...?connection_limit=5" prisma studio
+```
+
+#### Phase 4: AI-Assisted Code Review
+Use AI tools to accelerate analysis:
+
+| Tool | Purpose |
+|---|---|
+| **CodeRabbit** | Automated PR review, pattern detection |
+| **Sourcegraph Cody** | Codebase-wide semantic search and explanation |
+| **GitHub Copilot** | Inline suggestions and refactoring |
+| **Cursor / Windsurf** | AI IDE with full-repo context |
+
+AI review prompts for Gemini Agent:
+```
+Analyze all files in src/features/ and identify:
+1. Functions longer than 30 lines
+2. Duplicated business logic across files
+3. Missing error handling in async functions
+4. Components that directly call APIs (violating separation of concerns)
+```
+
+#### Phase 5: Performance Profiling
+
+**Frontend (React / Next.js):**
+```bash
+# React DevTools Profiler — identify render bottlenecks
+# Chrome DevTools > Performance tab > Record interaction
+
+# Lighthouse CI — automated CWV tracking
+npm install -g @lhci/cli
+lhci autorun
+```
+
+**Backend (Node.js):**
+```bash
+# Built-in Node.js profiler
+node --prof server.js
+node --prof-process isolate-*.log > processed.txt
+
+# Clinic.js — flamegraph, bubble chart, doctor
+npm install -g clinic
+clinic doctor -- node server.js
+clinic flame -- node server.js
+```
+
+**Go:**
+```bash
+# Built-in pprof profiler
+go tool pprof http://localhost:6060/debug/pprof/profile?seconds=30
+go tool pprof -http=:8080 profile.out
+```
+
+### Common Bottleneck Patterns & Fixes
+
+| Bottleneck | Symptom | Fix |
+|---|---|---|
+| N+1 queries | DB calls proportional to list length | Add `.include()` / JOIN or DataLoader |
+| Missing indexes | Slow queries on filtered columns | `CREATE INDEX CONCURRENTLY` |
+| Unoptimized images | Large LCP, slow page load | Next.js `<Image>`, WebP, lazy loading |
+| Over-fetching | Fetching full objects when only 1 field needed | Select specific columns |
+| No pagination | Fetching entire tables | Add `LIMIT/OFFSET` or cursor pagination |
+| Blocking main thread | High INP, unresponsive UI | `useTransition`, web workers |
+| No caching | Same data fetched repeatedly | Redis, React Query staleTime, HTTP cache |
+| Bundle bloat | Large JS payload | Tree-shaking, code splitting, lazy imports |
+
+---
+
+<a name="bahasa-indonesia"></a>
+## 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
+Skill analisis dan optimasi aplikasi mendalam. Melakukan audit arsitektur, deteksi bottleneck, analisis bundle, profiling query database, dan code review berbantuan AI di aplikasi Next.js, React, Node.js, Go, Python, dan Rust.
+
+### Kondisi Pemicu
+- Mengaudit codebase yang ada untuk masalah arsitektur atau hutang teknis.
+- Mendeteksi bottleneck performa (rute API lambat, bundle besar, query N+1).
+- Menganalisis ukuran bundle dan menyarankan peluang code splitting.
+- Meninjau kualitas kode (kompleksitas, duplikasi, kode mati).
+- Menggunakan tool berbantuan AI untuk mempercepat code review dan analisis.
+
+### Protokol Analisis (5 Fase)
+
+#### Fase 1: Penemuan Arsitektur
+Petakan seluruh struktur proyek, hitung baris per file untuk menemukan file terbesar, dan deteksi dependensi circular dengan `npx madge --circular`.
+
+#### Fase 2: Analisis Bundle (Next.js / Vite)
+Gunakan `ANALYZE=true next build` atau `npx vite-bundle-visualizer`. Tanda bahaya bundle: chunk tunggal > 500KB, mengimpor library penuh, Moment.js, atau `node_modules` yang bocor ke bundle klien.
+
+#### Fase 3: Analisis Query Database
+Gunakan `pg_stat_statements` untuk menemukan query lambat. Cari scan sequential pada tabel besar (tanda indeks yang hilang). Aktifkan logging query di Drizzle/Prisma untuk mendeteksi pola N+1.
+
+#### Fase 4: Code Review Berbantuan AI
+Gunakan CodeRabbit untuk review PR otomatis, Sourcegraph Cody untuk pencarian semantik seluruh codebase, dan Gemini Agent dengan prompt analisis spesifik untuk menemukan fungsi panjang, logika bisnis yang diduplikasi, dan error handling yang hilang.
+
+#### Fase 5: Profiling Performa
+- **Frontend**: React DevTools Profiler, Lighthouse CI.
+- **Backend Node.js**: `node --prof`, Clinic.js untuk flamegraph.
+- **Go**: `go tool pprof` untuk CPU dan memory profiling.
+
+### Pola Bottleneck Umum & Perbaikan
+
+| Bottleneck | Gejala | Perbaikan |
+|---|---|---|
+| Query N+1 | Panggilan DB proporsional dengan panjang daftar | Tambahkan `.include()` / JOIN atau DataLoader |
+| Indeks yang hilang | Query lambat pada kolom yang difilter | `CREATE INDEX CONCURRENTLY` |
+| Gambar tidak dioptimalkan | LCP besar, halaman lambat | Next.js `<Image>`, WebP, lazy loading |
+| Over-fetching | Mengambil objek penuh saat hanya 1 field dibutuhkan | Pilih kolom spesifik |
+| Tanpa paginasi | Mengambil seluruh tabel | Tambahkan `LIMIT/OFFSET` atau cursor pagination |
+| Memblokir thread utama | INP tinggi, UI tidak responsif | `useTransition`, web workers |
+| Tanpa caching | Data yang sama diambil berulang kali | Redis, React Query staleTime, HTTP cache |
+| Bundle membengkak | Payload JS besar | Tree-shaking, code splitting, lazy imports |
+
+
+## Orchestration & Integration
+- Integrates with performance-web-vitals and production-ready-hardener.

package/skills/apple-ecosystem-expert/SKILL.md

@@ -0,0 +1,145 @@
+---
+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"
+---
+
+# Apple Ecosystem Expert — vibes-plug Skill
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## 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:
+
+```html
+<!-- 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)`. |
+
+```css
+/* 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)
+
+---
+
+<a name="bahasa-indonesia"></a>
+## 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`.

package/skills/{asisten_ramah → asisten-ramah}/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: asisten-ramah
 description: "Skill to make Antigravity respond in a friendly manner / Skill untuk membuat Antigravity membalas dengan ramah."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
 ---
 
 # Asisten Ramah / Friendly Assistant
@@ -13,6 +13,9 @@ author: "Roedy Rustam"
 <a name="english"></a>
 ## English
 
+### Orchestration & Integration
+Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
+
 ### Description
 This skill is a basic example to make Antigravity (me) always respond with a friendly, warm, and polite language style.
 
@@ -29,6 +32,9 @@ Always active for every interaction with the user.
 <a name="bahasa-indonesia"></a>
 ## 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
 Skill ini adalah contoh dasar untuk membuat Antigravity (saya) selalu membalas dengan gaya bahasa tertentu yang ramah dan sopan.