vibes-plug 2.5.0 → 2.11.0

package/skills/multiple-entry-points/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: multiple-entry-points
 description: "Expert guide for designing and implementing Multiple Entry Points architecture in web applications / Panduan ahli untuk merancang dan mengimplementasikan arsitektur Multiple Entry Points pada aplikasi web."
-author: "Antigravity"
+author: "Roedy Rustam"
 ---
 
 # Multiple Entry Points Architecture
@@ -13,6 +13,9 @@ author: "Antigravity"
 <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 outlines the architectural pattern of using Multiple Entry Points in a web application. Instead of forcing all traffic through a single Front Controller (like a monolithic `index.php`), the application separates traffic logically into distinct entry files such as `index.php` (public), `admin.php`, and `api.php`. This provides stronger isolation, optimized loading, and stricter security boundaries.
 
@@ -22,6 +25,30 @@ This skill outlines the architectural pattern of using Multiple Entry Points in
 3. **Security Boundaries**: By physically separating entry points, you can apply distinct server-level security rules (via `.htaccess`, Nginx configurations, or WAF). For example, you can restrict access to `admin.php` to specific internal IP addresses or enforce mutual TLS.
 4. **Frontend Asset Bundling (Vite / Webpack)**: In a modern frontend context (especially for MPAs), define multiple entry points in the bundler configuration. This generates separate, optimized JavaScript and CSS bundles for the public site versus the complex admin dashboard, drastically reducing overall payload sizes for general users.
 
+### Implementation Checklist
+- [ ] Create separate HTML entry points in the root/public directory (e.g., `index.html`, `admin.html`).
+- [ ] Configure the frontend bundler (Vite/Webpack) to output multiple bundles.
+- [ ] Set up server-side routing (Nginx or Node.js) to serve the correct entry HTML based on the URL path.
+- [ ] Ensure shared components and utilities are properly tree-shaken and split into common chunks.
+
+### Example: Vite Config for Multiple Entries
+```javascript
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, 'index.html'),
+        admin: resolve(__dirname, 'admin.html'),
+        app: resolve(__dirname, 'app.html')
+      }
+    }
+  }
+});
+```
+
 ### Orchestration with Other Skills
 - **With `mpa-orchestrator`**: In a Multi-Page Application, multiple entry points allow you to split heavy dashboard assets from fast-loading public marketing pages, enhancing both SEO and performance.
 - **With `mvc-expert`**: Each entry point acts as a distinct Front Controller, initiating its own lightweight Router instance configured specifically for that domain's controllers (e.g., an AdminRouter vs an ApiRouter).
@@ -36,6 +63,9 @@ This skill outlines the architectural pattern of using Multiple Entry Points in
 <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 menguraikan pola arsitektur menggunakan *Multiple Entry Points* dalam aplikasi web. Alih-alih memaksa semua lalu lintas (traffic) melalui satu Front Controller tunggal (seperti `index.php` monolitik), aplikasi memisahkan lalu lintas secara logis ke dalam file entri yang berbeda seperti `index.php` (publik), `admin.php`, dan `api.php`. Pola ini memberikan isolasi yang lebih kuat, pemuatan (loading) yang dioptimalkan, dan batas keamanan yang lebih ketat.
 
@@ -45,6 +75,12 @@ Skill ini menguraikan pola arsitektur menggunakan *Multiple Entry Points* dalam
 3. **Batas Keamanan (Security Boundaries)**: Dengan memisahkan titik masuk secara fisik, Anda dapat menerapkan aturan keamanan tingkat server yang berbeda (melalui `.htaccess`, konfigurasi Nginx, atau WAF). Misalnya, membatasi akses ke `admin.php` hanya untuk alamat IP internal tertentu.
 4. **Bundling Aset Frontend (Vite / Webpack)**: Dalam konteks frontend modern (khususnya untuk MPA), tentukan beberapa *entry points* pada konfigurasi *bundler*. Ini akan menghasilkan bundel JavaScript dan CSS yang terpisah dan optimal antara situs publik dan dashboard admin, sehingga secara drastis mengurangi ukuran *payload* bagi pengguna umum.
 
