vibes-plug 2.11.0 → 3.9.0

package/skills/production-ready-hardener/SKILL.md

@@ -1,7 +1,8 @@
 ---
 name: production-ready-hardener
 description: "Ultimate production readiness skill that orchestrates all relevant skills (frontend, backend, security, performance, SEO, testing, DevOps) to harden applications before deployment / Skill kesiapan produksi utama yang mengorkestrasi semua skill relevan (frontend, backend, keamanan, performa, SEO, testing, DevOps) untuk mengeraskan aplikasi sebelum deployment."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
+version: "3.0.0"
 ---
 
 # Production-Ready Hardener
@@ -14,7 +15,7 @@ author: "Roedy Rustam"
 ## English
 
 ### Orchestration & Integration
-Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
+Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `session-memory-manager` to ensure cohesive execution.
 
 ### Description
 The **Production-Ready Hardener** is a master orchestrator skill that combines and delegates to all relevant vibes-plug skills to ensure your application is rock-solid, secure, performant, and production-grade before deployment. It acts as a comprehensive pre-production checklist that leaves no stone unturned — from frontend polish to backend resilience, from data security to observability.
@@ -31,21 +32,20 @@ This skill does NOT replace individual skills — it **coordinates** them into a
 │                                                                  │
 │  ┌─── PHASE 1: Architecture & Code Quality ───────────────────┐  │
 │  │  • scalability-clean-code (SOLID, DRY, Clean Architecture)  │  │
-│  │  • fullstack-expert / senior-fullstack (Design & patterns) │  │
-│  │  • app-analyzer-optimizer (Deep codebase & bottleneck audit)│ │
+│  │  • fullstack-expert (Design & polyglot patterns)            │  │
+│  │  • app-analyzer-optimizer (Deep codebase & bottleneck audit)│  │
 │  │  • monorepo-architect (Turborepo & pnpm workspace structure)│  │
 │  │  • dependency-upgrade-migrator (Codemod & package audits)  │  │
-│  │  • vibe-code-gardener (Purge AI slop & context drift)      │  │
+│  │  • anti-slop (Eliminate conversational & code slop)        │  │
 │  │  • typescript-expert (Strict mode & type-safe patterns)    │  │
 │  └────────────────────────────────────────────────────────────┘  │
 │                                                                  │
 │  ┌─── PHASE 2: Frontend Hardening ────────────────────────────┐  │
 │  │  • senior-frontend (React 19, Next.js 15 App Router)       │  │
-│  │  • design-system-architect (Tokens, Radix, CVA, WCAG 2.2)  │  │
+│  │  • design-system-architect (Tokens, Radix, Base UI, WCAG)  │  │
 │  │  • tailwind-expert (CSS-first config, OKLCH, responsive)   │  │
 │  │  • form-validation-expert (React Hook Form, Zod validation)│  │
 │  │  • state-management-expert (Zustand, Jotai, TanStack Store)│  │
-│  │  • ui-components-expert (Input, nav, container primitives) │  │
 │  │  • ui-ux-pro-max / hig (HIG principles & design system)    │  │
 │  │  • global-a11y-i18n-expert (Web accessibility & i18n)      │  │
 │  │  • mobile-expo-expert / tauri-expert (Mobile & Desktop)    │  │
@@ -53,17 +53,15 @@ This skill does NOT replace individual skills — it **coordinates** them into a
 │                                                                  │
 │  ┌─── PHASE 3: Backend & AI Services ─────────────────────────┐  │
 │  │  • js-backend-expert (Node 24, Bun 1.2, Fastify, Hono)     │  │
-│  │  • go-programming-expert (Go 1.24+, microservices, gRPC)   │  │
+│  │  • go-programming-expert (Go 1.25+, microservices, gRPC)   │  │
 │  │  • python-programming-expert (Python 3.13+, FastAPI, uv)   │  │
 │  │  • rust-programming-expert (Rust 2024, Axum, async)        │  │
