Email Notification Expert

Email & Notification Expert (2026 Edition)

English | Bahasa Indonesia

English

Orchestration & Integration

• Upstream Orchestrators: Works under brainstorming and zero-to-prod-orchestrator (Phase 4 - Backend, Messaging & Notification Pipelines) to deliver transactional and notification services.
• Downstream Cooperating Skills:
  • saas-billing — Payment receipt emails, invoice PDFs, and failed payment dunning sequences.
  • saas-architect — Workspace team member invitations and tenant alert notifications.
  • authentication-identity-expert — Magic links, password resets, verification emails, and MFA codes.
  • mobile-expo-expert — Unified multi-channel notifications (email, APNs/FCM push, iOS Live Activities).
  • async-queue-temporal-expert — Durable background queue execution via BullMQ and Inngest.
  • production-ready-hardener — Pre-launch deliverability verification (SPF, DKIM, DMARC, and DNS records).
  • session-memory-manager — Store email template catalogs, notification providers, and delivery settings.

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

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

tsxCopy code
// 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

typescriptCopy code
// 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

typescriptCopy code
// 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

Copy code
# 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

typescriptCopy code
// 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;
}

tsxCopy code
// 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

typescriptCopy code
// 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 });
}

7. Mobile Push Notifications & iOS Live Activities

typescriptCopy code
import * as Notifications from 'expo-notifications';

// Register for push tokens (Expo Push / FCM / APNs)
export async function registerForPushNotificationsAsync() {
  const { status: existingStatus } = await Notifications.getPermissionsAsync();
  let finalStatus = existingStatus;
  if (existingStatus !== 'granted') {
    const { status } = await Notifications.requestPermissionsAsync();
    finalStatus = status;
  }
  if (finalStatus !== 'granted') return null;
  return (await Notifications.getExpoPushTokenAsync()).data;
}

• Expo Push & FCM: Send batched push notifications with deep links, actions, and custom data payloads.
• iOS Live Activities / Dynamic Island: Update real-time status (orders, deliveries, live events) using ActivityKit.
• Push Token Lifecycle: Save push tokens to database associated with userId; handle token rotation and app reinstall events.

Common Pitfalls to Avoid

Sovereign Execution, Token Efficiency & Invariants

Bahasa Indonesia

Integrasi Orkestrasi

• Orkestrator Hulu: Beroperasi di bawah arahan brainstorming dan zero-to-prod-orchestrator (Fase 4 - Backend, Pengiriman Pesan & Pipeline Notifikasi) untuk menyediakan layanan email transaksional dan notifikasi.
• Skill Hilir & Kerja Sama:
  • saas-billing — Email kuitansi pembayaran, invoice PDF, dan sekuens dunning penagihan gagal.
  • saas-architect — Undangan anggota tim workspace dan notifikasi tenant.
  • authentication-identity-expert — Magic link, reset password, verifikasi email, dan kode MFA.
  • mobile-expo-expert — Notifikasi multi-saluran terpadu (email, push APNs/FCM, iOS Live Activities).
  • async-queue-temporal-expert — Eksekusi antrean background job tahan banting via BullMQ dan Inngest.
  • production-ready-hardener — Verifikasi deliverabilitas pra-peluncuran (rekod DNS SPF, DKIM, DMARC).
  • session-memory-manager — Menyimpan katalog template email, provider notifikasi, dan pengaturan pengiriman.

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

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).

Notifikasi Push Mobile & iOS Live Activities

• Expo Push & FCM: Kirim notifikasi push masal dengan payload kustom, aksi tombol, dan deep linking ke rute aplikasi (Expo Router).
• iOS Live Activities: Tampilkan status dinamis secara real-time pada Dynamic Island dan Lock Screen iOS menggunakan ActivityKit.
• Siklus Hidup Push Token: Simpan token push ke database per userId dan tangani event rotasi token saat instal ulang aplikasi.

Kesalahan Umum yang Harus Dihindari

Matriks Eksekusi Berdaulat, Efisiensi Token & Invarian