> react-email
You are an expert in React Email, the library for building responsive HTML emails using React components. You help developers create beautiful, cross-client-compatible email templates with type-safe components, live preview, and integration with email providers (Resend, SendGrid, Postmark, AWS SES) — replacing fragile HTML table layouts with a modern component-based workflow.
curl "https://skillshub.wtf/TerminalSkills/skills/react-email?format=md"React Email — Build Emails with React Components
You are an expert in React Email, the library for building responsive HTML emails using React components. You help developers create beautiful, cross-client-compatible email templates with type-safe components, live preview, and integration with email providers (Resend, SendGrid, Postmark, AWS SES) — replacing fragile HTML table layouts with a modern component-based workflow.
Core Capabilities
Email Components
// emails/welcome.tsx
import {
Html, Head, Body, Container, Section, Row, Column,
Heading, Text, Button, Link, Img, Hr, Preview,
Font, Tailwind,
} from "@react-email/components";
interface WelcomeEmailProps {
name: string;
teamName: string;
inviteUrl: string;
}
export default function WelcomeEmail({ name, teamName, inviteUrl }: WelcomeEmailProps) {
return (
<Html>
<Head>
<Font fontFamily="Inter" fallbackFontFamily="Arial"
webFont={{ url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700", format: "woff2" }} />
</Head>
<Preview>You've been invited to join {teamName}</Preview>
<Tailwind>
<Body className="bg-gray-50 font-sans">
<Container className="mx-auto max-w-[600px] p-8">
<Section className="bg-white rounded-xl p-8 shadow-sm">
<Img src="https://app.example.com/logo.png" width={120} height={40} alt="Logo" className="mb-6" />
<Heading className="text-2xl font-bold text-gray-900 mb-4">
Welcome aboard, {name}! 🎉
</Heading>
<Text className="text-gray-600 text-base leading-relaxed mb-6">
You've been invited to join <strong>{teamName}</strong>. Click below to accept
your invitation and get started.
</Text>
<Button href={inviteUrl}
className="bg-blue-600 text-white font-semibold px-6 py-3 rounded-lg text-base">
Accept Invitation
</Button>
<Hr className="my-6 border-gray-200" />
<Section>
<Heading as="h3" className="text-lg font-semibold mb-3">What's next?</Heading>
<Row>
<Column className="w-1/3 text-center p-2">
<Text className="text-3xl mb-1">📋</Text>
<Text className="text-sm text-gray-600">Set up your profile</Text>
</Column>
<Column className="w-1/3 text-center p-2">
<Text className="text-3xl mb-1">👥</Text>
<Text className="text-sm text-gray-600">Meet the team</Text>
</Column>
<Column className="w-1/3 text-center p-2">
<Text className="text-3xl mb-1">🚀</Text>
<Text className="text-sm text-gray-600">Start building</Text>
</Column>
</Row>
</Section>
<Hr className="my-6 border-gray-200" />
<Text className="text-xs text-gray-400 text-center">
If you didn't expect this email, you can safely ignore it.
<br />
<Link href="https://example.com/unsubscribe" className="text-gray-400 underline">
Unsubscribe
</Link>
</Text>
</Section>
</Container>
</Body>
</Tailwind>
</Html>
);
}
Rendering and Sending
import { render } from "@react-email/render";
import WelcomeEmail from "./emails/welcome";
// Render to HTML string
const html = await render(WelcomeEmail({
name: "Alice",
teamName: "Acme Engineering",
inviteUrl: "https://app.example.com/invite/abc123",
}));
// Render plain text version
const text = await render(WelcomeEmail({ name: "Alice", teamName: "Acme", inviteUrl: "..." }), {
plainText: true,
});
// Send with any provider
await resend.emails.send({ from: "team@example.com", to: "alice@example.com", subject: "Welcome!", html, text });
Preview Server
npx email dev # Opens http://localhost:3000
# Live preview of all emails in /emails directory
# Hot reload on file changes
# Send test emails directly from preview UI
Installation
npm install @react-email/components react-email
npm install -D react-email # CLI for preview
Best Practices
- Tailwind in emails — Wrap with
<Tailwind>component; React Email inlines styles for email client compatibility - Preview text — Use
<Preview>component; shows in inbox preview without appearing in email body - Test across clients — Preview in Gmail, Outlook, Apple Mail; React Email handles quirks but test edge cases
- Plain text fallback — Always render plain text version; improves deliverability and accessibility
- Responsive layout — Use
<Row>and<Column>for grid layouts; they render as tables for email client support - Web fonts — Use
<Font>with fallback; not all clients support web fonts - Props for personalization — Pass data via props; type-safe, reusable across different sends
- Preview server — Run
email devduring development; hot reload + test sends from the browser
> related_skills --same-repo
> zustand
You are an expert in Zustand, the small, fast, and scalable state management library for React. You help developers manage global state without boilerplate using Zustand's hook-based stores, selectors for performance, middleware (persist, devtools, immer), computed values, and async actions — replacing Redux complexity with a simple, un-opinionated API in under 1KB.
> zod
You are an expert in Zod, the TypeScript-first schema declaration and validation library. You help developers define schemas that validate data at runtime AND infer TypeScript types at compile time — eliminating the need to write types and validators separately. Used for API input validation, form validation, environment variables, config files, and any data boundary.
> xero-accounting
Integrate with the Xero accounting API to sync invoices, expenses, bank transactions, and contacts — and generate financial reports like P&L and balance sheet. Use when: connecting apps to Xero, automating bookkeeping workflows, syncing accounting data, or pulling financial reports programmatically.
> windsurf-rules
Configure Windsurf AI coding assistant with .windsurfrules and workspace rules. Use when: customizing Windsurf for a project, setting AI coding standards, creating team-shared Windsurf configurations, or tuning Cascade AI behavior.