vibes-plug 1.0.0 → 2.11.0

package/skills/ecommerce-expert/SKILL.md

@@ -0,0 +1,87 @@
+---
+name: ecommerce-expert
+description: "Expert guide for e-commerce architecture (Shopify Storefront, Medusa.js, Saleor), product catalogs, cart/checkout UX, and order management / Panduan ahli arsitektur e-commerce (Shopify, Medusa.js, Saleor), katalog produk, UX keranjang/checkout, dan manajemen pesanan."
+author: "Roedy Rustam"
+---
+
+# E-Commerce Expert (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Orchestration & Integration
+- **`payment-gateway-expert`**: Stripe, Xendit, Midtrans payment integration.
+- **`nextjs-app-router-expert`**: SSR product pages and cart functionality.
+- **`seo`**: Product schema markup, sitemaps, and SEO optimization.
+- **`saas-billing`**: Subscription-based e-commerce models.
+- **`headless-cms-expert`**: Content management for product descriptions and pages.
+
+### Description
+Expert guide for building modern e-commerce applications. Covers Shopify Storefront API (headless commerce), Medusa.js v2 (open-source, self-hosted), Saleor (GraphQL-first), product catalog design, cart state management, checkout flows, inventory management, order fulfillment, and SEO for product pages.
+
+### Trigger Conditions
+- Building an online store or e-commerce platform.
+- Integrating Shopify Storefront API with custom frontend.
+- Setting up Medusa.js or Saleor for headless commerce.
+- Designing product catalog schemas and cart/checkout UX.
+
+---
+
+### Platform Selection
+
+| Platform | Type | API | Self-Hosted | Best For |
+|----------|------|-----|-------------|----------|
+| Shopify Storefront | SaaS + Headless | GraphQL | ❌ | Quick launch, large catalog |
+| Medusa.js v2 | Open-source | REST + JS SDK | ✅ | Full control, customization |
+| Saleor | Open-source | GraphQL | ✅ | Enterprise, multi-channel |
+| WooCommerce | Plugin (WordPress) | REST | ✅ | WordPress ecosystem |
+
+### Core Patterns
+
+```typescript
+// Shopify Storefront API — Fetch products
+const SHOPIFY_QUERY = `{
+  products(first: 12, sortKey: BEST_SELLING) {
+    edges {
+      node {
+        id title handle description
+        priceRange { minVariantPrice { amount currencyCode } }
+        images(first: 1) { edges { node { url altText } } }
+        variants(first: 5) { edges { node { id title availableForSale price { amount } } } }
+      }
+    }
+  }
+}`;
+
+async function getProducts() {
+  const res = await fetch(process.env.SHOPIFY_STOREFRONT_URL!, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'X-Shopify-Storefront-Access-Token': process.env.SHOPIFY_TOKEN!,
+    },
+    body: JSON.stringify({ query: SHOPIFY_QUERY }),
+  });
+  return (await res.json()).data.products.edges.map((e) => e.node);
+}
+```
+
+## Orchestration & Integration
+- `payment-gateway-expert`, `nextjs-app-router-expert`, `seo`, `saas-billing`
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Panduan ahli untuk membangun aplikasi e-commerce modern. Mencakup Shopify Storefront API, Medusa.js v2, Saleor, desain katalog produk, manajemen keranjang, alur checkout, manajemen inventaris, dan SEO halaman produk.
+
+### Kondisi Pemicu
+- Membangun toko online atau platform e-commerce.
+- Mengintegrasikan Shopify Storefront API dengan frontend kustom.
+- Menyiapkan Medusa.js atau Saleor untuk headless commerce.

package/skills/edge-serverless-db-expert/SKILL.md

