--- name: api-email-resend-react-email description: Resend + React Email templates --- # Email Patterns with Resend and React Email > **Quick Guide:** Use Resend for transactional emails with React Email templates. Server-side sending for reliability, async for non-blocking requests, typed templates for safety. Always await render() before send, handle errors with retry logic, and include unsubscribe links for marketing emails. --- ## CRITICAL: Before Using This Skill > **All code must follow project conventions in CLAUDE.md** (kebab-case, named exports, import ordering, `import type`, named constants) **(You MUST await `render()` before passing HTML to resend.emails.send() - render returns a Promise)** **(You MUST handle Resend API errors and implement retry logic for transient failures)** **(You MUST use server-side sending for all emails - never expose RESEND_API_KEY to the client)** **(You MUST include unsubscribe links in marketing\/notification emails - required for CAN-SPAM compliance)** **(You MUST use typed props interfaces for all email templates - enables compile-time validation)** <\/critical_requirements> --- **Auto-detection:** Resend, React Email, @react-email\/components, resend.emails.send, email template, transactional email, verification email, password reset email, notification email, email rendering **When to use:** - Sending transactional emails (verification, password reset, receipts) - Creating React Email templates with Tailwind styling - Integrating email sending with authentication flows - Building notification systems with email delivery - Implementing email tracking and analytics **When NOT to use:** - Initial Resend setup (use `setup\/resend.md` skill) - Marketing campaign management (use dedicated marketing tools) - SMS or push notifications (different services) - Email list management (use Resend Audiences or marketing tools) **Key patterns covered:** - React Email template patterns with Tailwind - Sending with error handling and retry - Authentication integration (verification, password reset) - Async email sending patterns - Email tracking (opens, clicks) - Batch sending for notifications - Type-safe email props - Testing templates locally - Unsubscribe and preferences handling - Scheduled email sending (up to 30 days in advance) - Idempotency keys for duplicate prevention - Tags for analytics and campaign tracking **Detailed Resources:** - For code examples, see [examples\/](examples\/) folder: - [core.md](examples\/core.md) - Template structure, basic sending (start here) - [templates.md](examples\/templates.md) - Password Reset, Notification templates - [retry.md](examples\/retry.md) - Retry logic with exponential backoff - [async-batch.md](examples\/async-batch.md) - Async sending, batch API - [auth-integration.md](examples\/auth-integration.md) - Auth system integration - [webhooks.md](examples\/webhooks.md) - Webhook handler for tracking - [preferences.md](examples\/preferences.md) - Unsubscribe, email preferences - [testing.md](examples\/testing.md) - Template testing patterns - [advanced-features.md](examples\/advanced-features.md) - Scheduled sending, idempotency keys, tags - For decision frameworks and anti-patterns, see [reference.md](reference.md) --- ## Philosophy Email in modern applications follows a **server-side, template-driven** approach. React Email brings component patterns to email development, while Resend handles reliable delivery. **Core principles:** 1. **Server-side only** - Never expose API keys to clients 2. **Typed templates** - Props interfaces catch errors at compile time 3. **Reliable delivery** - Error handling with retry logic 4. **Non-blocking** - Async sending for request-response patterns **When to send emails:** - User authentication events (verification, password reset, 2FA) - Transactional confirmations (purchases, signups, invitations) - Important notifications (security alerts, account changes) - Team collaboration (invites, mentions, updates) **When NOT to send emails:** - Every minor action (creates email fatigue) - Marketing without consent (spam, illegal) - Real-time alerts (use push notifications) - In-app actions (show in-app notifications instead) <\/philosophy> --- ## Core Patterns ### Pattern 1: Email Template Structure Create well-structured email templates with proper typing. ```typescript \/\/ packages\/emails\/src\/templates\/welcome-email.tsx import { Button, Heading, Link, Text } from "@react-email\/components"; import { BaseLayout } from "..\/layouts\/base-layout"; const CTA_PADDING_X = 24; const CTA_PADDING_Y = 12; \/\/ Always define props interface interface WelcomeEmailProps { userName: string; loginUrl: string; features?: string[]; } export function WelcomeEmail({ userName, loginUrl, features = [], }: WelcomeEmailProps) { return ( Welcome to Your App! <\/Heading> Hi {userName},<\/Text> Thanks for joining! We're excited to have you on board. <\/Text> {features.length > 0 && ( <> Here's what you can do: <\/Text>

{feature} <\/li> ))} <\/ul> <\/> )}