+### Checklist Implementasi
+- [ ] Buat titik entri HTML terpisah di direktori utama/publik (misal: `index.html`, `admin.html`).
+- [ ] Konfigurasi bundler frontend (Vite/Webpack) untuk menghasilkan multiple bundle.
+- [ ] Siapkan routing di sisi server (Nginx atau Node.js) untuk menyajikan HTML entri yang benar berdasarkan path URL.
+- [ ] Pastikan komponen dan utilitas yang dipakai bersama dioptimalkan (tree-shaking) dan dipisah ke dalam *common chunks*.
+
 ### Orkestrasi dengan Skill Lain
 - **Dengan `mpa-orchestrator`**: Dalam aplikasi MPA, penggunaan beberapa *entry point* memungkinkan Anda memisahkan aset dashboard yang berat dari halaman *marketing* publik yang butuh kecepatan muat tinggi, sehingga meningkatkan SEO dan performa sekaligus.
 - **Dengan `mvc-expert`**: Setiap *entry point* bertindak sebagai Front Controller yang terpisah, menginisiasi instans Router yang ringan dan dikonfigurasi khusus untuk controller di domain tersebut (misalnya AdminRouter vs ApiRouter).

package/skills/mvc-expert/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: mvc-expert
 description: "Expert guidelines to refactor legacy PHP codebases into clean, modern, and scalable MVC-structured projects / Pedoman ahli untuk merefaktor codebase PHP lama menjadi proyek terstruktur MVC yang bersih, modern, dan skalabel."
-author: "Antigravity"
+author: "Roedy Rustam"
 ---
 
 # PHP MVC Expert & Modernization
@@ -13,6 +13,9 @@ author: "Antigravity"
 <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 provides the agent with structured protocols, coding patterns, and architectural guidelines to audit, refactor, and modernize legacy/obsolete PHP codebases (plain spaghetti PHP) into a clean, modern, secure, and scalable Model-View-Controller (MVC) structure adhering to PSR standards and modern PHP (v8.2+) capabilities.
 
@@ -124,6 +127,9 @@ Active whenever the user requests to:
 <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 memberikan protokol terstruktur, pola penulisan kode, dan panduan arsitektur bagi agen untuk melakukan audit, refaktorisasi, dan modernisasi terhadap codebase PHP lama yang usang (Plain Spaghetti PHP) menjadi struktur Model-View-Controller (MVC) yang bersih, modern, aman, dan skalabel yang mematuhi standar PSR serta kemampuan PHP modern (v8.2+).
 

package/skills/n8n-automation-expert/SKILL.md

