vibes-plug 2.5.0 → 2.11.0

package/skills/angular-expert/SKILL.md

@@ -0,0 +1,148 @@
+---
+name: angular-expert
+description: "Expert guide for Angular 19+ enterprise applications — Signals, Standalone Components, NgRx SignalStore, SSR with Hydration, and Angular Material 3 / Panduan ahli aplikasi enterprise Angular 19+."
+author: "Roedy Rustam"
+---
+
+# Angular Expert (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Orchestration & Integration
+- **`typescript-expert`**: Strict TypeScript typing and decorators in Angular 19+.
+- **`api-design-expert`**: REST and GraphQL client architecture with Angular `HttpClient`.
+- **`e2e-testing-expert`**: Playwright and Cypress end-to-end testing for Angular apps.
+- **`global-a11y-i18n-expert`**: Angular localized translations (`@angular/localize`) and accessibility compliance.
+- **`ci-cd-devops-architect`**: Dockerizing and deploying Angular SSR applications.
+
+### Description
+Production-ready guide for building scalable, enterprise-grade web applications using Angular 19+. Covers modern Standalone Components (NgModule-free), fine-grained Signals (`signal()`, `computed()`, `effect()`), Signal-based inputs/outputs, NgRx SignalStore, deferrable views (`@defer`), SSR with Event Replay hydration, and Angular Material 3.
+
+### Trigger Conditions
+- Building or refactoring enterprise-scale Angular applications.
+- Migrating legacy Angular (NgModules / RxJS heavy) to Angular 19+ Standalone Components & Signals.
+- Implementing state management with NgRx SignalStore.
+- Configuring Angular SSR with hydration and deferrable views (`@defer`).
+
+---
+
+### Core Architecture & Modern Patterns
+
+#### 1. Standalone Component with Signals & Signal Inputs
+```typescript
+import { Component, signal, computed, input, output, ChangeDetectionStrategy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+export interface UserItem {
+  id: string;
+  name: string;
+  role: 'admin' | 'member';
+}
+
+@Component({
+  selector: 'app-user-card',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="user-card" [class.admin]="isAdmin()">
+      <h3>{{ user().name }}</h3>
+      <p>Role: {{ user().role }}</p>
+      <button (click)="onRoleChange()">Promote</button>
+    </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UserCardComponent {
+  // Signal inputs & outputs (Angular 19+)
+  user = input.required<UserItem>();
+  roleUpdated = output<string>();
+
+  isAdmin = computed(() => this.user().role === 'admin');
+
+  onRoleChange() {
+    this.roleUpdated.emit(this.user().id);
+  }
+}
+```
+
+#### 2. NgRx SignalStore
+```typescript
+import { signalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
+import { computed, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { rxMethod } from '@ngrx/signals/rxjs-interop';
+import { pipe, switchMap, tap } from 'rxjs';
+
+interface ProductsState {
+  products: Array<{ id: string; title: string; price: number }>;
+  isLoading: boolean;
+  filter: string;
+}
+
+const initialState: ProductsState = {
+  products: [],
+  isLoading: false,
+  filter: '',
+};
+
+export const ProductsStore = signalStore(
+  { providedIn: 'root' },
+  withState(initialState),
+  withComputed(({ products, filter }) => ({
+    filteredProducts: computed(() =>
+      products().filter((p) => p.title.toLowerCase().includes(filter().toLowerCase()))
+    ),
+    totalCount: computed(() => products().length),
+  })),
+  withMethods((store, http = inject(HttpClient)) => ({
+    updateFilter(filter: string) {
+      patchState(store, { filter });
+    },
+    loadProducts: rxMethod<void>(
+      pipe(
+        tap(() => patchState(store, { isLoading: true })),
+        switchMap(() =>
+          http.get<Array<{ id: string; title: string; price: number }>>('/api/products').pipe(
+            tap((products) => patchState(store, { products, isLoading: false }))
+          )
+        )
+      )
+    ),
+  }))
+);
+```
+
+#### 3. Deferrable Views (`@defer`)
+```html
+@defer (on viewport; prefetch on idle) {
+  <app-analytics-dashboard [data]="dashboardData()" />
+} @placeholder {
+  <div class="skeleton-loader">Loading analytics widget...</div>
+} @error {
+  <p>Failed to load analytics dashboard.</p>
+}
+```
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+- **`typescript-expert`**: Penggunaan TypeScript ketat dan dekorator pada Angular 19+.
+- **`api-design-expert`**: Arsitektur klien REST dan GraphQL dengan `HttpClient`.
+- **`e2e-testing-expert`**: Pengujian end-to-end menggunakan Playwright atau Cypress.
+
+### Deskripsi
+Panduan produksi untuk membangun aplikasi web skala enterprise menggunakan Angular 19+. Mencakup Standalone Components tanpa NgModule, reaktivitas modern berbasis Signals, NgRx SignalStore, deferrable views (`@defer`), SSR dengan hidrasi Event Replay, dan integrasi Angular Material 3.
+
+### Kondisi Pemicu
+- Membangun atau merestrukturisasi aplikasi enterprise Angular.
+- Migrasi Angular lama (berbasis NgModule/RxJS berat) ke Angular 19+ Standalone & Signals.
+- Mengelola state aplikasi menggunakan NgRx SignalStore.
+- Mengoptimalkan performa rendering dengan deferrable views dan SSR hydration.

package/skills/api-design-expert/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: api-design-expert
 description: "Expert guide for designing robust APIs: REST best practices, GraphQL, gRPC, tRPC, OpenAPI/Swagger, API versioning, rate limiting, and contract-first design / Panduan ahli untuk merancang API yang kuat: praktik terbaik REST, GraphQL, gRPC, tRPC, OpenAPI/Swagger, versioning API, rate limiting, dan desain contract-first."
-author: vibes-plug-swarm
+author: "Roedy Rustam"
 ---
 
 # API Design Expert
@@ -282,6 +282,9 @@ components:
 <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 merancang, mendokumentasikan, dan mengembangkan API berkualitas produksi. Mencakup pemodelan resource **REST** dan semantik HTTP, desain skema **GraphQL**, **gRPC** dengan protobuf, dan **tRPC** untuk API end-to-end type-safe di TypeScript. Termasuk dokumentasi OpenAPI 3.1, strategi versioning API, rate limiting, idempotency, dan alur kerja contract-first.
 
@@ -309,6 +312,6 @@ Panduan ahli untuk merancang, mendokumentasikan, dan mengembangkan API berkualit
 5. **Idempotency**: Implementasikan `Idempotency-Key` header untuk operasi mutasi yang kritis.
 6. **Rate Limiting**: Selalu sertakan header `X-RateLimit-*` dan kode `429` yang benar.
 
-
-## Orchestration & Integration
+
+## Orchestration & Integration
 - Connects to other backend skills as part of the orchestration flow.

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,7 +1,7 @@
 ---
 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: vibes-plug-swarm
+author: "Roedy Rustam"
 ---
 
 # App Analyzer & Optimizer (2026 Edition)
@@ -146,6 +146,9 @@ go tool pprof -http=:8080 profile.out
 <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.
 
@@ -188,6 +191,6 @@ Gunakan CodeRabbit untuk review PR otomatis, Sourcegraph Cody untuk pencarian se
 | 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
+
+## Orchestration & Integration
 - Integrates with performance-web-vitals and production-ready-hardener.

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

@@ -1,142 +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: vibes-plug-swarm
----
-
-# 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
-
-### 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`.
+---
+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.