@@ -0,0 +1,99 @@
+---
+name: edge-serverless-db-expert
+description: "Expert guide for Serverless & Edge Databases (Neon Serverless Postgres, Cloudflare D1, Turso/libsql, Upstash Redis), cold-start mitigation, and connection pooling / Panduan ahli database Serverless & Edge (Neon, Cloudflare D1, Turso, Upstash)."
+author: "Roedy Rustam"
+---
+
+# Edge & Serverless DB Expert
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Purpose & Overview
+Best practices for building ultra-low-latency 2026/2027 applications powered by serverless and edge databases. Exploit Neon Serverless Postgres, Cloudflare D1, Turso, Upstash Serverless Redis & Vector. Implement zero-cold-start strategies and HTTP connection pooling.
+
+### Key Capabilities
+- **Neon & Cloudflare D1**: Serverless autoscaling Postgres with instant branching. Distributed edge SQLite.
+- **Connection Pooling**: WebSocket/HTTP proxy pooling (Neon Serverless Driver, Upstash Redis over HTTP) for edge workers. Prevent TCP pool exhaustion.
+- **Embedded Replicas**: Sync edge SQLite read-replicas with central cloud databases for sub-10ms queries.
+
+```typescript
+import { neon } from '@neondatabase/serverless';
+import { drizzle } from 'drizzle-orm/neon-http';
+
+const sql = neon(process.env.DATABASE_URL!);
+export const db = drizzle({ client: sql });
+```
+
+### Implementation Checklist
+- [ ] Use HTTP/WebSocket drivers (e.g., `neon-http`) for querying databases from Edge Workers/Functions.
+- [ ] Configure connection pooling (PgBouncer, Prisma Accelerate) for standard TCP connections to avoid exhausting database connection limits.
+- [ ] Use read-replicas near the edge location for global deployments to minimize latency.
+- [ ] Cache read-heavy queries at the edge using Upstash Redis or Cloudflare KV.
+
+### Example: Upstash Redis Edge Caching
+```typescript
+import { Redis } from '@upstash/redis';
+
+const redis = new Redis({
+  url: process.env.UPSTASH_REDIS_REST_URL!,
+  token: process.env.UPSTASH_REDIS_REST_TOKEN!,
+});
+
+export async function getCachedData(key: string) {
+  let data = await redis.get(key);
+  if (!data) {
+    data = await fetchFromDB();
+    await redis.set(key, data, { ex: 3600 }); // Cache for 1 hour
+  }
+  return data;
+}
+```
+
+## Orchestration & Integration
+- Integrates with: `database-orm-expert`, `js-backend-expert`, `cloud-hosting-expert`.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Praktik terbaik membangun aplikasi latensi rendah 2026/2027 dengan database serverless dan edge. Manfaatkan Neon Serverless Postgres, Cloudflare D1, Turso, Upstash Serverless Redis & Vector. Implementasi strategi tanpa cold-start dan connection pooling HTTP.
+
+### Fitur Utama
+- **Neon & Cloudflare D1**: Serverless Postgres autoscaling dengan branching instan. Distributed edge SQLite.
+- **Connection Pooling**: Proxy pooling HTTP/WebSocket untuk edge worker. Cegah kehabisan koneksi TCP.
+- **Embedded Replicas**: Sinkronisasi read-replica SQLite di edge dengan database utama untuk query di bawah 10ms.
+
+### Checklist Implementasi
+- [ ] Gunakan driver HTTP/WebSocket (misal: `neon-http`) untuk mengakses database dari Edge Workers/Functions.
+- [ ] Konfigurasi connection pooling (PgBouncer, Prisma Accelerate) pada koneksi TCP standar untuk mencegah batas koneksi habis.
+- [ ] Gunakan read-replicas di dekat lokasi edge untuk deployment global guna meminimalkan latensi.
+- [ ] Cache query berat di edge menggunakan Upstash Redis atau Cloudflare KV.
+
+### Contoh: Upstash Redis Edge Caching
+```typescript
+import { Redis } from '@upstash/redis';
+
+const redis = new Redis({
+  url: process.env.UPSTASH_REDIS_REST_URL!,
+  token: process.env.UPSTASH_REDIS_REST_TOKEN!,
+});
+
+export async function getCachedData(key: string) {
+  let data = await redis.get(key);
+  if (!data) {
+    data = await fetchFromDB();
+    await redis.set(key, data, { ex: 3600 }); // Cache 1 jam
+  }
+  return data;
+}
+```
+
+## Integrasi Orkestrasi
+- Terintegrasi dengan: `database-orm-expert`, `js-backend-expert`, `cloud-hosting-expert`.