@@ -0,0 +1,89 @@
+---
+name: n8n-automation-expert
+description: "Expert guide for workflow automation (n8n, Zapier, Make), custom nodes, webhook triggers, and AI-powered automation chains / Panduan ahli otomasi workflow (n8n, Zapier, Make), custom nodes, webhook triggers, dan rantai otomasi berbasis AI."
+author: "Roedy Rustam"
+---
+
+# Workflow Automation Expert (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Orchestration & Integration
+- **`cron-scheduler-expert`**: Scheduled triggers for automation workflows.
+- **`ai-llm-integration-expert`**: AI-powered automation steps and LLM chains.
+- **`email-notification-expert`**: Email triggers and notification actions.
+- **`webhook-receiver`**: Webhook endpoints as automation triggers.
+
+### Description
+Expert guide for building automation workflows with n8n (self-hosted, open-source), Zapier, and Make (Integromat). Covers workflow design, custom n8n nodes, webhook triggers, AI chains within workflows, error handling, credential management, and integration patterns with databases, APIs, and messaging platforms.
+
+### Trigger Conditions
+- Building automated workflows connecting multiple services.
+- Setting up n8n for self-hosted automation.
+- Creating AI-powered automation pipelines.
+- Integrating no-code/low-code automation with custom applications.
+
+---
+
+### Platform Selection
+
+| Platform | Hosting | Custom Code | AI Support | Pricing | Best For |
+|----------|---------|-------------|------------|---------|----------|
+| n8n | Self-hosted/Cloud | ✅ Full | ✅ AI nodes | Free (self) | Developers, privacy |
+| Zapier | Cloud only | Limited | ✅ AI actions | $29+/mo | Non-technical teams |
+| Make | Cloud only | ✅ Modules | ✅ AI modules | $10+/mo | Visual workflows |
+
+**Recommendation:** Use **n8n** for developer teams needing full control and self-hosting. Use **Zapier** for simple integrations by non-technical users.
+
+### n8n Core Patterns
+
+```typescript
+// Custom n8n node — AI Content Processor
+import { IExecuteFunctions, INodeExecutionData, INodeType, INodeTypeDescription } from 'n8n-workflow';
+
+export class AiContentProcessor implements INodeType {
+  description: INodeTypeDescription = {
+    displayName: 'AI Content Processor',
+    name: 'aiContentProcessor',
+    group: ['transform'],
+    version: 1,
+    inputs: ['main'],
+    outputs: ['main'],
+    properties: [
+      { displayName: 'Prompt Template', name: 'prompt', type: 'string', default: '' },
+      { displayName: 'Model', name: 'model', type: 'options', options: [
+        { name: 'GPT-4o', value: 'gpt-4o' },
+        { name: 'Claude 4 Sonnet', value: 'claude-4-sonnet' },
+      ], default: 'gpt-4o' },
+    ],
+  };
+
+  async execute(this: IExecuteFunctions): Promise<INodeExecutionData[][]> {
+    const items = this.getInputData();
+    const prompt = this.getNodeParameter('prompt', 0) as string;
+    // Process each item with AI...
+    return [items];
+  }
+}
+```
+
+## Orchestration & Integration
+- `cron-scheduler-expert`, `ai-llm-integration-expert`, `webhook-receiver`
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Panduan ahli untuk membangun alur kerja otomatis dengan n8n, Zapier, dan Make. Mencakup desain workflow, custom nodes n8n, webhook triggers, rantai AI, dan integrasi dengan database dan API.
+
+### Kondisi Pemicu
+- Membangun alur kerja otomatis yang menghubungkan beberapa layanan.
+- Menyiapkan n8n untuk otomasi self-hosted.
+- Membuat pipeline otomasi berbasis AI.

package/skills/nextjs-app-router-expert/SKILL.md