-│  │  • database-orm-expert (Prisma 6, Drizzle, migrations)    │  │
-│  │  • edge-serverless-db-expert (Neon, Cloudflare D1, Turso)  │  │
+│  │  • database-orm-expert (Prisma 6, Drizzle, Edge DBs, RLS)  │  │
 │  │  • cron-scheduler-expert / async-queue-temporal-expert     │  │
-│  │  • email-notification-expert (Transactional emails)        │  │
+│  │  • email-notification-expert (Email & Push notifications)  │  │
 │  │  • file-upload-media-expert (S3, Presigned URLs, CDN)      │  │
 │  │  • mcp-server-architect (MCP Server Tools & Zod schemas)   │  │
 │  │  • multi-agent-orchestration / ai-llm-integration-expert   │  │
-│  │  • ai-cost-token-optimizer (Prompt caching & token budget) │  │
 │  └────────────────────────────────────────────────────────────┘  │
 │                                                                  │
 │  ┌─── PHASE 4: Security Hardening ────────────────────────────┐  │
@@ -97,8 +95,8 @@ This skill does NOT replace individual skills — it **coordinates** them into a
 │  │  • ci-cd-devops-architect (GitHub Actions, Docker, IaC)    │  │
 │  │  • cloud-hosting-expert (Vercel, Cloudflare Workers, AWS)  │  │
 │  │  • data-telemetry-expert (OpenTelemetry, PostHog metrics)  │  │
-│  │  • session-handoff-resume (Save state checkpoint)          │  │
-│  │  • auto-doc-updater (CHANGELOG & BLUEPRINT automation)     │  │
+│  │  • session-memory-manager (State checkpoints & handoff)    │  │
+│  │  • prd-architect (ADR records & changelog updates)         │  │
 │  └────────────────────────────────────────────────────────────┘  │
 │                                                                  │
 └──────────────────────────────────────────────────────────────────┘
@@ -122,13 +120,13 @@ When this skill is triggered, execute the following 7-phase hardening process **
 - [ ] **TypeScript strict mode** enabled (`strict: true` in tsconfig), no `any` types (`typescript-expert`)
 - [ ] **Input validation** on all API boundaries (Zod, Pydantic, or equivalent)
 - [ ] **No hardcoded values** — all config via environment variables or config files
-- [ ] **Dead code & AI slop eliminated** — unneeded boilerplate cleaned via `vibe-code-gardener`
+- [ ] **Dead code & AI slop eliminated** — unneeded boilerplate cleaned via `vibe-code-gardener` and `anti-slop`
 - [ ] **Dependency audit** — all packages up-to-date, no known CVEs (`dependency-upgrade-migrator`, `npm audit`)
 
 ---
 
 #### PHASE 2: Frontend Hardening
-**Orchestrates:** `senior-frontend`, `design-system-architect`, `tailwind-expert`, `form-validation-expert`, `state-management-expert`, `ui-components-expert`, `ui-ux-pro-max`, `hig`, `tanstack-query-expert`, `global-a11y-i18n-expert`
+**Orchestrates:** `senior-frontend`, `design-system-architect`, `tailwind-expert`, `form-validation-expert`, `state-management-expert`, `design-system-architect, senior-frontend`, `ui-ux-pro-max`, `hig`, `tanstack-query-expert`, `global-a11y-i18n-expert`
 
 **Checklist:**
 - [ ] **Server Components by default** — `'use client'` only when truly needed (state, events, browser APIs)
@@ -223,7 +221,7 @@ When this skill is triggered, execute the following 7-phase hardening process **
 ---
 
 #### PHASE 7: DevOps & Deployment Readiness
-**Orchestrates:** `ci-cd-devops-architect`, `cloud-hosting-expert`, `data-telemetry-expert`, `session-handoff-resume`, `auto-doc-updater`
+**Orchestrates:** `ci-cd-devops-architect`, `cloud-hosting-expert`, `data-telemetry-expert`, `session-memory-manager`, `prd-architect`
 
 **Checklist:**
 - [ ] **Docker** — multi-stage builds, non-root user, HEALTHCHECK, `.dockerignore` configured
