vibes-plug 1.0.0 → 2.5.0

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

@@ -1,189 +1,193 @@
----
-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 |
+---
+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
+---
+
+# 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 |
+
+
+## Orchestration & Integration
+- Integrates with performance-web-vitals and production-ready-hardener.

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

@@ -0,0 +1,142 @@
+---
+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`.
+- Orchestrated by: `brainstorming`, `zero-to-prod-orchestrator`, `production-ready-hardener`.

package/skills/async-queue-temporal-expert/SKILL.md

@@ -0,0 +1,54 @@
+---
+name: async-queue-temporal-expert
+description: "Expert guide for Durable Workflow Engines (Temporal.io, Trigger.dev v3, Inngest, BullMQ v5) and fault-tolerant background sagas / Panduan ahli workflow engine tahan-gagal (Temporal, Trigger.dev, Inngest, BullMQ)."
+author: vibes-plug-swarm
+---
+
+# Async Queue & Durable Workflow Expert
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Purpose & Overview
+Production-grade guidance for designing durable, fault-tolerant background execution pipelines and distributed state machines using Temporal.io, Trigger.dev v3, Inngest, and BullMQ v5. Guarantees execution completion across long-running background tasks, API rate limits, and server crashes.
+
+### Key Capabilities
+- **Durable Execution**: Automatic retry, state persistence, and resume after server restarts or network partitions.
+- **Saga Pattern Orchestration**: Multi-step distributed transactions with compensation logic for rollback on failure.
+- **Rate Limiting & Concurrency**: Controlled worker concurrency, backoff jitter, and per-tenant queue isolation.
+
+```typescript
+import { task } from "@trigger.dev/sdk/v3";
+
+export const generateSaaSReport = task({
+  id: "generate-saas-report",
+  run: async (payload: { tenantId: string }) => {
+    // Durable step execution with automatic retries
+    const data = await fetchTenantData(payload.tenantId);
+    const pdfUrl = await generatePDF(data);
+    await sendEmailReport(payload.tenantId, pdfUrl);
+    return { success: true, pdfUrl };
+  },
+});
+```
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Panduan tingkat produksi untuk merancang pipeline eksekusi background yang tahan-gagal (durable execution) dan state machine terdistribusi menggunakan Temporal.io, Trigger.dev v3, Inngest, dan BullMQ v5. Menjamin penyelesaian eksekusi tugas background berdurasi panjang meskipun terjadi server crash atau pembatasan API rate limit.
+
+### Fitur Utama
+- **Eksekusi Tahan-Gagal (Durable)**: Retry otomatis, persistensi state, dan kompensasi lanjutan setelah restart server.
+- **Pola Saga**: Transaksi terdistribusi multi-langkah dengan logika kompensasi untuk pembatalan saat terjadi kegagalan.
+- **Rate Limiting & Konkurensi**: Kontrol konkurensi worker, backoff jitter, dan isolasi antrean per-tenant.
+
+
+## Orchestration & Integration
+- Connects to other backend skills as part of the orchestration flow.