SKILL.md
Resend — Modern Email API for Developers
You are an expert in Resend, the developer-first email API. You help developers send transactional and marketing emails using React Email templates, TypeScript SDK, webhooks for delivery tracking, batch sending, and audience management — replacing legacy email services (SendGrid, Mailgun) with a modern, type-safe developer experience.
Core Capabilities
Sending Emails
import { Resend } from "resend";
import { WelcomeEmail } from "@/emails/welcome";
const resend = new Resend(process.env.RESEND_API_KEY);
// Send with React Email template
const { data, error } = await resend.emails.send({
from: "Acme <[email protected]>",
to: "[email protected]",
subject: "Welcome to Acme",
react: WelcomeEmail({ name: "Alice", loginUrl: "https://app.acme.com" }),
});
// Send with HTML
await resend.emails.send({
from: "Acme <[email protected]>",
to: ["[email protected]", "[email protected]"],
cc: "[email protected]",
bcc: "[email protected]",
subject: "Your invoice",
html: "<h1>Invoice #123</h1><p>Amount: $99.99</p>",
attachments: [{
filename: "invoice.pdf",
content: pdfBuffer,
}],
tags: [
{ name: "category", value: "billing" },
{ name: "user_id", value: "usr-42" },
],
});
// Batch send
const { data } = await resend.batch.send([
{ from: "[email protected]", to: "[email protected]", subject: "Digest", react: DigestEmail({ items: user1Items }) },
{ from: "[email protected]", to: "[email protected]", subject: "Digest", react: DigestEmail({ items: user2Items }) },
]);
// Schedule
await resend.emails.send({
from: "[email protected]",
to: "[email protected]",
subject: "Reminder",
react: ReminderEmail({}),
scheduledAt: "2026-03-15T09:00:00Z", // Send at specific time
});React Email Templates
// emails/welcome.tsx — Type-safe email templates
import { Html, Head, Body, Container, Heading, Text, Button, Hr, Img } from "@react-email/components";
interface WelcomeEmailProps {
name: string;
loginUrl: string;
}
export function WelcomeEmail({ name, loginUrl }: WelcomeEmailProps) {
return (
<Html>
<Head />
<Body style={{ fontFamily: "Arial, sans-serif", backgroundColor: "#f4f4f5" }}>
<Container style={{ maxWidth: 600, margin: "0 auto", padding: 20, backgroundColor: "#fff" }}>
<Img src="https://acme.com/logo.png" width={120} height={40} alt="Acme" />
<Heading as="h1">Welcome, {name}!</Heading>
<Text>Thanks for signing up. Get started by logging in:</Text>
<Button
href={loginUrl}
style={{ backgroundColor: "#000", color: "#fff", padding: "12px 24px", borderRadius: 6 }}>
Get Started
</Button>
<Hr />
<Text style={{ fontSize: 12, color: "#666" }}>
If you didn't create this account, ignore this email.
</Text>
</Container>
</Body>
</Html>
);
}
// Preview: npx email dev (opens browser preview at localhost:3000)Installation
npm install resend
npm install @react-email/components react-email # For templates
npx email dev # Preview templatesBest Practices
- React Email templates — Build emails with React components; type-safe, previewable, reusable
- Tags for analytics — Add tags to every email; track delivery rates by category, campaign, user segment
- Webhooks for tracking — Set up webhooks for delivered/bounced/complained events; update user records
- Batch for volume — Use
batch.sendfor newsletters/digests; up to 100 emails per batch call - Domain verification — Verify your sending domain with DNS records (SPF, DKIM, DMARC); improves deliverability
- Preview before send — Use
npx email devto preview templates in the browser; iterate fast - Scheduled sends — Use
scheduledAtfor time-zone-aware delivery; better open rates - Error handling — Check
errorin response; handle bounces gracefully, update user preferences