vibes-plug 2.5.0 → 2.11.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 (177) hide show
  1. package/.claude/rules/vibes-plug-core.md +32 -0
  2. package/.cursor/rules/vibes-plug-core.mdc +51 -0
  3. package/.cursorrules +42 -0
  4. package/AGENTS.md +37 -7
  5. package/BLUEPRINT.md +309 -217
  6. package/CHANGELOG.md +133 -1
  7. package/CLAUDE.md +70 -0
  8. package/LICENSE +1 -1
  9. package/README.md +641 -415
  10. package/index.js +19 -0
  11. package/package.json +44 -8
  12. package/plugin.json +24 -7
  13. package/scripts/generate_swarm_gif.py +295 -0
  14. package/scripts/install.js +201 -0
  15. package/skills/accessibility-testing-expert/SKILL.md +116 -0
  16. package/skills/ai-cost-token-optimizer/SKILL.md +82 -52
  17. package/skills/ai-evals-benchmark-expert/SKILL.md +188 -0
  18. package/skills/ai-llm-integration-expert/SKILL.md +185 -178
  19. package/skills/ai-media-generation-expert/SKILL.md +172 -0
  20. package/skills/ai-prompt-engineering-expert/SKILL.md +84 -0
  21. package/skills/angular-expert/SKILL.md +148 -0
  22. package/skills/api-design-expert/SKILL.md +6 -3
  23. package/skills/api-gateway-proxy-expert/SKILL.md +81 -0
  24. package/skills/app-analyzer-optimizer/SKILL.md +6 -3
  25. package/skills/apple-ecosystem-expert/SKILL.md +144 -141
  26. package/skills/{asisten_ramah → asisten-ramah}/SKILL.md +7 -1
  27. package/skills/astro-framework-expert/SKILL.md +200 -0
  28. package/skills/async-queue-temporal-expert/SKILL.md +210 -24
  29. package/skills/authentication-identity-expert/SKILL.md +278 -275
  30. package/skills/auto-doc-updater/SKILL.md +7 -1
  31. package/skills/autonomous-chaos-monkey/SKILL.md +63 -63
  32. package/skills/autonomous-red-teamer/SKILL.md +172 -28
  33. package/skills/autonomous-tdd-debugger/SKILL.md +70 -64
  34. package/skills/background-jobs-queue-expert/SKILL.md +235 -0
  35. package/skills/biome-linter-formatter-expert/SKILL.md +89 -0
  36. package/skills/blockchain-web3-expert/SKILL.md +115 -0
  37. package/skills/bootstrap-to-modern/SKILL.md +9 -6
  38. package/skills/brainstorming/SKILL.md +58 -50
  39. package/skills/browser-automation-expert/SKILL.md +197 -21
  40. package/skills/bun-runtime-expert/SKILL.md +7 -1
  41. package/skills/chatbot-messaging-expert/SKILL.md +114 -0
  42. package/skills/ci-cd-devops-architect/SKILL.md +45 -36
  43. package/skills/cloud-hosting-expert/SKILL.md +7 -1
  44. package/skills/coderabbit/SKILL.md +7 -1
  45. package/skills/compliance-gdpr-privacy-expert/SKILL.md +85 -0
  46. package/skills/cron-scheduler-expert/SKILL.md +303 -297
  47. package/skills/data-pipeline-etl-expert/SKILL.md +84 -0
  48. package/skills/data-telemetry-expert/SKILL.md +7 -1
  49. package/skills/data-visualization-expert/SKILL.md +154 -0
  50. package/skills/database-migration-versioning-expert/SKILL.md +90 -0
  51. package/skills/database-orm-expert/SKILL.md +13 -3
  52. package/skills/dependency-upgrade-migrator/SKILL.md +300 -294
  53. package/skills/design-system-architect/SKILL.md +278 -259
  54. package/skills/desktop-electron-expert/SKILL.md +128 -0
  55. package/skills/documentation-site-expert/SKILL.md +59 -0
  56. package/skills/doku-mcp-server/SKILL.md +7 -1
  57. package/skills/doku-payment-gateway/SKILL.md +7 -1
  58. package/skills/domain-driven-design-expert/SKILL.md +82 -0
  59. package/skills/e2e-testing-expert/SKILL.md +7 -1
  60. package/skills/ecommerce-expert/SKILL.md +87 -0
  61. package/skills/edge-serverless-db-expert/SKILL.md +98 -42
  62. package/skills/email-notification-expert/SKILL.md +367 -361
  63. package/skills/error-resilience-expert/SKILL.md +485 -479
  64. package/skills/event-driven-architect/SKILL.md +7 -1
  65. package/skills/feature-flag-analytics-expert/SKILL.md +65 -45
  66. package/skills/file-upload-media-expert/SKILL.md +436 -430
  67. package/skills/firebase-security-expert/SKILL.md +7 -1
  68. package/skills/form-validation-expert/SKILL.md +406 -400
  69. package/skills/fullstack-expert/SKILL.md +60 -1
  70. package/skills/gemini-agent-booster/SKILL.md +173 -135
  71. package/skills/geospatial-maps-expert/SKILL.md +80 -0
  72. package/skills/global-a11y-i18n-expert/SKILL.md +7 -1
  73. package/skills/glsl-shader-expert/SKILL.md +106 -100
  74. package/skills/go-programming-expert/SKILL.md +21 -15
  75. package/skills/graph-rag-knowledge-expert/SKILL.md +159 -0
  76. package/skills/graphql-apollo-expert/SKILL.md +113 -107
  77. package/skills/headless-cms-expert/SKILL.md +181 -0
  78. package/skills/hig/SKILL.md +7 -1
  79. package/skills/js-backend-expert/SKILL.md +218 -216
  80. package/skills/legacy-code-translator/SKILL.md +70 -64
  81. package/skills/local-slm-edge-ai-expert/SKILL.md +167 -0
  82. package/skills/logging-error-tracking-expert/SKILL.md +343 -337
  83. package/skills/mcp-client-orchestrator/SKILL.md +75 -69
  84. package/skills/mcp-server-architect/SKILL.md +294 -194
  85. package/skills/micro-frontend-architect/SKILL.md +111 -105
  86. package/skills/mobile-expo-expert/SKILL.md +8 -2
  87. package/skills/mobile-push-notification-expert/SKILL.md +70 -50
  88. package/skills/modern-css-native-expert/SKILL.md +189 -0
  89. package/skills/monday-design-aesthetic/SKILL.md +7 -1
  90. package/skills/monorepo-architect/SKILL.md +7 -1
  91. package/skills/mpa-orchestrator/SKILL.md +20 -1
  92. package/skills/multi-agent-orchestration/SKILL.md +254 -234
  93. package/skills/multiple-entry-points/SKILL.md +37 -1
  94. package/skills/mvc-expert/SKILL.md +7 -1
  95. package/skills/n8n-automation-expert/SKILL.md +89 -0
  96. package/skills/nextjs-app-router-expert/SKILL.md +148 -0
  97. package/skills/openapi-swagger-codegen-expert/SKILL.md +67 -0
  98. package/skills/payment-gateway-expert/SKILL.md +85 -1
  99. package/skills/pdf-document-generation-expert/SKILL.md +91 -0
  100. package/skills/performance-web-vitals/SKILL.md +7 -1
  101. package/skills/post-quantum-crypto-migrator/SKILL.md +57 -57
  102. package/skills/prd-architect/SKILL.md +7 -1
  103. package/skills/proactive-background-watcher/SKILL.md +67 -61
  104. package/skills/production-ready-hardener/SKILL.md +461 -455
  105. package/skills/project-context-mapper/SKILL.md +84 -78
  106. package/skills/pwa-offline-first-expert/SKILL.md +185 -0
  107. package/skills/python-programming-expert/SKILL.md +407 -401
  108. package/skills/rate-limit-abuse-prevention/SKILL.md +376 -370
  109. package/skills/realtime-collaboration-expert/SKILL.md +55 -1
  110. package/skills/rich-text-editor-expert/SKILL.md +177 -0
  111. package/skills/rust-programming-expert/SKILL.md +7 -1
  112. package/skills/saas-billing/SKILL.md +7 -1
  113. package/skills/saas-multi-tenant/SKILL.md +7 -1
  114. package/skills/saas-mvp-launcher/SKILL.md +20 -1
  115. package/skills/saas-transformer/SKILL.md +499 -488
  116. package/skills/scalability-clean-code/SKILL.md +7 -1
  117. package/skills/search-engine-expert/SKILL.md +89 -0
  118. package/skills/secure-fuzz-testing/SKILL.md +7 -1
  119. package/skills/self-evolving-memory-graph/SKILL.md +90 -74
  120. package/skills/self-healing-cloud-orchestrator/SKILL.md +57 -57
  121. package/skills/senior-frontend/SKILL.md +141 -161
  122. package/skills/seo/SKILL.md +41 -17
  123. package/skills/session-context-loader/SKILL.md +82 -76
  124. package/skills/session-handoff-resume/SKILL.md +7 -1
  125. package/skills/{skill_baru → skill-baru}/SKILL.md +8 -2
  126. package/skills/solidjs-expert/SKILL.md +80 -0
  127. package/skills/spa-orchestrator/SKILL.md +20 -1
  128. package/skills/sse-websocket-streaming-expert/SKILL.md +93 -0
  129. package/skills/state-management-expert/SKILL.md +7 -1
  130. package/skills/supabase-migration/SKILL.md +47 -1
  131. package/skills/supabase-security-expert/SKILL.md +7 -1
  132. package/skills/svelte-sveltekit-expert/SKILL.md +91 -0
  133. package/skills/svg-animation-motion-expert/SKILL.md +115 -0
  134. package/skills/tailwind-expert/SKILL.md +88 -136
  135. package/skills/tanstack-query-expert/SKILL.md +7 -1
  136. package/skills/tauri-expert/SKILL.md +7 -1
  137. package/skills/token-saver/SKILL.md +1 -1
  138. package/skills/typescript-expert/SKILL.md +12 -6
  139. package/skills/ui-components-expert/SKILL.md +165 -279
  140. package/skills/ui-ux-pro-max/SKILL.md +23 -3
  141. package/skills/vector-db-rag-expert/SKILL.md +175 -19
  142. package/skills/vibe-code-gardener/SKILL.md +1 -1
  143. package/skills/visual-qa-vision-agent/SKILL.md +70 -64
  144. package/skills/voice-ai-realtime-agent/SKILL.md +202 -0
  145. package/skills/vue-frontend-expert/SKILL.md +131 -125
  146. package/skills/wasm-edge-computing-expert/SKILL.md +97 -0
  147. package/skills/web-3d-graphics-expert/SKILL.md +136 -130
  148. package/skills/web-game-engine-expert/SKILL.md +101 -95
  149. package/skills/web-scraper/SKILL.md +157 -207
  150. package/skills/website-design-cloner/SKILL.md +179 -173
  151. package/skills/webxr-ar-vr-expert/SKILL.md +122 -116
  152. package/skills/wordpress-headless-expert/SKILL.md +144 -0
  153. package/skills/zero-to-prod-orchestrator/SKILL.md +52 -27
  154. package/skills/zero-trust-secret-vault/SKILL.md +87 -39
  155. package/.github/ISSUE_TEMPLATE/feature_request.md +0 -20
  156. package/.github/workflows/publish.yml +0 -20
  157. package/CONTRIBUTING.md +0 -199
  158. package/SECURITY.md +0 -21
  159. package/banner.png +0 -0
  160. package/skills/autonomous-swarm-director/SKILL.md +0 -69
  161. package/skills/hyper-context-synthesizer/SKILL.md +0 -55
  162. package/skills/llm-cost-arbitrage-router/SKILL.md +0 -59
  163. package/skills/senior-fullstack/SKILL.md +0 -167
  164. package/skills/senior-fullstack/references/architecture_patterns.md +0 -160
  165. package/skills/senior-fullstack/references/development_workflows.md +0 -222
  166. package/skills/senior-fullstack/references/tech_stack_guide.md +0 -190
  167. package/skills/senior-fullstack/scripts/code_quality_analyzer.py +0 -114
  168. package/skills/senior-fullstack/scripts/fullstack_scaffolder.py +0 -114
  169. package/skills/senior-fullstack/scripts/project_scaffolder.py +0 -114
  170. package/skills/seo-aeo-landing-page-writer/SKILL.md +0 -97
  171. package/skills/seo-geo/SKILL.md +0 -188
  172. package/skills/ui-ux-pro-max/scripts/__pycache__/core.cpython-310.pyc +0 -0
  173. package/skills/ui-ux-pro-max/scripts/__pycache__/core.cpython-312.pyc +0 -0
  174. package/skills/ui-ux-pro-max/scripts/__pycache__/design_system.cpython-310.pyc +0 -0
  175. package/skills/ui-ux-pro-max/scripts/__pycache__/design_system.cpython-312.pyc +0 -0
  176. package/skills/ui_ux_expert/SKILL.md +0 -125
  177. package/vibes-swarm-demo.gif +0 -0
