What is create-email?

This Claude skill streamlines the development and deployment of professional email systems by integrating React Email with the Resend API. It enables developers to build responsive, component-based email templates and implement a clean, three-layer architecture for reliable transactional email delivery, including welcome messages, notifications, and password resets.

When should I use create-email?

create-email is useful in the following scenarios: • Designing and previewing responsive transactional email templates using React components instead of legacy HTML tables. • Implementing automated system notifications such as order confirmations, password resets, and account verification links. • Setting up a scalable email model layer to separate business logic from API implementation, ensuring maintainable code. • Integrating high-deliverability email sending capabilities into web applications via the Resend SDK with built-in support for batch sending. • Streamlining local development workflows by using preview tools to iterate on email designs before going live.

name	create-email
description	Create email templates with React Email and Resend integration. Use when building transactional emails, notification templates, or integrating email sending functionality.

Create Email

Creates email templates using React Email and sends them via Resend, following Iridium's three-layer architecture.

When to Use

Creating transactional email templates (welcome, password reset, notifications)
Adding email sending functionality to routes
Integrating email with webhooks or actions
User asks to "send email", "create email template", or "add notifications"

Architecture

Client/Server Code
    ↓
Model Layer (app/models/email.server.ts)
    ↓
Resend SDK (app/lib/resend.server.ts)

Never call Resend SDK directly in routes. Always use model layer functions.

Step 1: Create Email Template

Location: app/emails/[template-name].tsx

// app/emails/order-confirmation.tsx
import {
    Body,
    Button,
    Container,
    Head,
    Heading,
    Html,
    Preview,
    Text,
} from '@react-email/components';

interface OrderConfirmationProps {
    customerName: string;
    orderNumber: string;
    orderUrl: string;
}

export default function OrderConfirmation({
    customerName,
    orderNumber,
    orderUrl,
}: OrderConfirmationProps) {
    return (
        <Html>
            <Head />
            <Preview>Your order #{orderNumber} has been confirmed</Preview>
            <Body style={main}>
                <Container style={container}>
                    <Heading style={heading}>Order Confirmed!</Heading>
                    <Text style={text}>Hi {customerName},</Text>
                    <Text style={text}>
                        Your order #{orderNumber} has been confirmed.
                    </Text>
                    <Button href={orderUrl} style={button}>
                        View Order
                    </Button>
                </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',
    borderRadius: '4px',
};

const heading = {
    fontSize: '24px',
    fontWeight: 'bold',
    marginBottom: '20px',
};

const text = {
    fontSize: '16px',
    lineHeight: '24px',
    marginBottom: '16px',
};

const button = {
    backgroundColor: '#5046e5',
    borderRadius: '4px',
    color: '#fff',
    fontSize: '16px',
    textDecoration: 'none',
    padding: '12px 24px',
    display: 'inline-block',
};

Step 2: Add Model Layer Function

Location: app/models/email.server.ts

import { render } from '@react-email/components';
import OrderConfirmation from '~/emails/order-confirmation';
import { sendEmail } from './email.server';

export async function sendOrderConfirmation({
    to,
    customerName,
    orderNumber,
    orderUrl,
}: {
    to: string;
    customerName: string;
    orderNumber: string;
    orderUrl: string;
}) {
    const html = await render(
        OrderConfirmation({
            customerName,
            orderNumber,
            orderUrl,
        }),
    );

    return sendEmail({
        to,
        subject: `Order Confirmation #${orderNumber}`,
        html,
    });
}

Step 3: Use in Routes

import type { Route } from './+types/order';
import { sendOrderConfirmation } from '~/models/email.server';

export async function action({ request }: Route.ActionArgs) {
    const user = await requireUser(request);
    const order = await createOrder(data);

    // Send confirmation email
    await sendOrderConfirmation({
        to: user.email,
        customerName: user.name,
        orderNumber: order.id,
        orderUrl: `${process.env.BETTER_AUTH_URL}/orders/${order.id}`,
    });

    return data({ success: true });
}

Existing Model Layer Functions

Available in app/models/email.server.ts:

Function	Purpose
`sendEmail(options)`	Send raw HTML/text email
`sendVerificationEmail({ to, verificationUrl })`	BetterAuth verification
`sendPasswordResetEmail({ to, resetUrl })`	BetterAuth password reset
`sendWelcomeEmail({ to, userName, dashboardUrl })`	Onboarding
`sendTransactionalEmail({ to, heading, message })`	Generic notifications
`sendBatchEmails(emails)`	Bulk sending

Environment Variables

RESEND_API_KEY="re_your-resend-api-key-here"
RESEND_FROM_EMAIL="noreply@yourdomain.com"  # Optional

Testing Locally

# Preview templates
npx react-email dev

Use onboarding@resend.dev as sender during development.

Anti-Patterns

Calling resend.emails.send() directly in routes
Sending emails without user authentication
Exposing API keys with VITE_ prefix
Sending unvalidated recipient addresses
Missing error handling for email failures

Full Reference

See .github/instructions/resend.instructions.md for comprehensive documentation.

create-email

When & Why to Use This Skill

Use Cases