菜单
Email and notification architecture: transactional email with Resend/SendGrid, React Email templates, notification preferences (channel, frequency, opt-out), delivery tracking, in-app notifications, and push notifications. Covers the full notification stack.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/marvinrichter/clarc --skill email-notifications命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Interactive installer for clarc — guides users through selecting and installing skills and rules to user-level or project-level directories, verifies paths, and optionally optimizes installed files.
Create zero-dependency, animation-rich HTML presentations from scratch or by converting PowerPoint/PPTX files. Use when the user wants to build a presentation, convert a deck to web, or create slides for a talk/pitch.
Create zero-dependency, animation-rich HTML presentations from scratch or by converting PowerPoint/PPTX files. Use when the user wants to build a presentation, convert a deck to web, or create slides for a talk/pitch.
正在显示 SKILL.md
基于 SOC 职业分类
| name | email-notifications |
| description | Email and notification architecture: transactional email with Resend/SendGrid, React Email templates, notification preferences (channel, frequency, opt-out), delivery tracking, in-app notifications, and push notifications. Covers the full notification stack. |
| Layer | Recommended | Alternative |
|---|---|---|
| Transactional email API | Resend | SendGrid, Postmark |
| Email templates | React Email | MJML, Handlebars |
| In-app notifications | DB-backed (custom) | Novu, Courier |
| Push (web) | Web Push API | OneSignal |
| Push (mobile) | FCM / APNs | Expo Notifications |
| Notification orchestration | Novu | Courier, MagicBell |
// emails/WelcomeEmail.tsx
import {
Html, Head, Body, Container, Heading, Text, Button, Hr, Img,
} from '@react-email/components';
interface WelcomeEmailProps {
userName: string;
loginUrl: string;
}
export function WelcomeEmail({ userName, loginUrl }: WelcomeEmailProps) {
return (
<Html>
<Head />
<Body style={{ fontFamily: 'sans-serif', backgroundColor: '#f9fafb' }}>
<Container style={{ maxWidth: '560px', margin: '0 auto', padding: '24px' }}>
<Img src="https://yourdomain.com/logo.png" width={120} alt="Logo" />
<Heading>Welcome, {userName}!</Heading>
<Text>
Your account is ready. Click below to get started.
</Text>
<Button
href={loginUrl}
style={{
backgroundColor: '#3b82f6',
color: '#fff',
padding: '12px 24px',
borderRadius: '6px',
textDecoration: 'none',
}}
>
Get started
</>
You're receiving this because you created an account.
{/* Always include unsubscribe link, even for transactional */}
);
}
// Preview at http://localhost:3001 with: npx react-email dev
// services/email.ts
import { Resend } from 'resend';
import { render } from '@react-email/render';
import { WelcomeEmail } from '../emails/WelcomeEmail';
const resend = new Resend(process.env.RESEND_API_KEY);
export async function sendWelcomeEmail(user: { email: string; name: string }) {
const html = await render(
WelcomeEmail({
userName: user.name,
loginUrl: `${process.env.APP_URL}/login`,
})
);
const { data, error } = await resend.emails.send({
from: 'Acme <noreply@acme.com>', // Must use verified domain
to: user.email,
subject: `Welcome to Acme, ${user.name}!`,
html,
// Idempotency: safe to retry
headers: { 'X-Entity-Ref-ID': `welcome-${user.id}` },
: [{ : , : }],
});
(error) {
();
}
db.(emailLogs).({
: user.,
: ,
: data!.,
: (),
});
}
// schema: notification preferences per user per channel
// notifications_preferences table:
// user_id | type | channel | enabled | frequency
type NotificationType =
| 'order.shipped'
| 'order.delivered'
| 'comment.reply'
| 'mention'
| 'weekly.digest';
type NotificationChannel = 'email' | 'push' | 'in_app';
// Default preferences (applied on signup)
const DEFAULT_PREFERENCES: Record<NotificationType, Record<NotificationChannel, boolean>> = {
'order.shipped': { email: true, push: true, in_app: true },
'order.delivered': { email: true, push: true, in_app: true },
'comment.reply': { email: true, push: true, in_app: true },
'mention': { email: true, push: true, in_app: true },
'weekly.digest': { : , : , : },
};
(): <> {
pref = db...({
: (
(notificationPreferences., userId),
(notificationPreferences., ),
(notificationPreferences., channel)
),
});
pref?. ?? [][channel];
}
() {
[emailOk, pushOk, inAppOk] = .([
(userId, , ),
(userId, , ),
(userId, , ),
]);
.([
emailOk && (userId, , data),
pushOk && (userId, , data),
inAppOk && (userId, , data),
]);
}
// In-app notifications: simple DB-backed approach
// schema: id, user_id, type, title, body, data, read_at, created_at
async function createInAppNotification(
userId: string,
type: string,
data: { title: string; body: string; link?: string; metadata?: unknown }
) {
const notification = await db.insert(notifications).values({
userId,
type,
title: data.title,
body: data.body,
link: data.link,
metadata: data.metadata,
}).returning();
// Push to connected WebSocket clients
notifyUser(userId, 'notification:new', notification[0]);
return notification[0];
}
async function markAsRead(userId: string, notificationId: string) {
await db
.update(notifications)
.set({ readAt: new Date() })
.where(
(
(notifications., notificationId),
(notifications., userId),
(notifications.)
)
);
}
app.(, authenticate, (req, res) => {
count = db.$count(
notifications,
(
(notifications., req..),
(notifications.)
)
);
res.({ count });
});
// Never call Resend/SendGrid directly in an HTTP handler
// Queue email jobs — fast response + retry on failure
// WRONG:
app.post('/auth/register', async (req, res) => {
const user = await createUser(req.body);
await sendWelcomeEmail(user); // Blocks response, no retry on failure
res.json({ user });
});
// CORRECT:
app.post('/auth/register', async (req, res) => {
const user = await createUser(req.body);
await emailQueue.add('welcome', { userId: user.id }); // Queue it
res.json({ user }); // Respond immediately
});
// Worker processes the queue
emailQueue.process('welcome', async (job) => {
const user = await db.query.users.findFirst({ where: eq(users.id, job.data.userId) });
await sendWelcomeEmail(user!);
});
# DNS records required for deliverability
# SPF: which servers can send email for your domain
TXT @ "v=spf1 include:_spf.resend.com ~all"
# DKIM: cryptographic signature (Resend/SendGrid generate this)
TXT resend._domainkey "v=DKIM1; k=rsa; p=..."
# DMARC: policy for failed SPF/DKIM
TXT _dmarc "v=DMARC1; p=quarantine; rua=mailto:dmarc@yourdomain.com"
// Deliverability rules:
// 1. Always use a subdomain for transactional (notifications.yourdomain.com)
// — protects main domain reputation
// 2. Never send to unverified addresses — validate with a library
// 3. Honor unsubscribes immediately (CAN-SPAM, GDPR require this)
// 4. List-Unsubscribe header for one-click unsubscribe
const headers = {
'List-Unsubscribe': `<mailto:unsubscribe@yourdomain.com?subject=unsubscribe-${token}>`,
'List-Unsubscribe-Post': 'List-Unsubscribe=One-Click',
};
// components/NotificationPreferences.tsx
function NotificationPreferences() {
const { data: prefs } = useQuery({ queryKey: ['notification-prefs'], queryFn: fetchPrefs });
const { mutate: updatePref } = useMutation({ mutationFn: updateNotificationPref });
const rows: { type: NotificationType; label: string }[] = [
{ type: 'order.shipped', label: 'Order shipped' },
{ type: 'comment.reply', label: 'Replies to my comments' },
{ type: 'mention', label: 'Mentions' },
{ type: 'weekly.digest', label: 'Weekly digest' },
];
return (
<table>
<thead>
<tr>
<th>Notification</th>
<th>Email</th>
<th>Push</>
In-app
{rows.map(row => (
{row.label}
{(['email', 'push', 'in_app'] as NotificationChannel[]).map(channel => (
updatePref({ type: row.type, channel, enabled: e.target.checked })}
aria-label={`${row.label} via ${channel}`}
/>
))}
))}
);
}
List-Unsubscribe header set for one-click unsubscribe