vibes-plug 2.5.0 → 2.11.0

package/skills/background-jobs-queue-expert/SKILL.md

@@ -0,0 +1,235 @@
+---
+name: background-jobs-queue-expert
+description: "Dedicated deep-dive for BullMQ v5, Trigger.dev v3, Inngest, delayed jobs, job deduplication, idempotency, dead letter queues, and job priority / Panduan mendalam untuk BullMQ v5, Trigger.dev v3, Inngest, delayed jobs, deduplikasi job, idempotency, dead letter queue, dan prioritas job."
+author: "Roedy Rustam"
+---
+
+# Background Jobs & Queue Expert (BullMQ v5 & Resilient Queues)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Purpose & Overview
+Production-grade engineering guide for background job queues and asynchronous task processing using **BullMQ v5**, **Trigger.dev v3**, and **Inngest**. Focuses on the core mechanics of fault-tolerant distributed queues: job deduplication, multi-tenant priority queues, exponential backoff jitter, Dead Letter Queue (DLQ) automated forwarding, and strict transactional idempotency.
+
+### Key Capabilities
+1. **Strict Idempotency**: Ensuring background workers execute with deterministic effects using database-backed idempotency keys.
+2. **Job Deduplication**: Leveraging deterministic BullMQ `jobId` hashing to prevent duplicate enqueueing of ongoing or delayed tasks.
+3. **Dead Letter Queues (DLQ)**: Automatic relocation of permanently failing jobs after retry exhaustion for manual inspection and alerting.
+4. **Tenant Prioritization**: Differentiating throughput between VIP/enterprise tiers and free-tier users using BullMQ job priorities.
+5. **Backoff Jitter & Throttling**: Exponential backoff combined with randomized full jitter to prevent upstream thundering herds.
+
+---
+
+### Production Implementation Recipes
+
+#### Recipe 1: Production BullMQ v5 Worker with Deduplication & DLQ Forwarding (TypeScript)
+```typescript
+import { Queue, Worker, Job } from 'bullmq';
+import Redis from 'ioredis';
+
+const redisConnection = new Redis(process.env.REDIS_URL || 'redis://localhost:6379', {
+  maxRetriesPerRequest: null, // Required by BullMQ
+});
+
+export interface NotificationPayload {
+  tenantId: string;
+  userId: string;
+  type: 'email' | 'webhook';
+  payload: Record<string, unknown>;
+  idempotencyKey: string;
+}
+
+// Main Queue
+export const notificationQueue = new Queue<NotificationPayload>('notifications', {
+  connection: redisConnection,
+  defaultJobOptions: {
+    attempts: 5,
+    backoff: {
+      type: 'exponential',
+      delay: 1500, // Starts at 1.5s, doubles up to ~24s with jitter
+    },
+    removeOnComplete: { age: 86400, count: 5000 },
+    removeOnFail: false, // Preserved for DLQ audit
+  },
+});
+
+// Dead Letter Queue (DLQ)
+export const notificationDLQ = new Queue('notifications-dlq', {
+  connection: redisConnection,
+});
+
+/**
+ * Enqueues a notification job with strict deduplication and priority
+ */
+export async function enqueueNotification(
+  data: NotificationPayload,
+  isVip = false
+) {
+  return await notificationQueue.add('send_notification', data, {
+    jobId: `notif_${data.idempotencyKey}`, // Deterministic deduplication key
+    priority: isVip ? 1 : 10, // Lower numbers denote higher priority in BullMQ
+  });
+}
+
+// Background Worker
+export const notificationWorker = new Worker<NotificationPayload>(
+  'notifications',
+  async (job: Job<NotificationPayload>) => {
+    console.log(`[Worker] Processing Job ${job.id} for Tenant: ${job.data.tenantId}`);
+    
+    // Simulate task processing with idempotency verification
+    if (job.data.type === 'email') {
+      await deliverEmail(job.data);
+    }
+  },
+  {
+    connection: redisConnection,
+    concurrency: 20, // Max concurrent jobs per worker process
+    limiter: {
+      max: 100, // Maximum 100 jobs processed
+      duration: 1000, // Per 1000ms (Rate Limiting)
+    },
+  }
+);
+
+// Forward to DLQ upon exhaustion of retry attempts
+notificationWorker.on('failed', async (job, error) => {
+  if (job && job.attemptsMade >= (job.opts.attempts || 5)) {
+    console.error(`[DLQ] Job ${job.id} exhausted retries. Forwarding to notifications-dlq:`, error.message);
+    await notificationDLQ.add('failed_notification', {
+      originalJobId: job.id,
+      failedReason: error.message,
+      data: job.data,
+      exhaustedAt: new Date().toISOString(),
+    });
+  }
+});
+```
+
+---
+
+### Implementation Checklist
+- [ ] Configure `maxRetriesPerRequest: null` on the Redis client as required by BullMQ v5.
+- [ ] Use deterministic `jobId` derived from business logic (`order_${orderId}`) to enforce deduplication.
+- [ ] Add event listener on `failed` to automatically forward permanently dead jobs to a Dead Letter Queue.
+- [ ] Implement rate limiting using worker `limiter` to protect third-party services against rate-limit bans.
+
+## Orchestration & Integration
+- Integrates with: `js-backend-expert`, `async-queue-temporal-expert`, `error-resilience-expert`, `data-telemetry-expert`.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Tujuan & Gambaran Umum
+Panduan rekayasa tingkat produksi untuk antrean pekerjaan latar belakang (*background job queues*) dan pemrosesan tugas asinkron menggunakan **BullMQ v5**, **Trigger.dev v3**, dan **Inngest**. Berfokus pada mekanika inti antrean terdistribusi yang tangguh: deduplikasi job, prioritas multi-tenant, *exponential backoff jitter*, pemindahan otomatis ke Dead Letter Queue (DLQ), dan idempotensi transaksi yang ketat.
+
+### Kemampuan Utama
+1. **Idempotensi Ketat**: Memastikan pekerja (*worker*) mengeksekusi tugas dengan dampak deterministik menggunakan kunci idempotensi yang tercatat di database.
+2. **Deduplikasi Job**: Memanfaatkan penetapan `jobId` deterministik di BullMQ untuk mencegah antrean ganda pada tugas yang sedang berjalan atau tertunda.
+3. **Dead Letter Queue (DLQ)**: Pemindahan otomatis tugas yang gagal total setelah jatah percobaan ulang habis untuk audit dan penanganan manual.
+4. **Prioritas Tenant**: Membedakan prioritas tugas antara pengguna VIP/Enterprise dengan pengguna paket gratis menggunakan nilai prioritas BullMQ.
+5. **Backoff Jitter & Throttling**: Mekanisme penundaan eksponensial dengan *jitter* acak untuk mencegah fenomena *thundering herd* pada server hilir.
+
+---
+
+### Resep Implementasi Produksi
+
+#### Resep 1: Worker BullMQ v5 Produksi dengan Deduplikasi & Forward DLQ (TypeScript)
+```typescript
+import { Queue, Worker, Job } from 'bullmq';
+import Redis from 'ioredis';
+
+const koneksiRedis = new Redis(process.env.REDIS_URL || 'redis://localhost:6379', {
+  maxRetriesPerRequest: null,
+});
+
+export interface MuatanNotifikasi {
+  tenantId: string;
+  userId: string;
+  type: 'email' | 'webhook';
+  payload: Record<string, unknown>;
+  idempotencyKey: string;
+}
+
+// Antrean Utama
+export const antreanNotifikasi = new Queue<MuatanNotifikasi>('notifikasi', {
+  connection: koneksiRedis,
+  defaultJobOptions: {
+    attempts: 5,
+    backoff: {
+      type: 'exponential',
+      delay: 1500,
+    },
+    removeOnComplete: { age: 86400, count: 5000 },
+    removeOnFail: false,
+  },
+});
+
+// Antrean Dead Letter (DLQ)
+export const antreanDLQ = new Queue('notifikasi-dlq', {
+  connection: koneksiRedis,
+});
+
+/**
+ * Memasukkan tugas ke antrean dengan deduplikasi dan prioritas
+ */
+export async function masukkanNotifikasi(
+  data: MuatanNotifikasi,
+  isVip = false
+) {
+  return await antreanNotifikasi.add('kirim_notifikasi', data, {
+    jobId: `notif_${data.idempotencyKey}`, // Kunci deduplikasi unik
+    priority: isVip ? 1 : 10, // Nilai lebih kecil menandakan prioritas lebih tinggi
+  });
+}
+
+// Worker Pemroses
+export const workerNotifikasi = new Worker<MuatanNotifikasi>(
+  'notifikasi',
+  async (job: Job<MuatanNotifikasi>) => {
+    console.log(`[Worker] Memproses Job ${job.id} untuk Tenant: ${job.data.tenantId}`);
+    if (job.data.type === 'email') {
+      await kirimEmail(job.data);
+    }
+  },
+  {
+    connection: koneksiRedis,
+    concurrency: 20,
+    limiter: {
+      max: 100,
+      duration: 1000,
+    },
+  }
+);
+
+// Teruskan ke DLQ jika jatah retry telah habis
+workerNotifikasi.on('failed', async (job, error) => {
+  if (job && job.attemptsMade >= (job.opts.attempts || 5)) {
+    console.error(`[DLQ] Job ${job.id} gagal total. Memindahkan ke DLQ:`, error.message);
+    await antreanDLQ.add('notifikasi_gagal', {
+      originalJobId: job.id,
+      failedReason: error.message,
+      data: job.data,
+      exhaustedAt: new Date().toISOString(),
+    });
+  }
+});
+```
+
+---
+
+### Checklist Implementasi
+- [ ] Atur konfigurasi `maxRetriesPerRequest: null` pada koneksi ioredis untuk BullMQ v5.
+- [ ] Gunakan `jobId` deterministik dari ID transaksi bisnis (`invoice_${invoiceId}`) untuk mencegah duplikasi.
+- [ ] Pasang *event listener* pada event `failed` untuk meneruskan job yang gagal total ke antrean DLQ.
+- [ ] Terapkan pembatasan *rate limiter* pada worker untuk menjaga kestabilan API eksternal.
+
+## Integrasi Orkestrasi
+- Terintegrasi dengan: `js-backend-expert`, `async-queue-temporal-expert`, `error-resilience-expert`, `data-telemetry-expert`.