@@ -234,7 +232,7 @@ When this skill is triggered, execute the following 7-phase hardening process **
 - [ ] **SLIs/SLOs defined** — error rate < 0.1%, p99 latency < 500ms, uptime > 99.9%
 - [ ] **Incident response & Runbooks** — documented runbooks for common failure scenarios
 - [ ] **Backup & disaster recovery** — automated database backups, tested restore procedure
-- [ ] **Session Checkpoint & Docs** — `session-handoff-resume` checkpoint saved, `CHANGELOG.md` & `BLUEPRINT.md` updated (`auto-doc-updater`)
+- [ ] **Session Checkpoint & Docs** — `session-memory-manager` checkpoint saved, `CHANGELOG.md` & `BLUEPRINT.md` updated (`prd-architect`)
 
 ---
 
@@ -312,7 +310,7 @@ Active whenever the user asks to:
 ## 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.
+Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.
 
 ### Deskripsi
 **Production-Ready Hardener** adalah skill orkestrator utama yang menggabungkan dan mendelegasikan ke semua skill vibes-plug yang relevan untuk memastikan aplikasi Anda kokoh, aman, berperforma tinggi, dan siap produksi sebelum deployment. Skill ini berfungsi sebagai checklist pra-produksi komprehensif yang tidak meninggalkan celah — dari polish frontend hingga ketahanan backend, dari keamanan data hingga observability.
@@ -323,13 +321,13 @@ Skill ini TIDAK menggantikan skill individual — ia **mengoordinasikan** mereka
 
 | Fase | Skill yang Digunakan | Fokus Utama |
 |------|---------------------|-------------|
-| 1. Arsitektur & Kualitas Kode | `scalability-clean-code`, `fullstack-expert`, `senior-fullstack`, `app-analyzer-optimizer`, `monorepo-architect`, `dependency-upgrade-migrator`, `vibe-code-gardener`, `typescript-expert` | SOLID, DRY, Clean Architecture, RFC 9457 errors, pembersihan AI slop, strict TS |
-| 2. Pengerasan Frontend | `senior-frontend`, `design-system-architect`, `tailwind-expert`, `form-validation-expert`, `state-management-expert`, `ui-components-expert`, `ui-ux-pro-max`, `hig`, `tanstack-query-expert`, `global-a11y-i18n-expert` | React 19, Error Boundaries, validasi Zod + RHF, a11y, state management, UI primitives |
-| 3. Pengerasan Backend | `js-backend-expert`, `go-programming-expert`, `python-programming-expert`, `rust-programming-expert`, `database-orm-expert`, `edge-serverless-db-expert`, `cron-scheduler-expert`, `async-queue-temporal-expert`, `email-notification-expert`, `file-upload-media-expert`, `mcp-server-architect`, `multi-agent-orchestration`, `ai-cost-token-optimizer` | Database migration, ORM, connection pooling, durable background jobs, transactional email, MCP tools, token budget |
+| 1. Arsitektur & Kualitas Kode | `scalability-clean-code`, `fullstack-expert`, `app-analyzer-optimizer`, `monorepo-architect`, `dependency-upgrade-migrator`, `anti-slop`, `typescript-expert` | SOLID, DRY, Clean Architecture, RFC 9457 errors, pembersihan AI slop, strict TS |
+| 2. Pengerasan Frontend | `senior-frontend`, `design-system-architect`, `tailwind-expert`, `form-validation-expert`, `state-management-expert`, `ui-ux-pro-max`, `hig`, `tanstack-query-expert`, `global-a11y-i18n-expert` | React 19, Error Boundaries, validasi Zod + RHF, a11y, state management, UI primitives |
+| 3. Pengerasan Backend | `js-backend-expert`, `go-programming-expert`, `python-programming-expert`, `rust-programming-expert`, `database-orm-expert`, `cron-scheduler-expert`, `async-queue-temporal-expert`, `email-notification-expert`, `file-upload-media-expert`, `mcp-server-architect`, `multi-agent-orchestration`, `ai-llm-integration-expert` | Database migration, ORM, connection pooling, durable background jobs, transactional email, MCP tools, FinOps |
 | 4. Pengerasan Keamanan | `supabase-security-expert`, `firebase-security-expert`, `authentication-identity-expert`, `zero-trust-secret-vault`, `rate-limit-abuse-prevention`, `secure-fuzz-testing`, `fullstack-expert` | RLS, RBAC, OAuth2, Turnstile bot protection, Upstash rate limit, secret vault, fuzzing, XSS/CSRF |
 | 5. Testing & QA | `e2e-testing-expert`, `browser-automation-expert`, `coderabbit`, `secure-fuzz-testing`, `error-resilience-expert`, `logging-error-tracking-expert` | E2E (Playwright), visual testing, Unit (Vitest), circuit breaker, Sentry & Pino logging |
 | 6. Performa & SEO | `seo`, `seo-geo`, `seo-aeo-landing-page-writer`, `performance-web-vitals`, `app-analyzer-optimizer` | Core Web Vitals (LCP, INP, CLS), bundle, CDN, sitemap, llms.txt & AEO |
