npm - vibes-plug - Versions diffs - 1.0.0 → 2.5.0 - Mend

vibes-plug 1.0.0 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (123) hide show

package/.github/workflows/publish.yml +20 -0
package/AGENTS.md +66 -0
package/BLUEPRINT.md +152 -60
package/CHANGELOG.md +50 -0
package/README.md +346 -194
package/package.json +25 -25
package/plugin.json +1 -1
package/skills/ai-cost-token-optimizer/SKILL.md +52 -0
package/skills/ai-llm-integration-expert/SKILL.md +180 -162
package/skills/api-design-expert/SKILL.md +314 -310
package/skills/app-analyzer-optimizer/SKILL.md +193 -189
package/skills/apple-ecosystem-expert/SKILL.md +142 -0
package/skills/async-queue-temporal-expert/SKILL.md +54 -0
package/skills/authentication-identity-expert/SKILL.md +251 -20
package/skills/auto-doc-updater/SKILL.md +214 -204
package/skills/autonomous-chaos-monkey/SKILL.md +63 -0
package/skills/autonomous-red-teamer/SKILL.md +59 -0
package/skills/autonomous-swarm-director/SKILL.md +69 -0
package/skills/autonomous-tdd-debugger/SKILL.md +65 -0
package/skills/bootstrap-to-modern/SKILL.md +90 -86
package/skills/brainstorming/SKILL.md +373 -353
package/skills/browser-automation-expert/SKILL.md +46 -0
package/skills/ci-cd-devops-architect/SKILL.md +72 -45
package/skills/cloud-hosting-expert/SKILL.md +244 -244
package/skills/coderabbit/SKILL.md +192 -192
package/skills/cron-scheduler-expert/SKILL.md +298 -0
package/skills/data-telemetry-expert/SKILL.md +213 -213
package/skills/database-orm-expert/SKILL.md +294 -294
package/skills/dependency-upgrade-migrator/SKILL.md +295 -0
package/skills/design-system-architect/SKILL.md +27 -10
package/skills/doku-mcp-server/SKILL.md +251 -0
package/skills/doku-payment-gateway/SKILL.md +227 -0
package/skills/e2e-testing-expert/SKILL.md +315 -315
package/skills/edge-serverless-db-expert/SKILL.md +43 -0
package/skills/email-notification-expert/SKILL.md +362 -0
package/skills/error-resilience-expert/SKILL.md +480 -0
package/skills/event-driven-architect/SKILL.md +81 -81
package/skills/feature-flag-analytics-expert/SKILL.md +46 -0
package/skills/file-upload-media-expert/SKILL.md +431 -0
package/skills/form-validation-expert/SKILL.md +401 -0
package/skills/fullstack-expert/SKILL.md +202 -202
package/skills/fullstack-expert/references/api_design_guide.md +466 -466
package/skills/fullstack-expert/references/multi_language_backend.md +528 -528
package/skills/fullstack-expert/scripts/api_contract_validator.py +253 -253
package/skills/fullstack-expert/scripts/architecture_analyzer.py +326 -326
package/skills/gemini-agent-booster/SKILL.md +135 -135
package/skills/global-a11y-i18n-expert/SKILL.md +81 -81
package/skills/glsl-shader-expert/SKILL.md +101 -0
package/skills/go-programming-expert/SKILL.md +295 -295
package/skills/graphql-apollo-expert/SKILL.md +108 -0
package/skills/hig/SKILL.md +188 -188
package/skills/hyper-context-synthesizer/SKILL.md +55 -0
package/skills/js-backend-expert/SKILL.md +34 -9
package/skills/legacy-code-translator/SKILL.md +65 -0
package/skills/llm-cost-arbitrage-router/SKILL.md +59 -0
package/skills/logging-error-tracking-expert/SKILL.md +338 -0
package/skills/mcp-client-orchestrator/SKILL.md +70 -0
package/skills/mcp-server-architect/SKILL.md +194 -194
package/skills/micro-frontend-architect/SKILL.md +106 -0
package/skills/mobile-expo-expert/SKILL.md +186 -186
package/skills/mobile-push-notification-expert/SKILL.md +51 -0
package/skills/monday-design-aesthetic/SKILL.md +67 -67
package/skills/monorepo-architect/SKILL.md +227 -227
package/skills/mpa-orchestrator/SKILL.md +101 -101
package/skills/multi-agent-orchestration/SKILL.md +234 -234
package/skills/multiple-entry-points/SKILL.md +55 -55
package/skills/mvc-expert/SKILL.md +231 -231
package/skills/payment-gateway-expert/SKILL.md +45 -45
package/skills/performance-web-vitals/SKILL.md +332 -332
package/skills/post-quantum-crypto-migrator/SKILL.md +57 -0
package/skills/prd-architect/SKILL.md +201 -191
package/skills/proactive-background-watcher/SKILL.md +62 -0
package/skills/production-ready-hardener/PRODUCTION_READINESS_REPORT.md +67 -0
package/skills/production-ready-hardener/SKILL.md +173 -186
package/skills/production-ready-hardener/references/production_checklist.md +161 -161
package/skills/production-ready-hardener/scripts/production_readiness_scanner.py +881 -875
package/skills/project-context-mapper/SKILL.md +79 -0
package/skills/python-programming-expert/SKILL.md +263 -132
package/skills/rate-limit-abuse-prevention/SKILL.md +371 -0
package/skills/realtime-collaboration-expert/SKILL.md +45 -45
package/skills/rust-programming-expert/SKILL.md +235 -235
package/skills/saas-billing/SKILL.md +377 -377
package/skills/saas-multi-tenant/SKILL.md +251 -237
package/skills/saas-mvp-launcher/SKILL.md +10 -0
package/skills/saas-transformer/SKILL.md +187 -144
package/skills/saas-transformer/references/billing_integration_guide.md +401 -401
package/skills/saas-transformer/references/feature_gating_patterns.md +137 -137
package/skills/saas-transformer/references/saas_transformation_checklist.md +121 -121
package/skills/saas-transformer/scripts/saas_transformation_scanner.py +39 -29
package/skills/scalability-clean-code/SKILL.md +229 -229
package/skills/self-evolving-memory-graph/SKILL.md +75 -0
package/skills/self-healing-cloud-orchestrator/SKILL.md +57 -0
package/skills/senior-frontend/SKILL.md +161 -161
package/skills/senior-fullstack/SKILL.md +167 -167
package/skills/seo/SKILL.md +235 -225
package/skills/seo-geo/SKILL.md +188 -188
package/skills/session-context-loader/SKILL.md +77 -0
package/skills/session-handoff-resume/SKILL.md +158 -158
package/skills/skill_baru/SKILL.md +172 -147
package/skills/spa-orchestrator/SKILL.md +288 -288
package/skills/state-management-expert/SKILL.md +272 -272
package/skills/supabase-security-expert/SKILL.md +243 -243
package/skills/tailwind-expert/SKILL.md +188 -188
package/skills/tanstack-query-expert/SKILL.md +199 -199
package/skills/token-saver/SKILL.md +119 -111
package/skills/typescript-expert/SKILL.md +324 -279
package/skills/ui-components-expert/SKILL.md +263 -46
package/skills/ui-ux-pro-max/SKILL.md +202 -201
package/skills/ui-ux-pro-max/scripts/__pycache__/core.cpython-310.pyc +0 -0
package/skills/ui-ux-pro-max/scripts/__pycache__/design_system.cpython-310.pyc +0 -0
package/skills/ui_ux_expert/SKILL.md +17 -6
package/skills/vector-db-rag-expert/SKILL.md +52 -0
package/skills/vibe-code-gardener/SKILL.md +181 -173
package/skills/visual-qa-vision-agent/SKILL.md +65 -0
package/skills/vue-frontend-expert/SKILL.md +126 -0
package/skills/web-3d-graphics-expert/SKILL.md +131 -0
package/skills/web-game-engine-expert/SKILL.md +96 -0
package/skills/web-scraper/SKILL.md +207 -205
package/skills/website-design-cloner/SKILL.md +174 -0
package/skills/webxr-ar-vr-expert/SKILL.md +117 -0
package/skills/zero-to-prod-orchestrator/SKILL.md +206 -180
package/skills/zero-trust-secret-vault/SKILL.md +40 -0
package/vibes-swarm-demo.gif +0 -0

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

@@ -0,0 +1,362 @@
+---
+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
+### 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
+### 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