package/skills/biome-linter-formatter-expert/SKILL.md

@@ -0,0 +1,89 @@
+---
+name: biome-linter-formatter-expert
+description: "Expert guide for Biome (Rust-based linter + formatter), ESLint/Prettier migration, and code quality tooling / Panduan ahli Biome (linter + formatter berbasis Rust), migrasi dari ESLint/Prettier, dan tooling kualitas kode."
+author: "Roedy Rustam"
+---
+
+# Biome Linter & Formatter Expert (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Orchestration & Integration
+- **`monorepo-architect`**: Biome configuration in monorepo workspaces.
+- **`ci-cd-devops-architect`**: Biome in CI/CD pipelines.
+- **`scalability-clean-code`**: Code quality standards enforcement.
+- **`typescript-expert`**: TypeScript-specific lint rules.
+
+### Description
+Expert guide for Biome v2, the Rust-based unified linter and formatter replacing ESLint + Prettier. Covers migration from ESLint/Prettier, custom rule configuration, CI integration, monorepo setup, and editor integration. Includes performance comparison and best practices for 2026 JavaScript/TypeScript projects.
+
+### Trigger Conditions
+- Setting up code linting and formatting for new projects.
+- Migrating from ESLint + Prettier to Biome.
+- Configuring Biome in monorepo or CI/CD pipelines.
+- Resolving linting or formatting configuration issues.
+
+---
+
+### Why Biome over ESLint + Prettier?
+
+| Aspect | Biome v2 | ESLint 9 + Prettier 3 |
+|--------|----------|----------------------|
+| Speed | 10-100x faster (Rust) | Baseline (Node.js) |
+| Config Files | 1 (`biome.json`) | 2-3 files |
+| Formatter + Linter | ✅ Unified | Separate tools |
+| Import Sorting | ✅ Built-in | Plugin required |
+| CSS/JSON Support | ✅ Built-in | Plugin required |
+
+```bash
+# Install and init
+npm install --save-dev @biomejs/biome
+npx biome init
+
+# Migrate from ESLint/Prettier
+npx biome migrate eslint --write
+npx biome migrate prettier --write
+```
+
+```json
+// biome.json
+{
+  "$schema": "https://biomejs.dev/schemas/2.0.0/schema.json",
+  "organizeImports": { "enabled": true },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "complexity": { "noExcessiveCognitiveComplexity": "warn" },
+      "suspicious": { "noExplicitAny": "error" }
+    }
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 100
+  }
+}
+```
+
+## Orchestration & Integration
+- `monorepo-architect`, `ci-cd-devops-architect`, `scalability-clean-code`
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Panduan ahli Biome v2, linter dan formatter berbasis Rust yang menggantikan ESLint + Prettier. Mencakup migrasi, konfigurasi rule, integrasi CI, dan setup monorepo.
+
+### Kondisi Pemicu
+- Menyiapkan linting dan formatting kode untuk proyek baru.
+- Migrasi dari ESLint + Prettier ke Biome.
+- Mengkonfigurasi Biome di monorepo atau pipeline CI/CD.