-| 7. DevOps & Observability | `ci-cd-devops-architect`, `cloud-hosting-expert`, `data-telemetry-expert`, `session-handoff-resume`, `auto-doc-updater` | Docker, CI/CD pipeline, OpenTelemetry, PostHog, Vercel/Cloudflare, state checkpoint & CHANGELOG |
+| 7. DevOps & Observability | `ci-cd-devops-architect`, `cloud-hosting-expert`, `data-telemetry-expert`, `session-memory-manager`, `prd-architect` | Docker, CI/CD pipeline, OpenTelemetry, PostHog, Vercel/Cloudflare, state checkpoint & CHANGELOG |
 
 ### Protokol Eksekusi
 
@@ -346,7 +344,7 @@ Ketika skill ini dipicu, jalankan **7 fase pengerasan berurutan**. Setiap fase m
 - [ ] TypeScript strict mode aktif (`strict: true`), tanpa tipe `any` (`typescript-expert`)
 - [ ] Validasi input di semua batas API (Zod, Pydantic)
 - [ ] Tidak ada hardcoded value — semua konfigurasi via environment variable
-- [ ] Dead code & AI slop dieliminasi via `vibe-code-gardener`
+- [ ] Dead code & AI slop dieliminasi via `anti-slop`
 - [ ] Audit dependensi — semua paket up-to-date, tanpa CVE (`dependency-upgrade-migrator`)
 
 #### FASE 2: Pengerasan Frontend
@@ -417,8 +415,8 @@ Ketika skill ini dipicu, jalankan **7 fase pengerasan berurutan**. Setiap fase m
 - [ ] Telemetri & observability (OpenTelemetry, PostHog, Sentry) (`data-telemetry-expert`)
 - [ ] Structured logging format JSON
 - [ ] SLI/SLO terdefinisi & backup database otomatis
-- [ ] Session state checkpoint disimpan (`session-handoff-resume`)
-- [ ] Dokumentasi terkini (`CHANGELOG.md`, `BLUEPRINT.md`, `README`) (`auto-doc-updater`)
+- [ ] Session state checkpoint disimpan (`session-memory-manager`)
+- [ ] Dokumentasi terkini (`CHANGELOG.md`, `BLUEPRINT.md`, `README`) (`prd-architect`)
 
 ---
 