package/skills/email-notification-expert/SKILL.md

@@ -0,0 +1,368 @@
+---
+name: email-notification-expert
+description: "Expert guide for transactional email (Resend, Postmark, SES), React Email templates, in-app notifications, and unified communication pipelines / Panduan ahli untuk email transaksional (Resend, Postmark, SES), template React Email, notifikasi in-app, dan pipeline komunikasi terpadu."
+author: "Roedy Rustam"
+---
+
+# Email & Notification Expert (2026 Edition)
+
+[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
+Production-grade guide for building reliable email delivery systems and unified notification pipelines. Covers **Resend**, **Postmark**, **AWS SES**, **React Email** / **MJML** template engines, **email deliverability** (SPF, DKIM, DMARC), **in-app notification systems** (bell icon, toast, notification center), **webhook-triggered email flows**, **email queuing** with BullMQ/Inngest, and **CAN-SPAM/GDPR** compliance.
+
+### Trigger Conditions
+Activate this skill when:
+- Setting up transactional email (welcome, password reset, invoices, team invites).
+- Building email templates with React Email or MJML.
+- Integrating Resend, Postmark, SendGrid, or AWS SES.
+- Implementing in-app notification systems (real-time bell, toast, notification center).
+- Configuring email deliverability (SPF, DKIM, DMARC records).
+- Building email queue systems for high-volume sends.
+- Implementing unsubscribe management and compliance.
+
+---
+
+### Email Provider Selection Guide
+
+| Provider | Best For | Key Strength | Pricing Model |
+|---|---|---|---|
+| **Resend** | Modern apps, React Email | Developer DX, React components as email | Per email (free tier: 3k/mo) |
+| **Postmark** | Transactional-only | Industry-best deliverability, dedicated IP | Per email (free tier: 100/mo) |
+| **AWS SES** | High volume, cost-sensitive | Cheapest at scale ($0.10/1000 emails) | Per email |
+| **SendGrid** | Marketing + Transactional | Full marketing suite, analytics | Tiered plans |
+| **Plunk** | Self-hostable, open-source | Full control, no vendor lock-in | Free (self-hosted) |
+
+**Recommendation**: Use **Resend** for most new projects (best DX with React Email). Use **Postmark** for mission-critical transactional emails. Use **AWS SES** for high-volume (10k+/day) cost optimization.
+
+---
+
+### 1. React Email Templates
+
+```tsx
+// emails/welcome.tsx
+import {
+  Body, Button, Container, Head, Heading,
+  Html, Img, Link, Preview, Section, Text,
+} from '@react-email/components';
+
+interface WelcomeEmailProps {
+  username: string;
+  loginUrl: string;
+}
+
+export default function WelcomeEmail({ username, loginUrl }: WelcomeEmailProps) {
+  return (
+    <Html>
+      <Head />
+      <Preview>Welcome to our platform, {username}!</Preview>
+      <Body style={main}>
+        <Container style={container}>
+          <Img src="https://yourdomain.com/logo.png" width={48} height={48} alt="Logo" />
+          <Heading style={heading}>Welcome, {username}! 🎉</Heading>
+          <Text style={text}>
+            We're thrilled to have you on board. Your account is ready.
+          </Text>
+          <Section style={buttonContainer}>
+            <Button style={button} href={loginUrl}>
+              Get Started
+            </Button>
+          </Section>
+          <Text style={footer}>
+            If you didn't create this account, you can safely ignore this email.
+          </Text>
+        </Container>
+      </Body>
+    </Html>
+  );
+}
+
+const main = { backgroundColor: '#f6f9fc', fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' };
+const container = { backgroundColor: '#ffffff', margin: '0 auto', padding: '40px 20px', borderRadius: '8px', maxWidth: '560px' };
+const heading = { fontSize: '24px', fontWeight: '600' as const, color: '#1a1a1a', margin: '24px 0 16px' };
+const text = { fontSize: '16px', lineHeight: '26px', color: '#484848' };
+const buttonContainer = { textAlign: 'center' as const, margin: '32px 0' };
+const button = { backgroundColor: '#5046e5', borderRadius: '6px', color: '#fff', fontSize: '16px', padding: '12px 24px', textDecoration: 'none' };
+const footer = { fontSize: '13px', color: '#999', marginTop: '32px' };
+```
+
+---
+
+### 2. Sending Emails with Resend
+
+```typescript
+// lib/email.ts
+import { Resend } from 'resend';
+import WelcomeEmail from '@/emails/welcome';
+
+const resend = new Resend(process.env.RESEND_API_KEY);
+
+export async function sendWelcomeEmail(to: string, username: string) {
+  const { data, error } = await resend.emails.send({
+    from: 'Your App <noreply@yourdomain.com>',
+    to,
+    subject: `Welcome to Our Platform, ${username}!`,
+    react: WelcomeEmail({ username, loginUrl: 'https://app.yourdomain.com/login' }),
+    // Optional: plain text fallback
+    text: `Welcome ${username}! Get started at https://app.yourdomain.com/login`,
+    // Optional: tags for analytics
+    tags: [
+      { name: 'category', value: 'onboarding' },
+    ],
+  });
+
+  if (error) {
+    throw new Error(`Failed to send welcome email: ${error.message}`);
+  }
+
+  return data;
+}
+```
+
+---
+
+### 3. Email Queue for High-Volume
+
+```typescript
+// queues/email-queue.ts
+import { Queue, Worker } from 'bullmq';
+import { sendEmail } from '@/lib/email';
+
+// Queue definition
+export const emailQueue = new Queue('emails', {
+  connection: { host: process.env.REDIS_HOST, port: 6379 },
+  defaultJobOptions: {
+    attempts: 3,
+    backoff: { type: 'exponential', delay: 2000 },
+    removeOnComplete: { age: 86400 }, // Keep for 24h
+    removeOnFail: { age: 604800 },    // Keep failed for 7 days
+  },
+});
+
+// Worker (separate process)
+const emailWorker = new Worker('emails', async (job) => {
+  const { type, to, data } = job.data;
+
+  switch (type) {
+    case 'welcome':
+      await sendWelcomeEmail(to, data.username);
+      break;
+    case 'password-reset':
+      await sendPasswordResetEmail(to, data.resetToken);
+      break;
+    case 'invoice':
+      await sendInvoiceEmail(to, data.invoiceId);
+      break;
+    default:
+      throw new Error(`Unknown email type: ${type}`);
+  }
+}, {
+  connection: { host: process.env.REDIS_HOST, port: 6379 },
+  concurrency: 5,  // Process 5 emails at a time
+  limiter: { max: 50, duration: 1000 }, // Max 50 emails/second (respect provider limits)
+});
+
+// Enqueue email from API route
+export async function queueEmail(type: string, to: string, data: Record<string, unknown>) {
+  await emailQueue.add(type, { type, to, data });
+}
+```
+
+---
+
+### 4. Email Deliverability Setup
+
+#### DNS Records Required
+```
+# SPF — Authorize sending servers
+TXT  @  "v=spf1 include:_spf.resend.com ~all"
+
+# DKIM — Cryptographic signature
+CNAME  resend._domainkey  resend._domainkey.yourdomain.com
+
+# DMARC — Policy for failed authentication
+TXT  _dmarc  "v=DMARC1; p=quarantine; rua=mailto:dmarc@yourdomain.com; pct=100"
+
+# Return-Path (custom bounce domain)
+CNAME  bounce  feedback-smtp.us-east-1.amazonses.com
+```
+
+#### Deliverability Checklist
+- [ ] SPF record configured and verified
+- [ ] DKIM signing enabled and verified
+- [ ] DMARC policy set to at least `p=quarantine`
+- [ ] Custom `From` domain (not `@gmail.com` or `@resend.dev`)
+- [ ] List-Unsubscribe header present in all marketing emails
+- [ ] Bounce handling configured (remove invalid addresses)
+- [ ] Complaint feedback loop registered with major ISPs
+- [ ] Email content passes spam filter checks (no ALL CAPS, excessive links)
+
+---
+
+### 5. In-App Notification System
+
+```typescript
+// db/schema — Notification table (Drizzle ORM)
+import { pgTable, text, timestamp, boolean, uuid } from 'drizzle-orm/pg-core';
+
+export const notifications = pgTable('notifications', {
+  id: uuid('id').primaryKey().defaultRandom(),
+  userId: uuid('user_id').notNull().references(() => users.id, { onDelete: 'cascade' }),
+  type: text('type').notNull(), // 'info' | 'warning' | 'success' | 'error'
+  title: text('title').notNull(),
+  message: text('message').notNull(),
+  actionUrl: text('action_url'),
+  isRead: boolean('is_read').default(false).notNull(),
+  createdAt: timestamp('created_at').defaultNow().notNull(),
+});
+
+// API: Mark notification as read
+export async function markAsRead(notificationId: string, userId: string) {
+  await db.update(notifications)
+    .set({ isRead: true })
+    .where(and(
+      eq(notifications.id, notificationId),
+      eq(notifications.userId, userId),
+    ));
+}
+
+// API: Get unread count
+export async function getUnreadCount(userId: string): Promise<number> {
+  const [result] = await db.select({ count: count() })
+    .from(notifications)
+    .where(and(
+      eq(notifications.userId, userId),
+      eq(notifications.isRead, false),
+    ));
+  return result.count;
+}
+```
+
+```tsx
+// components/notification-bell.tsx
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import { Bell } from 'lucide-react';
+
+export function NotificationBell() {
+  const { data: unreadCount } = useQuery({
+    queryKey: ['notifications', 'unread-count'],
+    queryFn: () => fetch('/api/notifications/unread-count').then(r => r.json()),
+    refetchInterval: 30_000, // Poll every 30 seconds
+  });
+
+  return (
+    <button className="notification-bell" aria-label={`${unreadCount ?? 0} unread notifications`}>
+      <Bell size={20} />
+      {unreadCount > 0 && (
+        <span className="notification-badge">{unreadCount > 99 ? '99+' : unreadCount}</span>
+      )}
+    </button>
+  );
+}
+```
+
+---
+
+### 6. Unsubscribe & Compliance
+
+```typescript
+// Mandatory headers for CAN-SPAM/GDPR compliance
+const emailHeaders = {
+  'List-Unsubscribe': '<https://app.yourdomain.com/unsubscribe?token=xxx>',
+  'List-Unsubscribe-Post': 'List-Unsubscribe=One-Click',
+};
+
+// One-click unsubscribe endpoint
+export async function POST(request: Request) {
+  const { token } = await request.json();
+  const decoded = verifyUnsubscribeToken(token);
+  await db.update(emailPreferences)
+    .set({ unsubscribed: true, unsubscribedAt: new Date() })
+    .where(eq(emailPreferences.userId, decoded.userId));
+  return new Response('Unsubscribed', { status: 200 });
+}
+```
+
+---
+
+### Common Pitfalls to Avoid
+
+| Anti-Pattern | Problem | Correct Approach |
+|---|---|---|
+| Sending email synchronously in API routes | Slow response times, timeout risk | Queue emails with BullMQ/Inngest |
+| Using `@gmail.com` as sender | Poor deliverability, spam filters | Use custom domain with SPF/DKIM |
+| No plain-text fallback | Emails may display incorrectly | Always include `text` alongside HTML |
+| Hardcoded email content | Can't update without deploys | Use templates with dynamic variables |
+| No unsubscribe link | CAN-SPAM violation, ISP blocking | Always include List-Unsubscribe header |
+| Sending passwords in email | Security vulnerability | Send one-time reset links with expiry |
+
+---
+
+### Integration with Other Skills
+
+- `saas-billing` — Payment receipt emails, failed payment dunning sequences
+- `saas-transformer` — Team invitation emails, workspace notifications
+- `authentication-identity-expert` — Password reset emails, email verification, MFA codes
+- `mobile-push-notification-expert` — Unified notification strategy (email + push + in-app)
+- `async-queue-temporal-expert` — Email queue workers with BullMQ/Inngest
+- `production-ready-hardener` — Email deliverability audit before launch
+
+---
+
+<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 tingkat produksi untuk membangun sistem pengiriman email yang andal dan pipeline notifikasi terpadu. Mencakup **Resend**, **Postmark**, **AWS SES**, mesin template **React Email** / **MJML**, **deliverabilitas email** (SPF, DKIM, DMARC), **sistem notifikasi in-app** (bell icon, toast, pusat notifikasi), **alur email berbasis webhook**, **antrean email** dengan BullMQ/Inngest, dan kepatuhan **CAN-SPAM/GDPR**.
+
+### Kondisi Pemicu
+Aktifkan skill ini ketika:
+- Menyiapkan email transaksional (selamat datang, reset password, invoice, undangan tim).
+- Membangun template email dengan React Email atau MJML.
+- Mengintegrasikan Resend, Postmark, SendGrid, atau AWS SES.
+- Mengimplementasikan sistem notifikasi in-app (bell real-time, toast, pusat notifikasi).
+- Mengonfigurasi deliverabilitas email (SPF, DKIM, DMARC).
+- Membangun sistem antrean email untuk pengiriman volume tinggi.
+- Mengimplementasikan manajemen unsubscribe dan kepatuhan regulasi.
+
+### Panduan Pemilihan Provider Email
+
+| Provider | Terbaik Untuk | Kekuatan Utama | Model Harga |
+|---|---|---|---|
+| **Resend** | Aplikasi modern, React Email | DX developer terbaik, komponen React sebagai email | Per email (gratis: 3k/bulan) |
+| **Postmark** | Hanya transaksional | Deliverabilitas terbaik di industri, IP dedicated | Per email (gratis: 100/bulan) |
+| **AWS SES** | Volume tinggi, hemat biaya | Termurah di skala besar ($0.10/1000 email) | Per email |
+| **SendGrid** | Marketing + Transaksional | Suite marketing lengkap, analitik | Paket bertingkat |
+
+**Rekomendasi**: Gunakan **Resend** untuk kebanyakan proyek baru (DX terbaik dengan React Email). Gunakan **Postmark** untuk email transaksional misi-kritis. Gunakan **AWS SES** untuk optimasi biaya volume tinggi (10k+/hari).
+
+### Kesalahan Umum yang Harus Dihindari
+
+| Anti-Pola | Masalah | Pendekatan yang Benar |
+|---|---|---|
+| Mengirim email secara sinkron di API route | Waktu respons lambat, risiko timeout | Antrean email dengan BullMQ/Inngest |
+| Menggunakan `@gmail.com` sebagai pengirim | Deliverabilitas buruk, filter spam | Gunakan domain kustom dengan SPF/DKIM |
+| Tidak ada fallback teks biasa | Email mungkin tampil tidak benar | Selalu sertakan `text` di samping HTML |
+| Tidak ada link unsubscribe | Pelanggaran CAN-SPAM, pemblokiran ISP | Selalu sertakan header List-Unsubscribe |
+
+### Integrasi dengan Skill Lain
+
+- `saas-billing` — Email kuitansi pembayaran, sekuens dunning gagal bayar
+- `saas-transformer` — Email undangan tim, notifikasi workspace
+- `authentication-identity-expert` — Email reset password, verifikasi email, kode MFA
+- `mobile-push-notification-expert` — Strategi notifikasi terpadu (email + push + in-app)
+- `async-queue-temporal-expert` — Worker antrean email dengan BullMQ/Inngest
+- `production-ready-hardener` — Audit deliverabilitas email sebelum peluncuran