package/skills/blockchain-web3-expert/SKILL.md

@@ -0,0 +1,115 @@
+---
+name: blockchain-web3-expert
+description: "Expert guide for Web3 and blockchain dApp integration — viem, wagmi v2, ethers.js v6, RainbowKit, smart contract interactions, and EVM wallet state / Panduan ahli integrasi Web3 dan blockchain."
+author: "Roedy Rustam"
+---
+
+# Blockchain & Web3 Expert (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Orchestration & Integration
+- **`senior-frontend`**: React and Next.js frontend state for Web3 wallets.
+- **`authentication-identity-expert`**: Sign-In with Ethereum (SIWE / ERC-4361).
+- **`error-resilience-expert`**: Handling RPC node timeouts, network switches, and user transaction rejections.
+- **`post-quantum-crypto-migrator`**: Future-proofing cryptographic signatures and hash functions.
+
+### Description
+Production-ready guide for building decentralized applications (dApps) on EVM-compatible blockchains. Covers typed smart contract interactions with **viem** and **wagmi v2**, wallet connectivity with **RainbowKit / AppKit**, gas estimation, transaction lifecycle management, ERC-20 / ERC-721 / ERC-1155 standards, and decentralized storage (IPFS/Arweave).
+
+### Trigger Conditions
+- Integrating crypto wallet connections (MetaMask, Coinbase Wallet, WalletConnect).
+- Reading from and writing to Ethereum / Polygon / Arbitrum / Base smart contracts.
+- Implementing Sign-In With Ethereum (SIWE) authentication.
+- Minting, transferring, or querying ERC-20 tokens or NFTs.
+
+---
+
+### Core Architecture & Modern Patterns
+
+#### 1. Wallet Connection & Config (`wagmi.config.ts`)
+```typescript
+import { http, createConfig } from 'wagmi';
+import { mainnet, base, arbitrum } from 'wagmi/chains';
+import { injected, walletConnect } from 'wagmi/connectors';
+
+export const config = createConfig({
+  chains: [mainnet, base, arbitrum],
+  connectors: [
+    injected(),
+    walletConnect({ projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID! }),
+  ],
+  transports: {
+    [mainnet.id]: http(),
+    [base.id]: http(),
+    [arbitrum.id]: http(),
+  },
+});
+```
+
+#### 2. Contract Interaction Hook (Wagmi v2 + Viem)
+```tsx
+import { useAccount, useReadContract, useWriteContract, useWaitForTransactionReceipt } from 'wagmi';
+import { parseAbi } from 'viem';
+
+const ERC20_ABI = parseAbi([
+  'function balanceOf(address owner) view returns (uint256)',
+  'function transfer(address to, uint256 amount) returns (bool)',
+]);
+
+export function TokenTransferCard({ tokenAddress }: { tokenAddress: `0x${string}` }) {
+  const { address, isConnected } = useAccount();
+  const { data: balance, refetch } = useReadContract({
+    address: tokenAddress,
+    abi: ERC20_ABI,
+    functionName: 'balanceOf',
+    args: address ? [address] : undefined,
+  });
+
+  const { data: hash, writeContract, isPending } = useWriteContract();
+  const { isLoading: isConfirming, isSuccess } = useWaitForTransactionReceipt({ hash });
+
+  const handleSend = (recipient: `0x${string}`, amount: bigint) => {
+    writeContract({
+      address: tokenAddress,
+      abi: ERC20_ABI,
+      functionName: 'transfer',
+      args: [recipient, amount],
+    });
+  };
+
+  if (!isConnected) return <p>Please connect your wallet.</p>;
+
+  return (
+    <div>
+      <p>Balance: {balance?.toString()}</p>
+      {isPending && <p>Waiting for signature...</p>}
+      {isConfirming && <p>Confirming transaction on-chain...</p>}
+      {isSuccess && <p>Transfer completed successfully!</p>}
+    </div>
+  );
+}
+```
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+- **`senior-frontend`**: Integrasi komponen React dan Next.js untuk antarmuka dApp.
+- **`authentication-identity-expert`**: Autentikasi Sign-In with Ethereum (SIWE).
+- **`error-resilience-expert`**: Penanganan kegagalan RPC dan penolakan transaksi oleh pengguna.
+
+### Deskripsi
+Panduan produksi untuk membangun aplikasi terdesentralisasi (dApp) di jaringan EVM. Mencakup koneksi dompet Web3 via viem, wagmi v2, RainbowKit, interaksi smart contract type-safe, estimasi gas, dan standar token ERC-20/721.
+
+### Kondisi Pemicu
+- Mengintegrasikan koneksi dompet Web3 ke aplikasi web.
+- Berinteraksi dengan smart contract di jaringan Ethereum, Base, Arbitrum, atau Polygon.
+- Menerapkan login dengan dompet kripto (SIWE).