@@ -0,0 +1,148 @@
+---
+name: nextjs-app-router-expert
+description: "Expert guide for Next.js 15 App Router: RSC, Server Actions, Middleware, Parallel/Intercepting Routes, Streaming, and Caching strategies / Panduan ahli untuk Next.js 15 App Router."
+author: "Roedy Rustam"
+---
+
+# Next.js 15 App Router Expert
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+Execute advanced Next.js 15 App Router architectural patterns: React Server Components (RSC), React 19 Server Actions, Middleware routing, Parallel/Intercepting Routes, Streaming/Suspense, Partial Prerendering (PPR), and explicit cache invalidation.
+
+### Trigger Conditions
+- Architecting new Next.js 15 `app/` directory applications.
+- Migrating `pages/` directory to App Router.
+- Implementing complex UI patterns (modals via Intercepting Routes).
+- Debugging caching (`force-cache`, `revalidatePath`, tags).
+- Building interfaces requiring Partial Prerendering (PPR) or Streaming.
+
+### Core Architectural Patterns
+
+#### 1. React Server Components (RSC) vs Client Components
+- **Default to Server**: All `app/` components are Server Components. No hooks (`useState`) or browser APIs.
+- **Client Boundaries**: Add `"use client"` only for interactivity/browser APIs. Push client boundaries down the component tree.
+- **Interleaving**: Pass Server Components as `children` to Client Components; do not import Server Components into Client Components directly.
+
+#### 2. React 19 Server Actions
+Use Server Actions (`useActionState`) for all mutations. Avoid separate API routes.
+```typescript
+'use server'
+
+import { revalidateTag } from 'next/cache';
+import { z } from 'zod';
+import { db } from '@/lib/db';
+
+const schema = z.object({ email: z.string().email() });
+
+export async function subscribeUser(prevState: any, formData: FormData) {
+  const parsed = schema.safeParse({ email: formData.get('email') });
+  
+  if (!parsed.success) return { error: 'Invalid email' };
+
+  await db.subscribers.insert({ email: parsed.data.email });
+  revalidateTag('subscribers');
+  return { success: true };
+}
+```
+
+#### 3. Parallel & Intercepting Routes (Modals)
+Render modals preserving background page context and URL shareability.
+- **Intercepting (`(.)[segment]`)**: Matches route on client-side navigation.
+- **Parallel (`@modal`)**: Renders simultaneously with `layout.tsx` children.
+
+```
+app/
+ ├── @modal/
+ │   ├── (.)photos/[id]/page.tsx
+ │   └── default.tsx
+ ├── photos/
+ │   └── [id]/page.tsx
+ ├── layout.tsx
+ └── page.tsx
+```
+
+#### 4. Caching & Data Fetching (Next.js 15)
+Fetch requests are **not cached by default**. Opt-in explicitly:
+```typescript
+// Indefinite cache
+const res = await fetch('https://api.example.com/data', { cache: 'force-cache' });
+
+// Time-Based Revalidation (ISR)
+const res = await fetch('https://api.example.com/data', { next: { revalidate: 3600 } });
+
+// On-Demand Revalidation
+const res = await fetch('https://api.example.com/data', { next: { tags: ['collection'] } });
+// In server action: revalidateTag('collection')
+```
+
+#### 5. Streaming & Partial Prerendering (PPR)
+Wrap slow fetches in `<Suspense>` to stream UI instantly:
+```tsx
+import { Suspense } from 'react';
+import { Skeleton } from '@/components/ui/skeleton';
+
+export default function DashboardPage() {
+  return (
+    <main>
+      <h1>Dashboard</h1>
+      <Suspense fallback={<Skeleton className="h-64 w-full" />}>
+        <SlowRevenueChart />
+      </Suspense>
+    </main>
+  );
+}
+```
+
+## Orchestration & Integration
+- **`senior-frontend`**: Enhances UI/UX with Next.js App Router RSC and Next 15 caching.
+- **`js-backend-expert`**: Bridges frontend Server Actions with backend Node.js/Bun architectures.
+- **`tanstack-query-expert`**: Manages client-side state hydration from RSC.
+- **`performance-web-vitals`**: Optimizes Core Web Vitals using Streaming and PPR.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Terapkan pola arsitektur lanjutan Next.js 15 App Router: React Server Components (RSC), React 19 Server Actions, Middleware, Parallel/Intercepting Routes, Streaming/Suspense, Partial Prerendering (PPR), dan invalidasi cache eksplisit.
+
+### Kondisi Pemicu
+- Merancang aplikasi Next.js 15 `app/` direktori baru.
+- Migrasi direktori `pages/` ke App Router.
+- Implementasi pola UI kompleks (modal via Intercepting Routes).
+- Debugging cache (`force-cache`, `revalidatePath`, tags).
+- Membangun antarmuka dengan Partial Prerendering (PPR) atau Streaming.
+
+### Pola Arsitektur Inti
+
+#### 1. RSC vs Client Components
+- **Default Server**: Semua komponen `app/` adalah Server Components. Tanpa hooks/API browser.
+- **Batas Klien**: Tambahkan `"use client"` hanya untuk interaktivitas. Dorong batas klien ke bawah struktur komponen.
+- **Interleaving**: Berikan Server Components sebagai `children` ke Client Components; jangan impor langsung.
+
+#### 2. React 19 Server Actions
+Gunakan Server Actions (`useActionState`) untuk mutasi. Hindari pembuatan API routes terpisah.
+Validasi input di server dengan Zod dan gunakan `revalidateTag` untuk perbarui UI.
+
+#### 3. Parallel & Intercepting Routes
+Gunakan untuk modal. Mencegat rute navigasi client-side (URL berubah, modal di atas halaman saat ini). Refresh langsung memuat halaman penuh.
+
+#### 4. Caching di Next.js 15
+Fungsi `fetch` **tidak di-cache default**. Aktifkan eksplisit via `{ cache: 'force-cache' }` atau `{ next: { revalidate: 3600 } }`. Gunakan cache tags untuk invalidasi spesifik.
+
+#### 5. Streaming & Partial Prerendering (PPR)
+Bungkus pengambilan data lambat dengan `<Suspense>` untuk menampilkan UI awal seketika sambil menunggu data (streaming).
+
+## Integrasi Orkestrasi
+- **`senior-frontend`**: Menguatkan UI/UX dengan pemahaman arsitektur RSC dan cache Next 15.
+- **`js-backend-expert`**: Menghubungkan Server Actions dengan arsitektur backend Node.js/Bun.
+- **`tanstack-query-expert`**: Mengelola hidrasi state client-side dari RSC.
+- **`performance-web-vitals`**: Optimalisasi Core Web Vitals menggunakan Streaming dan PPR.

