Engineering EmailReactTemplates

Email Template Builder

Build transactional email systems with React Email, provider integration, and i18n.

Install for

Real Conversations

See how the Email Template Builder skill responds to actual requests. These are representative examples of what your AI agent will produce.

You

Need a welcome email for our SaaS using React Email + Resend. Logo, CTA button, and must render correctly in Gmail, Outlook, and Apple Mail.

Agent

React Email Welcome Template:

import { Html, Head, Body, Container, Img, Text, Button, Hr, Link } from '@react-email/components';

export default function WelcomeEmail({ firstName, ctaUrl }: Props) {
  return (
    <Html>
      <Head />
      <Body style={{ fontFamily: 'system-ui, sans-serif', background: '#f9fafb' }}>
        <Container style={{ maxWidth: '560px', margin: '40px auto', background: '#fff', borderRadius: '8px', padding: '40px' }}>
          <Img src="https://yourapp.com/logo.png" width="120" height="40" alt="YourApp" />
          <Text style={{ fontSize: '24px', fontWeight: 'bold', marginTop: '24px' }}>Welcome, {firstName}!</Text>
          <Text style={{ color: '#6b7280', lineHeight: '1.6' }}>Your account is ready. Click below to complete your setup.</Text>
          <Button href={ctaUrl} style={{ background: '#6366f1', color: '#fff', padding: '12px 24px', borderRadius: '6px', display: 'inline-block', marginTop: '16px' }}>Get Started</Button>
          <Hr style={{ margin: '32px 0', borderColor: '#e5e7eb' }} />
          <Text style={{ fontSize: '12px', color: '#9ca3af' }}>You received this because you signed up at yourapp.com.</Text>
        </Container>
      </Body>
    </Html>
  );
}

Send with Resend:

await resend.emails.send({
  from: '[email protected]',
  to: user.email,
  subject: `Welcome to YourApp, ${firstName}!`,
  react: WelcomeEmail({ firstName, ctaUrl: 'https://app.yourapp.com/onboarding' }),
});

Client compatibility:

Gmail clips HTML >102KB — keep under 90KB
Outlook ignores border-radius — accept square buttons or use VML fallback
Apple Mail: test dark mode with @media (prefers-color-scheme: dark) override

You

Need a password reset email using SendGrid. Token expires in 15 min, needs a plain-text fallback, and SendGrid shouldn't rewrite the reset URL.

Agent

Password Reset Template:

export default function PasswordResetEmail({ resetUrl, expiresInMinutes = 15 }: Props) {
  return (
    <Html>
      <Body style={body}>
        <Container style={container}>
          <Text style={heading}>Reset your password</Text>
          <Text style={paragraph}>
            This link expires in <strong>{expiresInMinutes} minutes</strong>.
          </Text>
          <Button href={resetUrl} style={button}>Reset Password</Button>
          <Text style={small}>Or copy this URL: <Link href={resetUrl}>{resetUrl}</Link></Text>
          <Text style={small}>If you didn't request this, ignore this email.</Text>
        </Container>
      </Body>
    </Html>
  );
}

SendGrid send with plain-text fallback:

const plainText = `Reset your password\n\nLink (expires in 15 min):\n${resetUrl}\n\nIf you didn't request this, ignore this email.`;

await sgMail.send({
  to: user.email,
  from: { email: '[email protected]', name: 'YourApp' },
  subject: 'Reset your YourApp password',
  html: render(PasswordResetEmail({ resetUrl })),
  text: plainText,
  trackingSettings: { clickTracking: { enable: false } },
});

Critical: clickTracking: false prevents SendGrid from rewriting your URL — essential because HMAC-signed reset tokens break when the URL is modified.

Plain-text fallback also improves deliverability scores with spam filters that penalize HTML-only transactional mail.

You

Customers in US, Germany, and Japan need invoice emails with correct date formats, currency symbols, and decimal conventions. Using React Email.

Agent

i18n Invoice Email Architecture:

// lib/emailI18n.ts
const localeConfig: Record<string, { currency: string; dir: 'ltr' | 'rtl' }> = {
  'en-US': { currency: 'USD', dir: 'ltr' },
  'de-DE': { currency: 'EUR', dir: 'ltr' },
  'ja-JP': { currency: 'JPY', dir: 'ltr' },
};

export function formatInvoiceDate(date: Date, locale: string) {
  return new Intl.DateTimeFormat(locale, { dateStyle: 'long' }).format(date);
  // en-US: "January 15, 2025" | de-DE: "15. Januar 2025" | ja-JP: "2025年1月15日"
}

export function formatCurrency(amountCents: number, locale: string) {
  const { currency } = localeConfig[locale];
  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(amountCents / 100);
  // en-US: "$49.00" | de-DE: "49,00 €" | ja-JP: "¥4,900"
}

Template usage:

<Text>{formatCurrency(invoice.totalCents, locale)}</Text>
<Text>{formatInvoiceDate(invoice.date, locale)}</Text>

Gotchas:

JPY has no decimal places — Intl.NumberFormat handles this automatically, no manual rounding needed
German invoices legally require: invoice number, seller tax ID, VAT line item breakdown
Outlook ignores dir="rtl" — use explicit text-align: right inline style for future Arabic support

Get Started

How to install and use this skill in your preferred environment.

Skills are designed for AI coding agents (Claude Code, Cursor, Windsurf) and IDE-based workflows where the agent can read files, run scripts, and act on your codebase.

Models & Context

Which AI models and context windows work best with this skill.

Recommended Models

Best

Claude Opus 4.8 Claude Sonnet 4 GPT-4.1 Gemini 2.5 Pro Grok 3 Kimi K2

Good

Claude Haiku 4.5 GPT-4.1 mini Gemini 2.5 Flash Grok 3 mini

Larger models produce more detailed, production-ready outputs.

Context Window

This skill's SKILL.md is typically 3–10 KB — fits in any modern context window.

8K Skill only

32K+ Skill + conversation

100K+ Skill + references + codebase

All current frontier models support 100K+ context.

Pro tips for best results

1

Be specific

Include numbers — users, budget, RPS — so the skill can size the architecture.

2

Share constraints

Compliance needs, team size, and existing stack all improve the output.

3

Iterate

Start with a high-level design, then ask follow-ups for IaC, cost analysis, or security review.

4

Combine skills

Pair with companion skills below for end-to-end coverage.

Ready to try Email Template Builder?

Install the skill and start getting expert-level guidance in your workflow — any agent, any IDE.

Install for

← Browse all skills

Email Template Builder

Real Conversations

Get Started

Claude Code, OpenCode, or any CLI agent

Cursor, Windsurf, or IDE-based agents

Claude.ai, ChatGPT, Gemini, or any web AI

Models & Context

Recommended Models

Context Window

Pro tips for best results

Ready to try Email Template Builder?