vibes-plug 1.0.0 → 2.11.0

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,45 +1,129 @@
----
-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"
----
-
-# Payment Gateway Expert / Ahli Payment Gateway
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Description
-Expert guide for integrating major payment gateways (Stripe, PayPal, Xendit, Midtrans, DOKU) into modern SaaS platforms. Covers checkout flows, secure webhook handling, subscription management, and synchronization with local databases.
-
-### Instructions
-- **Security First**: Always validate webhook signatures before processing any payment event. Never trust client-side data for prices or payment status. For DOKU, ensure signature components (like request target) are arranged strictly according to documentation.
-- **Idempotency**: Implement idempotency keys for all payment creation requests to avoid duplicate charges. Webhook handlers must also be idempotent. For DOKU, include a unique `Request-Id` header.
-- **State Synchronization**: Ensure the local database (e.g., PostgreSQL, Supabase) is updated immediately and transactionally upon receiving successful webhook events.
-- **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.
-
-### 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.
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Deskripsi
-Panduan ahli untuk mengintegrasikan payment gateway utama (Stripe, PayPal, Xendit, Midtrans, DOKU) ke platform SaaS modern. Mencakup alur checkout, penanganan webhook yang aman, manajemen langganan, dan sinkronisasi dengan database lokal.
-
-### Instruksi
-- **Keamanan Utama**: Selalu validasi signature webhook sebelum memproses event pembayaran apa pun. Jangan pernah mempercayai data dari sisi klien untuk harga atau status pembayaran. Untuk DOKU, pastikan komponen signature (seperti request target) disusun secara ketat sesuai dokumentasi.
-- **Idempotensi**: Implementasikan kunci idempotensi (idempotency keys) untuk semua permintaan pembuatan pembayaran untuk menghindari tagihan ganda. Handler webhook juga harus idempoten. Untuk DOKU, sertakan header `Request-Id` unik.
-- **Sinkronisasi State**: Pastikan database lokal (misal: PostgreSQL, Supabase) diperbarui secara langsung dan transaksional saat menerima event webhook yang berhasil.
-- **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.
-
-### Kondisi Pemicu
-Aktif setiap kali pengguna sedang mengerjakan integrasi billing, checkout pembayaran, penanganan webhook, atau mengintegrasikan platform seperti PayPal, Stripe, Xendit, Midtrans, atau DOKU.
+---
+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: "Roedy Rustam"
+---
+
+# Payment Gateway Expert / Ahli Payment Gateway
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+Expert guide for integrating major payment gateways (Stripe, PayPal, Xendit, Midtrans, DOKU) into modern SaaS platforms. Covers checkout flows, secure webhook handling, subscription management, and synchronization with local databases.
+
+### Instructions
+- **Security First**: Always validate webhook signatures before processing any payment event. Never trust client-side data for prices or payment status. For DOKU, ensure signature components (like request target) are arranged strictly according to documentation.
+- **Idempotency**: Implement idempotency keys for all payment creation requests to avoid duplicate charges. Webhook handlers must also be idempotent. For DOKU, include a unique `Request-Id` header.
+- **State Synchronization**: Ensure the local database (e.g., PostgreSQL, Supabase) is updated immediately and transactionally upon receiving successful webhook events.
+- **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.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Panduan ahli untuk mengintegrasikan payment gateway utama (Stripe, PayPal, Xendit, Midtrans, DOKU) ke platform SaaS modern. Mencakup alur checkout, penanganan webhook yang aman, manajemen langganan, dan sinkronisasi dengan database lokal.
+
+### Instruksi
+- **Keamanan Utama**: Selalu validasi signature webhook sebelum memproses event pembayaran apa pun. Jangan pernah mempercayai data dari sisi klien untuk harga atau status pembayaran. Untuk DOKU, pastikan komponen signature (seperti request target) disusun secara ketat sesuai dokumentasi.
+- **Idempotensi**: Implementasikan kunci idempotensi (idempotency keys) untuk semua permintaan pembuatan pembayaran untuk menghindari tagihan ganda. Handler webhook juga harus idempoten. Untuk DOKU, sertakan header `Request-Id` unik.
+- **Sinkronisasi State**: Pastikan database lokal (misal: PostgreSQL, Supabase) diperbarui secara langsung dan transaksional saat menerima event webhook yang berhasil.
+- **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.