package/skills/openapi-swagger-codegen-expert/SKILL.md

@@ -0,0 +1,67 @@
+---
+name: openapi-swagger-codegen-expert
+description: "OpenAPI 3.1 spec authoring, Swagger UI, automatic client/server code generation (openapi-typescript, Orval, Kiota), contract testing / Penulisan spesifikasi OpenAPI 3.1, Swagger UI, pembuatan kode klien/server otomatis, dan pengujian kontrak."
+author: "Roedy Rustam"
+---
+
+# OpenAPI & Swagger Codegen Expert
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+Dedicated expert guide for API contract-first development using OpenAPI 3.1, Swagger UI, and automated code generation. Covers generating strictly typed API clients (using `openapi-typescript`, `Orval`, or Microsoft `Kiota`), scaffolding server stubs, and implementing contract testing to ensure backend APIs always match their documentation.
+
+### Trigger Conditions
+- Setting up API documentation (Swagger UI, Redoc, Scalar).
+- Generating API client code for frontend/mobile apps.
+- Authoring OpenAPI 3.x specifications (`openapi.yaml` or JSON).
+- Implementing contract testing (e.g., using Dredd or Prism).
+- Migrating from manual fetch wrappers to auto-generated typed API clients.
+
+### Best Practices & Workflow
+
+1. **Contract-First Approach**: Always write or define the OpenAPI specification before writing any backend code. This serves as the single source of truth for both frontend and backend teams.
+2. **Strict Type Generation**:
+   - Use `openapi-typescript` for generating raw TS definitions.
+   - Use `Orval` for generating React Query (TanStack Query) hooks directly from the OpenAPI spec.
+   - Use Microsoft `Kiota` for multi-language SDK generation.
+3. **Automated Validation**: Integrate API schema validation in the CI/CD pipeline using tools like `Spectral` to enforce API design standards.
+4. **Mocking**: Use tools like `Prism` to spin up mock servers from the OpenAPI spec, allowing frontend teams to start development immediately.
+
+---
+
+<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 khusus untuk pengembangan API dengan pendekatan *contract-first* menggunakan OpenAPI 3.1, Swagger UI, dan otomatisasi pembuatan kode (codegen). Mencakup pembuatan klien API yang *strictly typed* (menggunakan `openapi-typescript`, `Orval`, atau Microsoft `Kiota`), *scaffolding* untuk server, dan implementasi *contract testing* untuk memastikan backend selalu sesuai dengan dokumentasinya.
+
+### Kondisi Pemicu
+- Mengatur dokumentasi API (Swagger UI, Redoc, Scalar).
+- Men-generate kode klien API untuk aplikasi frontend/mobile.
+- Menulis spesifikasi OpenAPI 3.x (`openapi.yaml` atau JSON).
+- Mengimplementasikan *contract testing* (misalnya menggunakan Dredd atau Prism).
+- Migrasi dari wrapper `fetch` manual ke klien API yang otomatis ter-generate dan *typed*.
+
+### Panduan Implementasi
+
+1. **Pendekatan Contract-First**: Selalu tulis/definisikan spesifikasi OpenAPI sebelum menulis kode backend. Ini menjadi sumber kebenaran tunggal (*single source of truth*) untuk tim frontend dan backend.
+2. **Pembuatan Tipe yang Ketat (Strict Type Generation)**:
+   - Gunakan `openapi-typescript` untuk menghasilkan definisi TypeScript murni.
+   - Gunakan `Orval` untuk men-generate React Query (TanStack Query) hooks secara otomatis dari spek OpenAPI.
+   - Gunakan Microsoft `Kiota` untuk pembuatan SDK multi-bahasa.
+3. **Validasi Otomatis**: Integrasikan validasi skema API di pipeline CI/CD menggunakan tool seperti `Spectral` untuk memastikan standar desain API terpenuhi.
+4. **Mocking**: Gunakan tool seperti `Prism` untuk menjalankan mock server dari spesifikasi OpenAPI, memungkinkan tim frontend memulai pengembangan tanpa harus menunggu backend selesai.
+
+## Orchestration & Integration
+- Connects to `api-design-expert` for the core design rules.
+- Connects to `ci-cd-devops-architect` to implement CI/CD validation.
+- Connects to `senior-frontend` / `tanstack-query-expert` to consume the generated clients.

