vibes-plug 2.5.0 → 2.11.0

package/skills/project-context-mapper/SKILL.md

@@ -1,79 +1,85 @@
----
-name: project-context-mapper
-description: "Gives the agent a photographic memory of massive repositories. Forces the creation and maintenance of a highly compressed CONTEXT_MAP.md to prevent context exhaustion and hallucination."
+---
+name: project-context-mapper
+description: "Gives the agent a photographic memory of massive repositories. Forces the creation and maintenance of a highly compressed CONTEXT_MAP.md to prevent context exhaustion and hallucination."
 author: "Roedy Rustam"
----
-
-# Project Context Mapper (Memory Optimizer)
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Description
-LLMs struggle with repositories containing hundreds of files; they lose track of where things are, leading to hallucinations and excessive tool calls. This skill forces the agent to create, read, and maintain a `CONTEXT_MAP.md`—a highly compressed index of the repository's architecture, dependency graphs, and critical file locations. This acts as the agent's "photographic memory".
-
-### Trigger Conditions
-Activate this skill when:
-- The agent enters a massive, existing codebase for the first time.
-- The user complains that the AI is "editing the wrong file" or "forgetting how the app is structured."
-- Context token usage is dangerously high and needs optimization.
-
-### Core Concepts
-
-#### 1. The Context Map Format
-The agent should execute a script or traverse the directory to generate a compressed map in `CONTEXT_MAP.md` (or within `.agents/`).
-```markdown
-# CONTEXT MAP (Do not delete)
-
-## Architecture
-- Frontend: Next.js App Router (src/app)
-- Backend: Hono RPC (src/server)
-- DB: Drizzle (src/db/schema.ts)
-
-## Dependency Graph (Critical Paths)
-- `src/app/page.tsx` -> `src/components/ui/Button.tsx`
-- `src/server/routes/users.ts` -> `src/db/queries/users.ts`
-
-## State Locations
-- Global Auth: `src/store/auth.ts` (Zustand)
-```
-
-#### 2. Workflow
-1. **On Start:** The agent reads `CONTEXT_MAP.md` instead of blindly listing directories.
-2. **On Modification:** When the agent creates a new major component, route, or service, it MUST append that location to the context map.
-
-### Best Practices
-- **Keep it Ultra-Compressed:** Do not store full code in the map. Store ONLY file paths, responsibilities (1 sentence), and connections.
-- **BM25 Search First:** Before writing to the context map, consider using `grep_search` or semantic search for targeted lookups. The map is for *architectural* understanding, not exact variable finding.
-
----
-
-### Integration with Other Skills (MANDATORY)
-- `session-context-loader` — Integrates deeply to ensure the context map is loaded automatically on every new chat session.
-- `token-saver` — The map prevents the agent from reading 10 separate files just to find one function, saving massive amounts of tokens.
-- `monorepo-architect` — Essential for mapping out package boundaries in Turborepo/pnpm workspaces.
-
-### Referenced By Orchestrators (MANDATORY)
-- `brainstorming` — Add to "Discovery & Audit".
-- `zero-to-prod-orchestrator` — Phase 1 (Discovery & Architecture).
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Deskripsi
-Kelemahan utama agen AI adalah keterbatasan jendela konteks (*context window*). Skill ini memberi agen "ingatan fotografis" dengan mewajibkannya memelihara file `CONTEXT_MAP.md`—sebuah indeks super padat yang memetakan arsitektur proyek, lokasi file penting, dan graf dependensi.
-
-### Kondisi Pemicu
-- Saat agen baru saja dimasukkan ke dalam repositori raksasa yang sudah ada (bukan dari nol).
-- Saat agen mulai salah mengedit file atau terlihat kebingungan dengan struktur folder.
-
-### Panduan Singkat
-- **Indeks Tersentralisasi:** Buat dan selalu perbarui `CONTEXT_MAP.md`. File ini berisi daftar *path* direktori krusial dan tanggung jawab masing-masing (misal: "Logic pembayaran ada di `src/lib/stripe.ts`").
-- **Ultra-Ringkas:** Jangan menaruh baris kode di dalam peta konteks ini. Hanya gunakan format *bullet points* agar konsumsi token saat dibaca sangat rendah.
-- **Baca di Awal Sesi:** Di setiap awal percakapan, agen tidak perlu lagi meraba-raba melakukan `ls` berulang kali. Cukup gunakan `view_file` pada `CONTEXT_MAP.md`, dan agen langsung mengerti seluruh topologi proyek.
+---
+
+# Project Context Mapper (Memory Optimizer)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<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
+LLMs struggle with repositories containing hundreds of files; they lose track of where things are, leading to hallucinations and excessive tool calls. This skill forces the agent to create, read, and maintain a `CONTEXT_MAP.md`—a highly compressed index of the repository's architecture, dependency graphs, and critical file locations. This acts as the agent's "photographic memory".
+
+### Trigger Conditions
+Activate this skill when:
+- The agent enters a massive, existing codebase for the first time.
+- The user complains that the AI is "editing the wrong file" or "forgetting how the app is structured."
+- Context token usage is dangerously high and needs optimization.
+
+### Core Concepts
+
+#### 1. The Context Map Format
+The agent should execute a script or traverse the directory to generate a compressed map in `CONTEXT_MAP.md` (or within `.agents/`).
+```markdown
+# CONTEXT MAP (Do not delete)
+
+## Architecture
+- Frontend: Next.js App Router (src/app)
+- Backend: Hono RPC (src/server)
+- DB: Drizzle (src/db/schema.ts)
+
+## Dependency Graph (Critical Paths)
+- `src/app/page.tsx` -> `src/components/ui/Button.tsx`
+- `src/server/routes/users.ts` -> `src/db/queries/users.ts`
+
+## State Locations
+- Global Auth: `src/store/auth.ts` (Zustand)
+```
+
+#### 2. Workflow
+1. **On Start:** The agent reads `CONTEXT_MAP.md` instead of blindly listing directories.
+2. **On Modification:** When the agent creates a new major component, route, or service, it MUST append that location to the context map.
+
+### Best Practices
+- **Keep it Ultra-Compressed:** Do not store full code in the map. Store ONLY file paths, responsibilities (1 sentence), and connections.
+- **BM25 Search First:** Before writing to the context map, consider using `grep_search` or semantic search for targeted lookups. The map is for *architectural* understanding, not exact variable finding.
+
+---
+
+### Integration with Other Skills (MANDATORY)
+- `session-context-loader` — Integrates deeply to ensure the context map is loaded automatically on every new chat session.
+- `token-saver` — The map prevents the agent from reading 10 separate files just to find one function, saving massive amounts of tokens.
+- `monorepo-architect` — Essential for mapping out package boundaries in Turborepo/pnpm workspaces.
+
+### Referenced By Orchestrators (MANDATORY)
+- `brainstorming` — Add to "Discovery & Audit".
+- `zero-to-prod-orchestrator` — Phase 1 (Discovery & Architecture).
+
+---
+
+<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
+Kelemahan utama agen AI adalah keterbatasan jendela konteks (*context window*). Skill ini memberi agen "ingatan fotografis" dengan mewajibkannya memelihara file `CONTEXT_MAP.md`—sebuah indeks super padat yang memetakan arsitektur proyek, lokasi file penting, dan graf dependensi.
+
+### Kondisi Pemicu
+- Saat agen baru saja dimasukkan ke dalam repositori raksasa yang sudah ada (bukan dari nol).
+- Saat agen mulai salah mengedit file atau terlihat kebingungan dengan struktur folder.
+
+### Panduan Singkat
+- **Indeks Tersentralisasi:** Buat dan selalu perbarui `CONTEXT_MAP.md`. File ini berisi daftar *path* direktori krusial dan tanggung jawab masing-masing (misal: "Logic pembayaran ada di `src/lib/stripe.ts`").
+- **Ultra-Ringkas:** Jangan menaruh baris kode di dalam peta konteks ini. Hanya gunakan format *bullet points* agar konsumsi token saat dibaca sangat rendah.
+- **Baca di Awal Sesi:** Di setiap awal percakapan, agen tidak perlu lagi meraba-raba melakukan `ls` berulang kali. Cukup gunakan `view_file` pada `CONTEXT_MAP.md`, dan agen langsung mengerti seluruh topologi proyek.

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

@@ -0,0 +1,185 @@
+---
+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.