package/skills/email-notification-expert/SKILL.md CHANGED
@@ -1,362 +1,368 @@
1
- ---
2
- name: email-notification-expert
3
- 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."
1
+ ---
2
+ name: email-notification-expert
3
+ 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."
4
4
  author: "Roedy Rustam"
5
- ---
6
-
7
- # Email & Notification Expert (2026 Edition)
8
-
9
- [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
10
-
11
- ---
12
-
13
- <a name="english"></a>
14
- ## English
15
-
16
- ### Description
17
- 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.
18
-
19
- ### Trigger Conditions
20
- Activate this skill when:
21
- - Setting up transactional email (welcome, password reset, invoices, team invites).
22
- - Building email templates with React Email or MJML.
23
- - Integrating Resend, Postmark, SendGrid, or AWS SES.
24
- - Implementing in-app notification systems (real-time bell, toast, notification center).
25
- - Configuring email deliverability (SPF, DKIM, DMARC records).
26
- - Building email queue systems for high-volume sends.
27
- - Implementing unsubscribe management and compliance.
28
-
29
- ---
30
-
31
- ### Email Provider Selection Guide
32
-
33
- | Provider | Best For | Key Strength | Pricing Model |
34
- |---|---|---|---|
35
- | **Resend** | Modern apps, React Email | Developer DX, React components as email | Per email (free tier: 3k/mo) |
36
- | **Postmark** | Transactional-only | Industry-best deliverability, dedicated IP | Per email (free tier: 100/mo) |
37
- | **AWS SES** | High volume, cost-sensitive | Cheapest at scale ($0.10/1000 emails) | Per email |
38
- | **SendGrid** | Marketing + Transactional | Full marketing suite, analytics | Tiered plans |
39
- | **Plunk** | Self-hostable, open-source | Full control, no vendor lock-in | Free (self-hosted) |
40
-
41
- **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.
42
-
43
- ---
44
-
45
- ### 1. React Email Templates
46
-
47
- ```tsx
48
- // emails/welcome.tsx
49
- import {
50
- Body, Button, Container, Head, Heading,
51
- Html, Img, Link, Preview, Section, Text,
52
- } from '@react-email/components';
53
-
54
- interface WelcomeEmailProps {
55
- username: string;
56
- loginUrl: string;
57
- }
58
-
59
- export default function WelcomeEmail({ username, loginUrl }: WelcomeEmailProps) {
60
- return (
61
- <Html>
62
- <Head />
63
- <Preview>Welcome to our platform, {username}!</Preview>
64
- <Body style={main}>
65
- <Container style={container}>
66
- <Img src="https://yourdomain.com/logo.png" width={48} height={48} alt="Logo" />
67
- <Heading style={heading}>Welcome, {username}! 🎉</Heading>
68
- <Text style={text}>
69
- We're thrilled to have you on board. Your account is ready.
70
- </Text>
71
- <Section style={buttonContainer}>
72
- <Button style={button} href={loginUrl}>
73
- Get Started
74
- </Button>
75
- </Section>
76
- <Text style={footer}>
77
- If you didn't create this account, you can safely ignore this email.
78
- </Text>
79
- </Container>
80
- </Body>
81
- </Html>
82
- );
83
- }
84
-
85
- const main = { backgroundColor: '#f6f9fc', fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' };
86
- const container = { backgroundColor: '#ffffff', margin: '0 auto', padding: '40px 20px', borderRadius: '8px', maxWidth: '560px' };
87
- const heading = { fontSize: '24px', fontWeight: '600' as const, color: '#1a1a1a', margin: '24px 0 16px' };
88
- const text = { fontSize: '16px', lineHeight: '26px', color: '#484848' };
89
- const buttonContainer = { textAlign: 'center' as const, margin: '32px 0' };
90
- const button = { backgroundColor: '#5046e5', borderRadius: '6px', color: '#fff', fontSize: '16px', padding: '12px 24px', textDecoration: 'none' };
91
- const footer = { fontSize: '13px', color: '#999', marginTop: '32px' };
92
- ```
93
-
94
- ---
95
-
96
- ### 2. Sending Emails with Resend
97
-
98
- ```typescript
99
- // lib/email.ts
100
- import { Resend } from 'resend';
101
- import WelcomeEmail from '@/emails/welcome';
102
-
103
- const resend = new Resend(process.env.RESEND_API_KEY);
104
-
105
- export async function sendWelcomeEmail(to: string, username: string) {
106
- const { data, error } = await resend.emails.send({
107
- from: 'Your App <noreply@yourdomain.com>',
108
- to,
109
- subject: `Welcome to Our Platform, ${username}!`,
110
- react: WelcomeEmail({ username, loginUrl: 'https://app.yourdomain.com/login' }),
111
- // Optional: plain text fallback
112
- text: `Welcome ${username}! Get started at https://app.yourdomain.com/login`,
113
- // Optional: tags for analytics
114
- tags: [
115
- { name: 'category', value: 'onboarding' },
116
- ],
117
- });
118
-
119
- if (error) {
120
- throw new Error(`Failed to send welcome email: ${error.message}`);
121
- }
122
-
123
- return data;
124
- }
125
- ```
126
-
127
- ---
128
-
129
- ### 3. Email Queue for High-Volume
130
-
131
- ```typescript
132
- // queues/email-queue.ts
133
- import { Queue, Worker } from 'bullmq';
134
- import { sendEmail } from '@/lib/email';
135
-
136
- // Queue definition
137
- export const emailQueue = new Queue('emails', {
138
- connection: { host: process.env.REDIS_HOST, port: 6379 },
139
- defaultJobOptions: {
140
- attempts: 3,
141
- backoff: { type: 'exponential', delay: 2000 },
142
- removeOnComplete: { age: 86400 }, // Keep for 24h
143
- removeOnFail: { age: 604800 }, // Keep failed for 7 days
144
- },
145
- });
146
-
147
- // Worker (separate process)
148
- const emailWorker = new Worker('emails', async (job) => {
149
- const { type, to, data } = job.data;
150
-
151
- switch (type) {
152
- case 'welcome':
153
- await sendWelcomeEmail(to, data.username);
154
- break;
155
- case 'password-reset':
156
- await sendPasswordResetEmail(to, data.resetToken);
157
- break;
158
- case 'invoice':
159
- await sendInvoiceEmail(to, data.invoiceId);
160
- break;
161
- default:
162
- throw new Error(`Unknown email type: ${type}`);
163
- }
164
- }, {
165
- connection: { host: process.env.REDIS_HOST, port: 6379 },
166
- concurrency: 5, // Process 5 emails at a time
167
- limiter: { max: 50, duration: 1000 }, // Max 50 emails/second (respect provider limits)
168
- });
169
-
170
- // Enqueue email from API route
171
- export async function queueEmail(type: string, to: string, data: Record<string, unknown>) {
172
- await emailQueue.add(type, { type, to, data });
173
- }
174
- ```
175
-
176
- ---
177
-
178
- ### 4. Email Deliverability Setup
179
-
180
- #### DNS Records Required
181
- ```
182
- # SPF — Authorize sending servers
183
- TXT @ "v=spf1 include:_spf.resend.com ~all"
184
-
185
- # DKIM — Cryptographic signature
186
- CNAME resend._domainkey resend._domainkey.yourdomain.com
187
-
188
- # DMARC — Policy for failed authentication
189
- TXT _dmarc "v=DMARC1; p=quarantine; rua=mailto:dmarc@yourdomain.com; pct=100"
190
-
191
- # Return-Path (custom bounce domain)
192
- CNAME bounce feedback-smtp.us-east-1.amazonses.com
193
- ```
194
-
195
- #### Deliverability Checklist
196
- - [ ] SPF record configured and verified
197
- - [ ] DKIM signing enabled and verified
198
- - [ ] DMARC policy set to at least `p=quarantine`
199
- - [ ] Custom `From` domain (not `@gmail.com` or `@resend.dev`)
200
- - [ ] List-Unsubscribe header present in all marketing emails
201
- - [ ] Bounce handling configured (remove invalid addresses)
202
- - [ ] Complaint feedback loop registered with major ISPs
203
- - [ ] Email content passes spam filter checks (no ALL CAPS, excessive links)
204
-
205
- ---
206
-
207
- ### 5. In-App Notification System
208
-
209
- ```typescript
210
- // db/schema — Notification table (Drizzle ORM)
211
- import { pgTable, text, timestamp, boolean, uuid } from 'drizzle-orm/pg-core';
212
-
213
- export const notifications = pgTable('notifications', {
214
- id: uuid('id').primaryKey().defaultRandom(),
215
- userId: uuid('user_id').notNull().references(() => users.id, { onDelete: 'cascade' }),
216
- type: text('type').notNull(), // 'info' | 'warning' | 'success' | 'error'
217
- title: text('title').notNull(),
218
- message: text('message').notNull(),
219
- actionUrl: text('action_url'),
220
- isRead: boolean('is_read').default(false).notNull(),
221
- createdAt: timestamp('created_at').defaultNow().notNull(),
222
- });
223
-
224
- // API: Mark notification as read
225
- export async function markAsRead(notificationId: string, userId: string) {
226
- await db.update(notifications)
227
- .set({ isRead: true })
228
- .where(and(
229
- eq(notifications.id, notificationId),
230
- eq(notifications.userId, userId),
231
- ));
232
- }
233
-
234
- // API: Get unread count
235
- export async function getUnreadCount(userId: string): Promise<number> {
236
- const [result] = await db.select({ count: count() })
237
- .from(notifications)
238
- .where(and(
239
- eq(notifications.userId, userId),
240
- eq(notifications.isRead, false),
241
- ));
242
- return result.count;
243
- }
244
- ```
245
-
246
- ```tsx
247
- // components/notification-bell.tsx
248
- 'use client';
249
-
250
- import { useQuery } from '@tanstack/react-query';
251
- import { Bell } from 'lucide-react';
252
-
253
- export function NotificationBell() {
254
- const { data: unreadCount } = useQuery({
255
- queryKey: ['notifications', 'unread-count'],
256
- queryFn: () => fetch('/api/notifications/unread-count').then(r => r.json()),
257
- refetchInterval: 30_000, // Poll every 30 seconds
258
- });
259
-
260
- return (
261
- <button className="notification-bell" aria-label={`${unreadCount ?? 0} unread notifications`}>
262
- <Bell size={20} />
263
- {unreadCount > 0 && (
264
- <span className="notification-badge">{unreadCount > 99 ? '99+' : unreadCount}</span>
265
- )}
266
- </button>
267
- );
268
- }
269
- ```
270
-
271
- ---
272
-
273
- ### 6. Unsubscribe & Compliance
274
-
275
- ```typescript
276
- // Mandatory headers for CAN-SPAM/GDPR compliance
277
- const emailHeaders = {
278
- 'List-Unsubscribe': '<https://app.yourdomain.com/unsubscribe?token=xxx>',
279
- 'List-Unsubscribe-Post': 'List-Unsubscribe=One-Click',
280
- };
281
-
282
- // One-click unsubscribe endpoint
283
- export async function POST(request: Request) {
284
- const { token } = await request.json();
285
- const decoded = verifyUnsubscribeToken(token);
286
- await db.update(emailPreferences)
287
- .set({ unsubscribed: true, unsubscribedAt: new Date() })
288
- .where(eq(emailPreferences.userId, decoded.userId));
289
- return new Response('Unsubscribed', { status: 200 });
290
- }
291
- ```
292
-
293
- ---
294
-
295
- ### Common Pitfalls to Avoid
296
-
297
- | Anti-Pattern | Problem | Correct Approach |
298
- |---|---|---|
299
- | Sending email synchronously in API routes | Slow response times, timeout risk | Queue emails with BullMQ/Inngest |
300
- | Using `@gmail.com` as sender | Poor deliverability, spam filters | Use custom domain with SPF/DKIM |
301
- | No plain-text fallback | Emails may display incorrectly | Always include `text` alongside HTML |
302
- | Hardcoded email content | Can't update without deploys | Use templates with dynamic variables |
303
- | No unsubscribe link | CAN-SPAM violation, ISP blocking | Always include List-Unsubscribe header |
304
- | Sending passwords in email | Security vulnerability | Send one-time reset links with expiry |
305
-
306
- ---
307
-
308
- ### Integration with Other Skills
309
-
310
- - `saas-billing` — Payment receipt emails, failed payment dunning sequences
311
- - `saas-transformer` — Team invitation emails, workspace notifications
312
- - `authentication-identity-expert` — Password reset emails, email verification, MFA codes
313
- - `mobile-push-notification-expert` — Unified notification strategy (email + push + in-app)
314
- - `async-queue-temporal-expert` — Email queue workers with BullMQ/Inngest
315
- - `production-ready-hardener` — Email deliverability audit before launch
316
-
317
- ---
318
-
319
- <a name="bahasa-indonesia"></a>
320
- ## Bahasa Indonesia
321
-
322
- ### Deskripsi
323
- 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**.
324
-
325
- ### Kondisi Pemicu
326
- Aktifkan skill ini ketika:
327
- - Menyiapkan email transaksional (selamat datang, reset password, invoice, undangan tim).
328
- - Membangun template email dengan React Email atau MJML.
329
- - Mengintegrasikan Resend, Postmark, SendGrid, atau AWS SES.
330
- - Mengimplementasikan sistem notifikasi in-app (bell real-time, toast, pusat notifikasi).
331
- - Mengonfigurasi deliverabilitas email (SPF, DKIM, DMARC).
332
- - Membangun sistem antrean email untuk pengiriman volume tinggi.
333
- - Mengimplementasikan manajemen unsubscribe dan kepatuhan regulasi.
334
-
335
- ### Panduan Pemilihan Provider Email
336
-
337
- | Provider | Terbaik Untuk | Kekuatan Utama | Model Harga |
338
- |---|---|---|---|
339
- | **Resend** | Aplikasi modern, React Email | DX developer terbaik, komponen React sebagai email | Per email (gratis: 3k/bulan) |
340
- | **Postmark** | Hanya transaksional | Deliverabilitas terbaik di industri, IP dedicated | Per email (gratis: 100/bulan) |
341
- | **AWS SES** | Volume tinggi, hemat biaya | Termurah di skala besar ($0.10/1000 email) | Per email |
342
- | **SendGrid** | Marketing + Transaksional | Suite marketing lengkap, analitik | Paket bertingkat |
343
-
344
- **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).
345
-
346
- ### Kesalahan Umum yang Harus Dihindari
347
-
348
- | Anti-Pola | Masalah | Pendekatan yang Benar |
349
- |---|---|---|
350
- | Mengirim email secara sinkron di API route | Waktu respons lambat, risiko timeout | Antrean email dengan BullMQ/Inngest |
351
- | Menggunakan `@gmail.com` sebagai pengirim | Deliverabilitas buruk, filter spam | Gunakan domain kustom dengan SPF/DKIM |
352
- | Tidak ada fallback teks biasa | Email mungkin tampil tidak benar | Selalu sertakan `text` di samping HTML |
353
- | Tidak ada link unsubscribe | Pelanggaran CAN-SPAM, pemblokiran ISP | Selalu sertakan header List-Unsubscribe |
354
-
355
- ### Integrasi dengan Skill Lain
356
-
357
- - `saas-billing` — Email kuitansi pembayaran, sekuens dunning gagal bayar
358
- - `saas-transformer` — Email undangan tim, notifikasi workspace
359
- - `authentication-identity-expert` — Email reset password, verifikasi email, kode MFA
360
- - `mobile-push-notification-expert` — Strategi notifikasi terpadu (email + push + in-app)
361
- - `async-queue-temporal-expert` — Worker antrean email dengan BullMQ/Inngest
362
- - `production-ready-hardener` — Audit deliverabilitas email sebelum peluncuran
5
+ ---
6
+
7
+ # Email & Notification Expert (2026 Edition)
8
+
9
+ [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
10
+
11
+ ---
12
+
13
+ <a name="english"></a>
14
+ ## English
15
+
16
+ ### Orchestration & Integration
17
+ Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
18
+
19
+ ### Description
20
+ 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.
21
+
22
+ ### Trigger Conditions
23
+ Activate this skill when:
24
+ - Setting up transactional email (welcome, password reset, invoices, team invites).
25
+ - Building email templates with React Email or MJML.
26
+ - Integrating Resend, Postmark, SendGrid, or AWS SES.
27
+ - Implementing in-app notification systems (real-time bell, toast, notification center).
28
+ - Configuring email deliverability (SPF, DKIM, DMARC records).
29
+ - Building email queue systems for high-volume sends.
30
+ - Implementing unsubscribe management and compliance.
31
+
32
+ ---
33
+
34
+ ### Email Provider Selection Guide
35
+
36
+ | Provider | Best For | Key Strength | Pricing Model |
37
+ |---|---|---|---|
38
+ | **Resend** | Modern apps, React Email | Developer DX, React components as email | Per email (free tier: 3k/mo) |
39
+ | **Postmark** | Transactional-only | Industry-best deliverability, dedicated IP | Per email (free tier: 100/mo) |
40
+ | **AWS SES** | High volume, cost-sensitive | Cheapest at scale ($0.10/1000 emails) | Per email |
41
+ | **SendGrid** | Marketing + Transactional | Full marketing suite, analytics | Tiered plans |
42
+ | **Plunk** | Self-hostable, open-source | Full control, no vendor lock-in | Free (self-hosted) |
43
+
44
+ **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.
45
+
46
+ ---
47
+
48
+ ### 1. React Email Templates
49
+
50
+ ```tsx
51
+ // emails/welcome.tsx
52
+ import {
53
+ Body, Button, Container, Head, Heading,
54
+ Html, Img, Link, Preview, Section, Text,
55
+ } from '@react-email/components';
56
+
57
+ interface WelcomeEmailProps {
58
+ username: string;
59
+ loginUrl: string;
60
+ }
61
+
62
+ export default function WelcomeEmail({ username, loginUrl }: WelcomeEmailProps) {
63
+ return (
64
+ <Html>
65
+ <Head />
66
+ <Preview>Welcome to our platform, {username}!</Preview>
67
+ <Body style={main}>
68
+ <Container style={container}>
69
+ <Img src="https://yourdomain.com/logo.png" width={48} height={48} alt="Logo" />
70
+ <Heading style={heading}>Welcome, {username}! 🎉</Heading>
71
+ <Text style={text}>
72
+ We're thrilled to have you on board. Your account is ready.
73
+ </Text>
74
+ <Section style={buttonContainer}>
75
+ <Button style={button} href={loginUrl}>
76
+ Get Started
77
+ </Button>
78
+ </Section>
79
+ <Text style={footer}>
80
+ If you didn't create this account, you can safely ignore this email.
81
+ </Text>
82
+ </Container>
83
+ </Body>
84
+ </Html>
85
+ );
86
+ }
87
+
88
+ const main = { backgroundColor: '#f6f9fc', fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' };
89
+ const container = { backgroundColor: '#ffffff', margin: '0 auto', padding: '40px 20px', borderRadius: '8px', maxWidth: '560px' };
90
+ const heading = { fontSize: '24px', fontWeight: '600' as const, color: '#1a1a1a', margin: '24px 0 16px' };
91
+ const text = { fontSize: '16px', lineHeight: '26px', color: '#484848' };
92
+ const buttonContainer = { textAlign: 'center' as const, margin: '32px 0' };
93
+ const button = { backgroundColor: '#5046e5', borderRadius: '6px', color: '#fff', fontSize: '16px', padding: '12px 24px', textDecoration: 'none' };
94
+ const footer = { fontSize: '13px', color: '#999', marginTop: '32px' };
95
+ ```
96
+
97
+ ---
98
+
99
+ ### 2. Sending Emails with Resend
100
+
101
+ ```typescript
102
+ // lib/email.ts
103
+ import { Resend } from 'resend';
104
+ import WelcomeEmail from '@/emails/welcome';
105
+
106
+ const resend = new Resend(process.env.RESEND_API_KEY);
107
+
108
+ export async function sendWelcomeEmail(to: string, username: string) {
109
+ const { data, error } = await resend.emails.send({
110
+ from: 'Your App <noreply@yourdomain.com>',
111
+ to,
112
+ subject: `Welcome to Our Platform, ${username}!`,
113
+ react: WelcomeEmail({ username, loginUrl: 'https://app.yourdomain.com/login' }),
114
+ // Optional: plain text fallback
115
+ text: `Welcome ${username}! Get started at https://app.yourdomain.com/login`,
116
+ // Optional: tags for analytics
117
+ tags: [
118
+ { name: 'category', value: 'onboarding' },
119
+ ],
120
+ });
121
+
122
+ if (error) {
123
+ throw new Error(`Failed to send welcome email: ${error.message}`);
124
+ }
125
+
126
+ return data;
127
+ }
128
+ ```
129
+
130
+ ---
131
+
132
+ ### 3. Email Queue for High-Volume
133
+
134
+ ```typescript
135
+ // queues/email-queue.ts
136
+ import { Queue, Worker } from 'bullmq';
137
+ import { sendEmail } from '@/lib/email';
138
+
139
+ // Queue definition
140
+ export const emailQueue = new Queue('emails', {
141
+ connection: { host: process.env.REDIS_HOST, port: 6379 },
142
+ defaultJobOptions: {
143
+ attempts: 3,
144
+ backoff: { type: 'exponential', delay: 2000 },
145
+ removeOnComplete: { age: 86400 }, // Keep for 24h
146
+ removeOnFail: { age: 604800 }, // Keep failed for 7 days
147
+ },
148
+ });
149
+
150
+ // Worker (separate process)
151
+ const emailWorker = new Worker('emails', async (job) => {
152
+ const { type, to, data } = job.data;
153
+
154
+ switch (type) {
155
+ case 'welcome':
156
+ await sendWelcomeEmail(to, data.username);
157
+ break;
158
+ case 'password-reset':
159
+ await sendPasswordResetEmail(to, data.resetToken);
160
+ break;
161
+ case 'invoice':
162
+ await sendInvoiceEmail(to, data.invoiceId);
163
+ break;
164
+ default:
165
+ throw new Error(`Unknown email type: ${type}`);
166
+ }
167
+ }, {
168
+ connection: { host: process.env.REDIS_HOST, port: 6379 },
169
+ concurrency: 5, // Process 5 emails at a time
170
+ limiter: { max: 50, duration: 1000 }, // Max 50 emails/second (respect provider limits)
171
+ });
172
+
173
+ // Enqueue email from API route
174
+ export async function queueEmail(type: string, to: string, data: Record<string, unknown>) {
175
+ await emailQueue.add(type, { type, to, data });
176
+ }
177
+ ```
178
+
179
+ ---
180
+
181
+ ### 4. Email Deliverability Setup
182
+
183
+ #### DNS Records Required
184
+ ```
185
+ # SPF — Authorize sending servers
186
+ TXT @ "v=spf1 include:_spf.resend.com ~all"
187
+
188
+ # DKIM — Cryptographic signature
189
+ CNAME resend._domainkey resend._domainkey.yourdomain.com
190
+
191
+ # DMARC — Policy for failed authentication
192
+ TXT _dmarc "v=DMARC1; p=quarantine; rua=mailto:dmarc@yourdomain.com; pct=100"
193
+
194
+ # Return-Path (custom bounce domain)
195
+ CNAME bounce feedback-smtp.us-east-1.amazonses.com
196
+ ```
197
+
198
+ #### Deliverability Checklist
199
+ - [ ] SPF record configured and verified
200
+ - [ ] DKIM signing enabled and verified
201
+ - [ ] DMARC policy set to at least `p=quarantine`
202
+ - [ ] Custom `From` domain (not `@gmail.com` or `@resend.dev`)
203
+ - [ ] List-Unsubscribe header present in all marketing emails
204
+ - [ ] Bounce handling configured (remove invalid addresses)
205
+ - [ ] Complaint feedback loop registered with major ISPs
206
+ - [ ] Email content passes spam filter checks (no ALL CAPS, excessive links)
207
+
208
+ ---
209
+
210
+ ### 5. In-App Notification System
211
+
212
+ ```typescript
213
+ // db/schema — Notification table (Drizzle ORM)
214
+ import { pgTable, text, timestamp, boolean, uuid } from 'drizzle-orm/pg-core';
215
+
216
+ export const notifications = pgTable('notifications', {
217
+ id: uuid('id').primaryKey().defaultRandom(),
218
+ userId: uuid('user_id').notNull().references(() => users.id, { onDelete: 'cascade' }),
219
+ type: text('type').notNull(), // 'info' | 'warning' | 'success' | 'error'
220
+ title: text('title').notNull(),
221
+ message: text('message').notNull(),
222
+ actionUrl: text('action_url'),
223
+ isRead: boolean('is_read').default(false).notNull(),
224
+ createdAt: timestamp('created_at').defaultNow().notNull(),
225
+ });
226
+
227
+ // API: Mark notification as read
228
+ export async function markAsRead(notificationId: string, userId: string) {
229
+ await db.update(notifications)
230
+ .set({ isRead: true })
231
+ .where(and(
232
+ eq(notifications.id, notificationId),
233
+ eq(notifications.userId, userId),
234
+ ));
235
+ }
236
+
237
+ // API: Get unread count
238
+ export async function getUnreadCount(userId: string): Promise<number> {
239
+ const [result] = await db.select({ count: count() })
240
+ .from(notifications)
241
+ .where(and(
242
+ eq(notifications.userId, userId),
243
+ eq(notifications.isRead, false),
244
+ ));
245
+ return result.count;
246
+ }
247
+ ```
248
+
249
+ ```tsx
250
+ // components/notification-bell.tsx
251
+ 'use client';
252
+
253
+ import { useQuery } from '@tanstack/react-query';
254
+ import { Bell } from 'lucide-react';
255
+
256
+ export function NotificationBell() {
257
+ const { data: unreadCount } = useQuery({
258
+ queryKey: ['notifications', 'unread-count'],
259
+ queryFn: () => fetch('/api/notifications/unread-count').then(r => r.json()),
260
+ refetchInterval: 30_000, // Poll every 30 seconds
261
+ });
262
+
263
+ return (
264
+ <button className="notification-bell" aria-label={`${unreadCount ?? 0} unread notifications`}>
265
+ <Bell size={20} />
266
+ {unreadCount > 0 && (
267
+ <span className="notification-badge">{unreadCount > 99 ? '99+' : unreadCount}</span>
268
+ )}
269
+ </button>
270
+ );
271
+ }
272
+ ```
273
+
274
+ ---
275
+
276
+ ### 6. Unsubscribe & Compliance
277
+
278
+ ```typescript
279
+ // Mandatory headers for CAN-SPAM/GDPR compliance
280
+ const emailHeaders = {
281
+ 'List-Unsubscribe': '<https://app.yourdomain.com/unsubscribe?token=xxx>',
282
+ 'List-Unsubscribe-Post': 'List-Unsubscribe=One-Click',
283
+ };
284
+
285
+ // One-click unsubscribe endpoint
286
+ export async function POST(request: Request) {
287
+ const { token } = await request.json();
288
+ const decoded = verifyUnsubscribeToken(token);
289
+ await db.update(emailPreferences)
290
+ .set({ unsubscribed: true, unsubscribedAt: new Date() })
291
+ .where(eq(emailPreferences.userId, decoded.userId));
292
+ return new Response('Unsubscribed', { status: 200 });
293
+ }
294
+ ```
295
+
296
+ ---
297
+
298
+ ### Common Pitfalls to Avoid
299
+
300
+ | Anti-Pattern | Problem | Correct Approach |
301
+ |---|---|---|
302
+ | Sending email synchronously in API routes | Slow response times, timeout risk | Queue emails with BullMQ/Inngest |
303
+ | Using `@gmail.com` as sender | Poor deliverability, spam filters | Use custom domain with SPF/DKIM |
304
+ | No plain-text fallback | Emails may display incorrectly | Always include `text` alongside HTML |
305
+ | Hardcoded email content | Can't update without deploys | Use templates with dynamic variables |
306
+ | No unsubscribe link | CAN-SPAM violation, ISP blocking | Always include List-Unsubscribe header |
307
+ | Sending passwords in email | Security vulnerability | Send one-time reset links with expiry |
308
+
309
+ ---
310
+
311
+ ### Integration with Other Skills
312
+
313
+ - `saas-billing` — Payment receipt emails, failed payment dunning sequences
314
+ - `saas-transformer` — Team invitation emails, workspace notifications
315
+ - `authentication-identity-expert` — Password reset emails, email verification, MFA codes
316
+ - `mobile-push-notification-expert` — Unified notification strategy (email + push + in-app)
317
+ - `async-queue-temporal-expert` — Email queue workers with BullMQ/Inngest
318
+ - `production-ready-hardener` — Email deliverability audit before launch
319
+
320
+ ---
321
+
322
+ <a name="bahasa-indonesia"></a>
323
+ ## Bahasa Indonesia
324
+
325
+ ### Integrasi Orkestrasi
326
+ Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
327
+
328
+ ### Deskripsi
329
+ 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**.
330
+
331
+ ### Kondisi Pemicu
332
+ Aktifkan skill ini ketika:
333
+ - Menyiapkan email transaksional (selamat datang, reset password, invoice, undangan tim).
334
+ - Membangun template email dengan React Email atau MJML.
335
+ - Mengintegrasikan Resend, Postmark, SendGrid, atau AWS SES.
336
+ - Mengimplementasikan sistem notifikasi in-app (bell real-time, toast, pusat notifikasi).
337
+ - Mengonfigurasi deliverabilitas email (SPF, DKIM, DMARC).
338
+ - Membangun sistem antrean email untuk pengiriman volume tinggi.
339
+ - Mengimplementasikan manajemen unsubscribe dan kepatuhan regulasi.
340
+
341
+ ### Panduan Pemilihan Provider Email
342
+
343
+ | Provider | Terbaik Untuk | Kekuatan Utama | Model Harga |
344
+ |---|---|---|---|
345
+ | **Resend** | Aplikasi modern, React Email | DX developer terbaik, komponen React sebagai email | Per email (gratis: 3k/bulan) |
346
+ | **Postmark** | Hanya transaksional | Deliverabilitas terbaik di industri, IP dedicated | Per email (gratis: 100/bulan) |
347
+ | **AWS SES** | Volume tinggi, hemat biaya | Termurah di skala besar ($0.10/1000 email) | Per email |
348
+ | **SendGrid** | Marketing + Transaksional | Suite marketing lengkap, analitik | Paket bertingkat |
349
+
350
+ **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).
351
+
352
+ ### Kesalahan Umum yang Harus Dihindari
353
+
354
+ | Anti-Pola | Masalah | Pendekatan yang Benar |
355
+ |---|---|---|
356
+ | Mengirim email secara sinkron di API route | Waktu respons lambat, risiko timeout | Antrean email dengan BullMQ/Inngest |
357
+ | Menggunakan `@gmail.com` sebagai pengirim | Deliverabilitas buruk, filter spam | Gunakan domain kustom dengan SPF/DKIM |
358
+ | Tidak ada fallback teks biasa | Email mungkin tampil tidak benar | Selalu sertakan `text` di samping HTML |
359
+ | Tidak ada link unsubscribe | Pelanggaran CAN-SPAM, pemblokiran ISP | Selalu sertakan header List-Unsubscribe |
360
+
361
+ ### Integrasi dengan Skill Lain
362
+
363
+ - `saas-billing` — Email kuitansi pembayaran, sekuens dunning gagal bayar
364
+ - `saas-transformer` — Email undangan tim, notifikasi workspace
365
+ - `authentication-identity-expert` — Email reset password, verifikasi email, kode MFA
366
+ - `mobile-push-notification-expert` — Strategi notifikasi terpadu (email + push + in-app)
367
+ - `async-queue-temporal-expert` — Worker antrean email dengan BullMQ/Inngest
368
+ - `production-ready-hardener` — Audit deliverabilitas email sebelum peluncuran