package/skills/bootstrap-to-modern/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: bootstrap-to-modern
 description: "Expert skill to refactor and migrate legacy Bootstrap CSS applications to modern stacks using Tailwind CSS v4 and Alpine.js / Skill ahli untuk melakukan refaktor dan migrasi aplikasi Bootstrap CSS lama ke stack modern menggunakan Tailwind CSS v4 dan Alpine.js."
-author: vibes-plug-swarm
+author: "Roedy Rustam"
 ---
 
 # Bootstrap to Modern (Tailwind + Alpine.js) / Refaktor Bootstrap ke Modern
@@ -37,7 +37,7 @@ This skill transforms legacy web applications styled with Bootstrap (jQuery-depe
    - **Tabs**: Manage active tab state with `x-data="{ tab: 'home' }"`.
 5. **UI/UX Modernization & Skill Integration**:
    - Do NOT just do a 1:1 translation of Bootstrap classes. The goal is to elevate the design.
-   - You MUST orchestrate and apply guidelines from other UI/UX skills (`ui_ux_expert`, `ui-ux-pro-max`, and `hig`).
+   - You MUST orchestrate and apply guidelines from other UI/UX skills (`ui-ux-expert`, `ui-ux-pro-max`, and `hig`).
    - Implement Human Interface Guidelines (HIG) principles: Hierarchy, Harmony, and Consistency.
    - Use vibrant colors, smooth micro-animations, glassmorphism (if appropriate), and modern typography to "WOW" the user.
 6. **Quality Assurance**:
@@ -52,6 +52,9 @@ Active whenever the user asks to migrate, refactor, or update a Bootstrap projec
 <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 mengubah aplikasi web lama yang di-style dengan Bootstrap (baik yang bergantung pada jQuery maupun murni CSS) menjadi arsitektur modern berbasis utility menggunakan **Tailwind CSS v4** untuk styling dan **Alpine.js** untuk behavior reaktif yang ringan.
 
@@ -76,7 +79,7 @@ Skill ini mengubah aplikasi web lama yang di-style dengan Bootstrap (baik yang b
    - **Tab**: Kelola state tab aktif dengan `x-data="{ tab: 'home' }"`.
 5. **Modernisasi UI/UX & Integrasi Skill**:
    - JANGAN hanya menerjemahkan kelas Bootstrap 1:1. Tujuannya adalah meningkatkan kualitas desain.
-   - Anda WAJIB mengorkestrasi dan menerapkan pedoman dari skill UI/UX lainnya (`ui_ux_expert`, `ui-ux-pro-max`, dan `hig`).
+   - Anda WAJIB mengorkestrasi dan menerapkan pedoman dari skill UI/UX lainnya (`ui-ux-expert`, `ui-ux-pro-max`, dan `hig`).
    - Terapkan prinsip Human Interface Guidelines (HIG): Hierarchy, Harmony, dan Consistency.
    - Gunakan warna cerah, mikro-animasi halus, glassmorphism (jika sesuai), dan tipografi modern untuk memberikan kesan "WOW" pada pengguna.
 6. **Quality Assurance**:
@@ -86,6 +89,6 @@ Skill ini mengubah aplikasi web lama yang di-style dengan Bootstrap (baik yang b
 ### Kondisi Pemicu
 Aktif setiap kali pengguna meminta untuk memigrasi, merefaktor, atau memperbarui proyek Bootstrap ke Tailwind CSS, atau memodernisasi CSS/JS lama.
 
-
-## Orchestration & Integration
-- Integrates with: `ui_ux_expert`, `ui-ux-pro-max`, `hig`.
+
+## Orchestration & Integration
+- Integrates with: `ui-ux-expert`, `ui-ux-pro-max`, `hig`.