# Email
> Transactional email for a Next.js 16 site — Resend 6 (the { data, error } return; it does NOT throw on API errors, check error explicitly) with @react-email/components templates that carry the design system's palette and type into the inbox, the React component passed via the react property, a contact-form flow wired through a server action, the react-email dev preview server, and RESEND_API_KEY handling with a lazy client so builds pass without the key. Invoke during the backend phase whenever the brief needs outbound mail — contact-form notifications, double-opt-in newsletter confirmations, magic links, welcome or receipt emails — when a template looks default or off-brand, or when sends fail silently. Trigger phrases — "contact form email", "send an email", "transactional email", "email template", "Resend", "magic link email", "double opt-in confirmation", "newsletter Bestätigungs-Mail", "the form submits but no email arrives".
- Skill: `blyatiful1/email` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add blyatiful1/email`
- Raw SKILL.md: https://api.skillmd.com/api/skills/blyatiful1/email/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: blyatiful1 (https://skillmd.com/u/blyatiful1)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/blyatiful1/email
---
# email — mail the brand, not defaults
**Stage:** Phase 7 — Backend - **Reads:** design/BRIEF.md, design/SYSTEM.md - **Writes:** emails/*.tsx, emails/theme.ts, lib/email.ts, send calls in app/actions/*
## Standard
- The inbox is a brand surface. Every template carries SYSTEM.md's palette, type hierarchy, and voice — a first-grade site sending a default-gray email breaks trust at the exact moment it's being decided.
- Resend 6 returns `{ data, error }` and does NOT throw on API errors. Every send checks `error` explicitly; an unchecked send is silent mail loss.
- The React Email component goes in the `react` property of `emails.send` — never a hand-rolled HTML string.
- Every template is previewed in the react-email dev server before it's wired to a send.
- Email CSS is 2009-grade: style props only, table-safe components from `@react-email/components`, ≤600px container, hex colors (no oklch), system-stack font fallbacks. The design must hold when Gmail strips the web font.
- Transactional only: contact notifications, magic links, receipts, welcomes. No marketing machinery unless BRIEF.md demands it.
- When the brief includes a newsletter, its signup is double opt-in wherever the audience is in the DACH region: single opt-in (subscribing on submit) is unlawful advertising under German UWG §7, so the address joins the list only after a confirmation link is clicked. A form that's legal in the US can be illegal here — check the jurisdiction, not the UX convention.
## Process
1. Read design/BRIEF.md: which flows send mail? Contact form → notification to the team (and optionally a confirmation to the sender). Newsletter → double-opt-in confirmation (the footer's newsletter row wires to this, never a fire-and-subscribe action — see below). Auth → magic-link/verification templates for ultraweb:auth to call. Commerce → receipt. No flows → skip this skill entirely.
2. `npm i resend @react-email/components` and `npm i -D react-email`. Create `emails/` at the project root.
3. Write `emails/theme.ts`: SYSTEM.md tokens translated to email-safe values (oklch → hex, display font + system fallback stack).
4. Build one template per flow. Preview: `npx react-email dev --dir emails --port 3001` (3000 belongs to `next dev`). Iterate until it reads as this site's brand, not React Email's starter.
5. Write the lazy send helper; wire it into the server action per ultraweb:server-actions — failures return as state, never throw at the user.
6. Env: `RESEND_API_KEY` in .env.local and listed in .env.example. Dev sends use `onboarding@resend.dev` (delivers only to the account owner's address until a domain is verified); production requires a verified sending domain — prefer a subdomain (`mail.acme.com`) to isolate reputation.
## The send call
```ts
// lib/email.ts
import { Resend } from 'resend'
let client: Resend | null = null
export function getResend(): Resend {
if (!client) client = new Resend(process.env.RESEND_API_KEY) // lazy: builds pass without the key
return client
}
```
```ts
// inside app/actions/contact.ts, after zod validation (state shape per ultraweb:server-actions)
import { getResend } from '@/lib/email'
import ContactNotification from '@/emails/contact-notification'
const { data, error } = await getResend().emails.send({
from: 'Acme ',
to: 'team@acme.com',
replyTo: parsed.data.email, // team replies land with the sender
subject: `${parsed.data.name} — new inquiry`,
react: ContactNotification(parsed.data), // component in the react property; called as a fn so the action stays .ts
})
if (error) return { ok: false, errors: { form: ['Message not sent — try again or email us directly.'] } }
```
## Templates
```tsx
// emails/contact-notification.tsx
import { Html, Head, Preview, Body, Container, Text, Hr, Link } from '@react-email/components'
import { t } from './theme'
export default function ContactNotification({ name, email, message }: { name: string; email: string; message: string }) {
return (
{`${name}: ${message.slice(0, 80)}`}New inquiry{message}
{name} · {email}
)
}
```
```ts
// emails/theme.ts — SYSTEM.md translated for email clients: email CSS can't parse oklch
// and never sees globals.css. Read the hexes from lib/tokens.ts (ultraweb:tokens) — don't re-eyeball them.
export const t = {
bg: '#faf9f7', fg: '#1c1917', muted: '#78716c', border: '#e7e5e4', accent: '#0d7a68',
font: "'Söhne', -apple-system, 'Segoe UI', Helvetica, sans-serif", // display face + system stack
}
```
Rules:
- Hierarchy in miniature: one heading, one body block, one accent use — the restraint taste demands of a page, at 560px.
- `` is designed copy (the inbox's second line) — write it in the brief's voice, never let it default to the first template string.
- CTA buttons: `