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.
Scanned 9/6/2026
Install to Claude Code
Skills Directorynpx -y skills add roedyrustam/vibes-plug --skill email-notification-expert --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of Email Notification Expert?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/roedyrustam-email-notification-expert)More formats (shields.io, HTML) on the badges page.
---
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: "vibes-plug-swarm"
---
# 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
Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.
No comments yet. Be the first to comment!