package/skills/payment-gateway-expert/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: payment-gateway-expert
 description: "Expert guide for integrating payment gateways (Stripe, PayPal, Xendit, Midtrans, DOKU) and secure webhooks into SaaS platforms / Panduan ahli integrasi payment gateway dan webhook aman."
-author: "Antigravity"
+author: "Roedy Rustam"
 ---
 
 # Payment Gateway Expert / Ahli Payment Gateway
@@ -23,6 +23,48 @@ Expert guide for integrating major payment gateways (Stripe, PayPal, Xendit, Mid
 - **Subscription Management**: Map the provider's subscription statuses (e.g., `active`, `past_due`, `canceled`) accurately to the SaaS platform's internal state machine.
 - **Testing**: Use sandbox/test environments provided by the gateways and simulate webhooks using CLI tools (like Stripe CLI) during development.
 
+### Implementation Checklist
+- [ ] Create a dedicated Webhook endpoint (e.g., `/api/webhooks/stripe`).
+- [ ] Use raw request body for signature verification (do not parse JSON before verification).
+- [ ] Ensure idempotency by tracking processed event IDs in the database.
+- [ ] Update local user/subscription state transactionally upon success.
+- [ ] Handle asynchronous failures with a dead-letter queue or retry mechanism.
+
+### Example: Stripe Webhook Signature Verification (Next.js App Router)
+```typescript
+import Stripe from 'stripe';
+import { headers } from 'next/headers';
+
+const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
+
+export async function POST(req: Request) {
+  const body = await req.text(); // Raw body required for signature
+  const signature = headers().get('Stripe-Signature') as string;
+
+  let event: Stripe.Event;
+
+  try {
+    event = stripe.webhooks.constructEvent(
+      body,
+      signature,
+      process.env.STRIPE_WEBHOOK_SECRET!
+    );
+  } catch (err: any) {
+    return new Response(`Webhook Error: ${err.message}`, { status: 400 });
+  }
+
+  // Handle the event
+  if (event.type === 'checkout.session.completed') {
+    // Process successful payment, check idempotency, update DB
+  }
+
+  return new Response(JSON.stringify({ received: true }), { status: 200 });
+}
+```
+
+## Orchestration & Integration
+- Integrates with: `saas-billing`, `doku-payment-gateway`, `saas-mvp-launcher`.
+
 ### Trigger Conditions
 Active whenever the user is working on billing integration, payment checkout, webhook handling, or integrating platforms like PayPal, Stripe, Xendit, Midtrans, or DOKU.
 
@@ -41,5 +83,47 @@ Panduan ahli untuk mengintegrasikan payment gateway utama (Stripe, PayPal, Xendi
 - **Manajemen Langganan**: Petakan status langganan dari provider (misal: `active`, `past_due`, `canceled`) secara akurat ke state machine internal platform SaaS.
 - **Pengujian**: Gunakan lingkungan sandbox/test yang disediakan oleh gateway dan simulasikan webhook menggunakan tool CLI (seperti Stripe CLI) selama pengembangan.
 
+### Checklist Implementasi
+- [ ] Buat endpoint Webhook khusus (misal: `/api/webhooks/stripe`).
+- [ ] Gunakan raw request body untuk verifikasi signature (jangan parse JSON sebelum verifikasi).
+- [ ] Pastikan idempotensi dengan melacak ID event yang sudah diproses di database.
+- [ ] Perbarui state langganan/pengguna lokal secara transaksional saat sukses.
+- [ ] Tangani kegagalan asinkron dengan dead-letter queue atau mekanisme retry.
+
+### Contoh: Verifikasi Signature Webhook Stripe (Next.js App Router)
+```typescript
+import Stripe from 'stripe';
+import { headers } from 'next/headers';
+
+const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
+
+export async function POST(req: Request) {
+  const body = await req.text(); // Raw body dibutuhkan untuk signature
+  const signature = headers().get('Stripe-Signature') as string;
+
+  let event: Stripe.Event;
+
+  try {
+    event = stripe.webhooks.constructEvent(
+      body,
+      signature,
+      process.env.STRIPE_WEBHOOK_SECRET!
+    );
+  } catch (err: any) {
+    return new Response(`Webhook Error: ${err.message}`, { status: 400 });
+  }
+
+  // Tangani event
+  if (event.type === 'checkout.session.completed') {
+    // Proses pembayaran sukses, cek idempotensi, update DB
+  }
+
+  return new Response(JSON.stringify({ received: true }), { status: 200 });
+}
+```
+
+## Integrasi Orkestrasi
+- Terintegrasi dengan: `saas-billing`, `doku-payment-gateway`, `saas-mvp-launcher`.
+
 ### Kondisi Pemicu
 Aktif setiap kali pengguna sedang mengerjakan integrasi billing, checkout pembayaran, penanganan webhook, atau mengintegrasikan platform seperti PayPal, Stripe, Xendit, Midtrans, atau DOKU.

package/skills/pdf-document-generation-expert/SKILL.md

@@ -0,0 +1,91 @@
+---
+name: pdf-document-generation-expert
+description: "Expert guide for PDF generation and document processing (React PDF, Puppeteer, jsPDF, pdf-lib) / Panduan ahli generasi PDF dan pemrosesan dokumen (React PDF, Puppeteer, jsPDF, pdf-lib)."
+author: "Roedy Rustam"
+---
+
+# PDF & Document Generation Expert (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Orchestration & Integration
+- **`email-notification-expert`**: PDF attachments in transactional emails.
+- **`saas-billing`**: Invoice and receipt PDF generation.
+- **`file-upload-media-expert`**: PDF storage and CDN delivery.
+
+### Description
+Expert guide for generating PDFs and processing documents in web applications. Covers React PDF (@react-pdf/renderer), Puppeteer HTML-to-PDF, jsPDF, pdf-lib, invoice generation, report templates, digital signatures, and document parsing.
+
+### Trigger Conditions
+- Generating invoices, receipts, or reports as PDFs.
+- Converting HTML pages to downloadable PDFs.
+- Building document templates with dynamic data.
+- Implementing digital signatures on PDF documents.
+
+---
+
+### Library Selection
+
+| Library | Approach | Server/Client | Best For |
+|---------|----------|---------------|----------|
+| @react-pdf/renderer | React components → PDF | Both | Complex layouts |
+| Puppeteer | HTML → PDF (headless Chrome) | Server | Pixel-perfect from HTML |
+| jsPDF | Programmatic canvas | Client | Simple client-side PDFs |
+| pdf-lib | Low-level PDF manipulation | Both | Modify existing PDFs |
+
+```tsx
+// React PDF — Invoice generation
+import { Document, Page, Text, View, StyleSheet, renderToBuffer } from '@react-pdf/renderer';
+
+const styles = StyleSheet.create({
+  page: { padding: 40, fontSize: 12 },
+  header: { fontSize: 24, marginBottom: 20, color: '#8B5CF6' },
+  row: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 8 },
+  total: { fontSize: 16, fontWeight: 'bold', borderTopWidth: 1, paddingTop: 8, marginTop: 16 },
+});
+
+function InvoicePDF({ invoice }) {
+  return (
+    <Document>
+      <Page size="A4" style={styles.page}>
+        <Text style={styles.header}>Invoice #{invoice.number}</Text>
+        {invoice.items.map((item, i) => (
+          <View key={i} style={styles.row}>
+            <Text>{item.description}</Text>
+            <Text>${item.amount.toFixed(2)}</Text>
+          </View>
+        ))}
+        <View style={styles.total}>
+          <Text>Total: ${invoice.total.toFixed(2)}</Text>
+        </View>
+      </Page>
+    </Document>
+  );
+}
+
+// Server-side render to buffer
+export async function generateInvoicePDF(invoice) {
+  return await renderToBuffer(<InvoicePDF invoice={invoice} />);
+}
+```
+
+## Orchestration & Integration
+- `email-notification-expert`, `saas-billing`, `file-upload-media-expert`
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Panduan ahli untuk menghasilkan PDF dan memproses dokumen di aplikasi web. Mencakup React PDF, Puppeteer HTML-to-PDF, jsPDF, dan pdf-lib.
+
+### Kondisi Pemicu
+- Menghasilkan invoice, struk, atau laporan sebagai PDF.
+- Mengkonversi halaman HTML ke PDF yang bisa diunduh.
+- Membangun template dokumen dengan data dinamis.

package/skills/performance-web-vitals/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: performance-web-vitals
 description: "Expert guide for Web Performance optimization: Core Web Vitals (LCP, INP, CLS), bundle analysis, image optimization, rendering strategies, and Lighthouse score improvement / Panduan ahli untuk optimasi performa web: Core Web Vitals (LCP, INP, CLS), analisis bundle, optimasi gambar, strategi rendering, dan peningkatan skor Lighthouse."
-author: "Roedy Rustam"
+author: "Roedy Rustam"
 ---
 
 # Web Performance & Core Web Vitals Expert
@@ -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
 Expert guide for measuring, diagnosing, and optimizing web application performance with a focus on **Core Web Vitals** (LCP, INP, CLS), JavaScript bundle optimization, image and font loading strategies, rendering performance, and achieving high Lighthouse scores. Covers Next.js 15, React 19, and modern browser APIs.
 
@@ -304,6 +307,9 @@ onTTFB(sendToAnalytics);
 <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 mengukur, mendiagnosis, dan mengoptimalkan performa aplikasi web dengan fokus pada **Core Web Vitals** (LCP, INP, CLS), optimasi JavaScript bundle, strategi loading gambar dan font, performa rendering, dan mencapai skor Lighthouse yang tinggi.