@@ -459,4 +457,4 @@ Aktif setiap kali pengguna meminta untuk:
 ### Referensi Dokumentasi
 - [Production Readiness Checklist](file:///c:/Users/roedy/.gemini/config/plugins/vibes-plug/skills/production-ready-hardener/references/production_checklist.md)
 - [Security Hardening Guide](file:///c:/Users/roedy/.gemini/config/plugins/vibes-plug/skills/production-ready-hardener/references/security_hardening_guide.md)
-- [Performance Optimization Guide](file:///c:/Users/roedy/.gemini/config/plugins/vibes-plug/skills/production-ready-hardener/references/performance_optimization.md)
+- [Performance Optimization Guide](file:///c:/Users/roedy/.gemini/config/plugins/vibes-plug/skills/production-ready-hardener/references/performance_optimization.md)

package/skills/pwa-offline-first-expert/SKILL.md

@@ -1,185 +1,227 @@
----
-name: pwa-offline-first-expert
-description: "Expert guide for Local-First & Offline-First architectures, CRDT conflict-free sync (RxDB, ElectricSQL, PowerSync), OPFS SQLite, Service Worker v3, and PWABuilder deployment / Panduan ahli arsitektur Offline-First & Local-First PWA."
-author: "Roedy Rustam"
----
-
-# PWA & Offline-First Expert (2026 Edition)
-
-Expert guide for building enterprise-grade **Local-First** and **Progressive Web Applications (PWA)**. Eliminates loading spinners by reading and writing to local databases (OPFS SQLite, RxDB, IndexedDB) first, replicating seamlessly in the background with zero conflict (CRDTs, ElectricSQL, PowerSync), and packaging to native stores via PWABuilder.
-
-*Panduan ahli untuk membangun aplikasi web Local-First dan PWA kelas enterprise. Menghilangkan loading spinner dengan membaca dan menulis langsung ke database lokal, sinkronisasi otomatis di latar belakang tanpa bentrok data, dan packaging ke app store.*
-
----
-
-## 1. The Local-First Principles (2026 Standard)
-
-1. **No Spinners for Local Data**: UI reads and writes to local storage (OPFS / IndexedDB) synchronously. Latency is always 0ms.
-2. **Multi-Device Conflict-Free Replication**: Changes replicate in the background using CRDTs or central event logs (ElectricSQL / PowerSync).
-3. **Network is an Enhancement**: App is 100% functional on an airplane or subway without internet.
-4. **User Owns Their Data**: Data persists on client hardware first; cloud server is a backup/sync relay.
-
----
-
-## 2. Production Recipe: Service Worker Caching (Workbox v7 / Native SW)
-
-```typescript
-// sw.ts - Production Service Worker with Stale-While-Revalidate
-/// <reference lib="webworker" />
-declare const self: ServiceWorkerGlobalScope;
-
-const CACHE_NAME = 'app-v2.11.0-cache';
-const STATIC_ASSETS = [
-  '/',
-  '/index.html',
-  '/manifest.json',
-  '/styles/global.css',
-  '/icons/icon-512x512.png',
-];
-
-// 1. Install & Pre-cache critical application shell
-self.addEventListener('install', (event) => {
-  event.waitUntil(
-    caches.open(CACHE_NAME).then((cache) => cache.addAll(STATIC_ASSETS))
-  );
-  self.skipWaiting();
-});
-
-// 2. Activate & Clean stale caches
-self.addEventListener('activate', (event) => {
-  event.waitUntil(
-    caches.keys().then((keys) =>
-      Promise.all(
-        keys.filter((k) => k !== CACHE_NAME).map((k) => caches.delete(k))
-      )
-    )
-  );
-  self.clients.claim();
-});
-
-// 3. Stale-While-Revalidate Strategy for Navigation & API GETs
-self.addEventListener('fetch', (event) => {
-  const { request } = event;
-
-  // Ignore POST/PUT/DELETE mutations (handled by offline sync queues)
-  if (request.method !== 'GET') return;
-
-  event.respondWith(
-    caches.open(CACHE_NAME).then(async (cache) => {
-      const cachedResponse = await cache.match(request);
-      
-      const fetchPromise = fetch(request)
-        .then((networkResponse) => {
-          if (networkResponse.status === 200) {
-            cache.put(request, networkResponse.clone());
-          }
-          return networkResponse;
-        })
-        .catch(() => cachedResponse || Response.error());
-
-      return cachedResponse || fetchPromise;
-    })
-  );
-});
-
-// 4. Background Sync for offline mutations
-self.addEventListener('sync', (event: any) => {
-  if (event.tag === 'sync-mutations') {
-    event.waitUntil(flushOfflineMutationQueue());
-  }
-});
-
-async function flushOfflineMutationQueue() {
-  // Read pending mutations from IndexedDB and POST to backend
-}
-```
-
----
-
-## 3. Production Recipe: Local-First Database Sync with RxDB (TypeScript)
-
-```typescript
-// local-db.ts - Reactive Offline-First Database with Background Replication
-import { createRxDatabase, addRxPlugin } from 'rxdb';
-import { getRxStorageDexie } from 'rxdb/plugins/storage-dexie';
-import { replicateGraphQL } from 'rxdb/plugins/replication-graphql';
-
-export interface TaskDocType {
-  id: string;
-  title: string;
-  isCompleted: boolean;
-  updatedAt: string;
-}
-
-const taskSchema = {
-  version: 0,
-  primaryKey: 'id',
-  type: 'object',
-  properties: {
-    id: { type: 'string', maxLength: 100 },
-    title: { type: 'string' },
-    isCompleted: { type: 'boolean' },
-    updatedAt: { type: 'string', format: 'date-time' },
-  },
-  required: ['id', 'title', 'isCompleted', 'updatedAt'],
-};
-
-export async function initLocalDB() {
-  const db = await createRxDatabase({
-    name: 'app_local_db',
-    storage: getRxStorageDexie(),
-  });
-
-  await db.addCollections({
-    tasks: { schema: taskSchema },
-  });
-
-  // Background Replication with Server (GraphQL / REST Sync)
-  replicateGraphQL({
-    collection: db.tasks,
-    url: 'https://api.myapp.com/graphql',
-    pull: {
-      queryBuilder: (doc) => ({
-        query: `query { syncTasks(since: "${doc ? doc.updatedAt : 0}") { id title isCompleted updatedAt } }`,
-        variables: {},
-      }),
-      modifier: (doc) => doc,
-    },
-    push: {
-      queryBuilder: (doc) => ({
-        query: `mutation { pushTask(task: ${JSON.stringify(doc)}) { id } }`,
-        variables: {},
-      }),
-      batchSize: 10,
-    },
-    live: true,
-    retryTime: 1000 * 5, // Auto-retry on network reconnection
-  });
-
-  return db;
-}
-```
-
----
-
-## 4. App Store Distribution: PWABuilder Standard
-
-To distribute your web application on **Google Play Store** (TWA - Trusted Web Activity) and **Microsoft Windows Store**:
-1. Ensure Web App Manifest has:
-   - `display: "standalone"`
-   - `id: "/?source=pwa"`
-   - `icons`: At least 192x192 and 512x512 maskable PNGs.
-   - `shortcuts` for rapid action launching.
-2. Generate signed Android APK/AAB or Windows MSIX packages using:
-   ```bash
-   npx @pwabuilder/cli https://myapp.com
-   ```
-
----
-
-## Orchestration & Integration
-
-- **`senior-frontend`**: For UI integration with offline state bars and optimistic mutation hooks.
-- **`state-management-expert`**: For connecting RxDB / local stores with Zustand or TanStack Store.
-- **`database-orm-expert`**: For designing compatible backend schemas with ElectricSQL / Postgres.
-- **`mobile-push-notification-expert`**: For Web Push Notification subscription handling.
+---
+name: pwa-offline-first-expert
+description: "Expert guide for Local-First & Offline-First architectures, CRDT conflict-free sync (RxDB, ElectricSQL, PowerSync), OPFS SQLite, Service Worker v3, and PWABuilder deployment / Panduan ahli arsitektur Offline-First & Local-First PWA."
+author: "Roedy Rustam"
+version: "3.0.0"
+---
+
+# PWA & Offline-First Expert (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+Expert guide for building enterprise-grade **Local-First** and **Progressive Web Applications (PWA)**. Eliminates loading spinners by reading and writing to local databases (OPFS SQLite, RxDB, IndexedDB) first, replicating seamlessly in the background with zero conflict (CRDTs, ElectricSQL, PowerSync), and packaging to native stores via PWABuilder.
+
+### Trigger Conditions
+- Applications requiring full offline functionality (field operations, mobile dashboards, transit apps).
+- User experience demands 0ms local read/write latency without loading spinners.
+- Multi-device sync architecture with automatic conflict resolution.
+- Packaging web apps for distribution on Google Play Store, iOS Safari PWA, or Microsoft Store.
+
+---
+
+## 1. The Local-First Principles (2026 Standard)
+
+1. **No Spinners for Local Data**: UI reads and writes to local storage (OPFS / IndexedDB) synchronously. Latency is always 0ms.
+2. **Multi-Device Conflict-Free Replication**: Changes replicate in the background using CRDTs or central event logs (ElectricSQL / PowerSync).
+3. **Network is an Enhancement**: App is 100% functional on an airplane or subway without internet.
+4. **User Owns Their Data**: Data persists on client hardware first; cloud server is a backup/sync relay.
+
+---
+
+## 2. Production Recipe: Service Worker Caching (Workbox v7 / Native SW)
+
+```typescript
+// sw.ts - Production Service Worker with Stale-While-Revalidate
+/// <reference lib="webworker" />
+declare const self: ServiceWorkerGlobalScope;
+
+const CACHE_NAME = 'app-v2.11.0-cache';
+const STATIC_ASSETS = [
+  '/',
+  '/index.html',
+  '/manifest.json',
+  '/styles/global.css',
+  '/icons/icon-512x512.png',
+];
+
+// 1. Install & Pre-cache critical application shell
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => cache.addAll(STATIC_ASSETS))
+  );
+  self.skipWaiting();
+});
+
+// 2. Activate & Clean stale caches
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((keys) =>
+      Promise.all(
+        keys.filter((k) => k !== CACHE_NAME).map((k) => caches.delete(k))
+      )
+    )
+  );
+  self.clients.claim();
+});
+
+// 3. Stale-While-Revalidate Strategy for Navigation & API GETs
+self.addEventListener('fetch', (event) => {
+  const { request } = event;
+
+  // Ignore POST/PUT/DELETE mutations (handled by offline sync queues)
+  if (request.method !== 'GET') return;
+
+  event.respondWith(
+    caches.open(CACHE_NAME).then(async (cache) => {
+      const cachedResponse = await cache.match(request);
+      
+      const fetchPromise = fetch(request)
+        .then((networkResponse) => {
+          if (networkResponse.status === 200) {
+            cache.put(request, networkResponse.clone());
+          }
+          return networkResponse;
+        })
+        .catch(() => cachedResponse || Response.error());
+
+      return cachedResponse || fetchPromise;
+    })
+  );
+});
+
+// 4. Background Sync for offline mutations
+self.addEventListener('sync', (event: any) => {
+  if (event.tag === 'sync-mutations') {
+    event.waitUntil(flushOfflineMutationQueue());
+  }
+});
+
+async function flushOfflineMutationQueue() {
+  // Read pending mutations from IndexedDB and POST to backend
+}
+```
+
+---
+
+## 3. Production Recipe: Local-First Database Sync with RxDB (TypeScript)
+
+```typescript
+// local-db.ts - Reactive Offline-First Database with Background Replication
+import { createRxDatabase, addRxPlugin } from 'rxdb';
+import { getRxStorageDexie } from 'rxdb/plugins/storage-dexie';
+import { replicateGraphQL } from 'rxdb/plugins/replication-graphql';
+
+export interface TaskDocType {
+  id: string;
+  title: string;
+  isCompleted: boolean;
+  updatedAt: string;
+}
+
+const taskSchema = {
+  version: 0,
+  primaryKey: 'id',
+  type: 'object',
+  properties: {
+    id: { type: 'string', maxLength: 100 },
+    title: { type: 'string' },
+    isCompleted: { type: 'boolean' },
+    updatedAt: { type: 'string', format: 'date-time' },
+  },
+  required: ['id', 'title', 'isCompleted', 'updatedAt'],
+};
+
+export async function initLocalDB() {
+  const db = await createRxDatabase({
+    name: 'app_local_db',
+    storage: getRxStorageDexie(),
+  });
+
+  await db.addCollections({
+    tasks: { schema: taskSchema },
+  });
+
+  // Background Replication with Server (GraphQL / REST Sync)
+  replicateGraphQL({
+    collection: db.tasks,
+    url: 'https://api.myapp.com/graphql',
+    pull: {
+      queryBuilder: (doc) => ({
+        query: `query { syncTasks(since: "${doc ? doc.updatedAt : 0}") { id title isCompleted updatedAt } }`,
+        variables: {},
+      }),
+      modifier: (doc) => doc,
+    },
+    push: {
+      queryBuilder: (doc) => ({
+        query: `mutation { pushTask(task: ${JSON.stringify(doc)}) { id } }`,
+        variables: {},
+      }),
+      batchSize: 10,
+    },
+    live: true,
+    retryTime: 1000 * 5, // Auto-retry on network reconnection
+  });
+
+  return db;
+}
+```
+
+---
+
+## 4. App Store Distribution: PWABuilder Standard
+
+To distribute your web application on **Google Play Store** (TWA - Trusted Web Activity) and **Microsoft Windows Store**:
+1. Ensure Web App Manifest has:
+   - `display: "standalone"`
+   - `id: "/?source=pwa"`
+   - `icons`: At least 192x192 and 512x512 maskable PNGs.
+   - `shortcuts` for rapid action launching.
+2. Generate signed Android APK/AAB or Windows MSIX packages using:
+   ```bash
+   npx @pwabuilder/cli https://myapp.com
+   ```
+
+---
+
+## Orchestration & Integration
+
+- **`senior-frontend`**: For UI integration with offline state bars and optimistic mutation hooks.
+- **`state-management-expert`**: For connecting RxDB / local stores with Zustand or TanStack Store.
+- **`database-orm-expert`**: For designing compatible backend schemas with ElectricSQL / Postgres.
+- **`mobile-push-notification-expert`**: For Web Push Notification subscription handling.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Panduan ahli untuk membangun aplikasi web **Local-First** dan **Progressive Web Applications (PWA)** kelas enterprise. Menghilangkan ketergantungan loading spinner dengan membaca dan menulis langsung ke database lokal (OPFS SQLite, RxDB, IndexedDB) terlebih dahulu, sinkronisasi otomatis di latar belakang tanpa bentrok data (CRDTs, ElectricSQL, PowerSync), dan packaging ke toko aplikasi native melalui PWABuilder.
+
+### Kondisi Pemicu
+- Aplikasi yang memerlukan fungsionalitas offline penuh (pekerjaan lapangan, dashboard mobile, aplikasi transit).
+- Tuntutan pengalaman pengguna dengan latensi baca/tulis lokal 0ms tanpa loading spinner.
+- Arsitektur sinkronisasi multi-perangkat dengan resolusi konflik data otomatis.
+- Kebutuhan rilis aplikasi web ke Google Play Store, iOS Safari PWA, atau Microsoft Store.
+
+### Ringkasan Prinsip Local-First & PWA
+1. **0ms Latensi Lokal**: Komponen membaca dan menulis ke IndexedDB / OPFS lokal secara instan.
+2. **Sinkronisasi Reaktif Latar Belakang**: Replikasi data berjalan di background worker; mutasi offline dicatat dalam antrean IndexedDB dan di-flush saat jaringan online.
+3. **Pola Service Worker**: Stale-While-Revalidate untuk asset statis dan rute shell utama menggunakan Service Worker v3.
+4. **Distribusi Native**: Menggunakan PWABuilder CLI untuk menghasilkan APK Android TWA dan paket MSIX Windows.
+
+---
+
+## Integrasi Orkestrasi
+
+- **`senior-frontend`**: Integrasi UI indikator status offline dan hook mutasi optimistik.
+- **`state-management-expert`**: Menghubungkan RxDB / local storage ke Zustand atau TanStack Store.
+- **`database-orm-expert`**: Perancangan skema backend PostgreSQL yang kompatibel dengan replikasi CRDT / ElectricSQL.
+- **`mobile-push-notification-expert`**: Penanganan registrasi dan subscription Web Push Notification.