Email Template Builder

What This Skill Does

This skill builds complete transactional email systems, including React Email templates, provider integration, and a preview server. It supports i18n, dark mode, spam optimization, and analytics tracking. It's ideal for engineering teams setting up or migrating transactional email infrastructure.

When to Use

• Set up transactional email for a new product.
• Migrate from a legacy email system.
• Add new email types (invoice, digest, notification).Debug email deliverability issues.
• Implement i18n for email templates.
• Optimize email templates for spam scores.

Key Features

• Builds React Email templates.
• Supports MJML templates for email client compatibility.
• Integrates with multiple email providers.
• Provides a local preview server with hot reload.
• Supports i18n/localization with typed translation keys.
• Offers spam score optimization checklist.

Email Template Builder

Tier: POWERFUL Category: Engineering Team Domain: Transactional Email / Communications Infrastructure

Overview

Build complete transactional email systems: React Email templates, provider integration, preview server, i18n support, dark mode, spam optimization, and analytics tracking. Output production-ready code for Resend, Postmark, Send Grid, or AWS SES.

Core Capabilities

React Email templates (welcome, verification, password reset, invoice, notification, digest) MJML templates for maximum email client compatibility Multi-provider support with unified sending interface Local preview server with hot reload i18n/localization with typed translation keys Dark mode support using media queries Spam score optimization checklist Open/click tracking with UTM parameters

When to Use

Setting up transactional email for a new product Migrating from a legacy email system Adding new email types (invoice, digest, notification) Debugging email deliverability issues Implementing i18n for email templates

Project Structure

emails/ ├── components/ │ ├── layout/ │ │ ├── email-layout.tsx # Base layout with brand header/footer │ │ └── email-button.tsx # CTA button component │ ├── partials/ │ │ ├── header.tsx │ │ └── footer.tsx ├── templates/ │ ├── welcome.tsx │ ├── verify-email.tsx │ ├── password-reset.tsx │ ├── invoice.tsx │ ├── notification.tsx │ └── weekly-digest.tsx ├── lib/ │ ├── send.ts # Unified send function │ ├── providers/ │ │ ├── resend.ts │ │ ├── postmark.ts │ │ └── ses.ts │ └── tracking.ts # UTM + analytics ├── i18n/ │ ├── en.ts │ └── de.ts └── preview/ # Dev preview server └── server.ts

Base Email Layout

// emails/components/layout/email-layout.tsx import { Body, Container, Head, Html, Img, Preview, Section, Text, Hr, Font } from "@react-email/components"

interface Email Layout Props { preview: string

• children: React.
• React Node. }

export function Email Layout({ preview, children }: Email Layout Props) { return (

<Html lang="en"> <Head> <Font font Family="Inter" fallback Font Family="Arial" web Font={{ url: "https://fonts.gstatic.com/s/inter/v13/Uc CO3Fwr K3i LTe Hu S_n VMr Mx Cp50Sj Iw2bo Kodu Km MEVu Lyf AZ9hi J-Ek-_Ee A.woff2", format: "woff2" }} font Weight={400} font Style="normal" /> {/ Dark mode styles /} <style>{ @media (prefers-color-scheme: dark) { .email-body { background-color: #0f0f0f !important; } .email-container { background-color: #1a1a1a !important; } .email-text { color: #e5e5e5 !important; } .email-heading { color: #ffffff !important; } .email-divider { border-color: #333333 !important; } } }</style> </Head> <Preview>{preview}</Preview> <Body class Name="email-body" style={styles.body}> <Container class Name="email-container" style={styles.container}> {/ Header /} <Section style={styles.header}> <Img src="https://yourapp.com/logo.png" width={120} height={40} alt="My App" /> </Section>

{/ Content /}

<Section style={styles.content}> {children} </Section>

{/ Footer /}

<Hr style={styles.divider} /> <Section style={styles.footer}> <Text style={styles.footer Text}> My App Inc. · 123 Main St · San Francisco, CA 94105 </Text> <Text style={styles.footer Text}> <a href="{{unsubscribe_url}}" style={styles.link}>Unsubscribe</a> {" · "} <a href="https://yourapp.com/privacy" style={styles.link}>Privacy Policy</a> </Text> </Section> </Container> </Body> </Html> ) }

const styles = { body: { background Color: "#f5f5f5", font Family: "Inter, Arial, sans-serif" }, container: { max Width: "600px", margin: "0 auto", background Color: "#ffffff", border Radius: "8px", overflow: "hidden" }, header: { padding: "24px 32px", border Bottom: "1px solid #e5e5e5" }, content: { padding: "32px" }, divider: { border Color: "#e5e5e5", margin: "0 32px" }, footer: { padding: "24px 32px" }, footer Text: { font Size: "12px", color: "#6b7280", text Align: "center" as const, margin: "4px 0" }, link: { color: "#6b7280", text Decoration: "underline" }, }

Welcome Email

// emails/templates/welcome.tsx import { Button, Heading, Text } from "@react-email/components" import { Email Layout } from "../components/layout/email-layout"

interface Welcome Email Props { name: "string" confirm Url: string trial Days?: number }

export function Welcome Email({ name, confirm Url, trial Days = 14 }: Welcome Email Props) { return ( <Email Layout preview={Welcome to My App, ${name}! Confirm your email to get started.}> <Heading style={styles.h1}>Welcome to My App, {name}!</Heading> <Text style={styles.text}> We're excited to have you on board. You've got {trial Days} days to explore everything My App has to offer — no credit card required. </Text> <Text style={styles.text}> First, confirm your email address to activate your account: </Text> <Button href={confirm Url} style={styles.button}> Confirm Email Address </Button> <Text style={styles.hint}> Button not working? Copy and paste this link into your browser: <br /> <a href={confirm Url} style={styles.link}>{confirm Url}</a> </Text> <Text style={styles.text}> Once confirmed, you can: </Text>

<ul style={styles.list}> <li>Connect your first project in 2 minutes</li> <li>Invite your team (free for up to 3 members)</li> <li>Set up Slack notifications</li> </ul> </Email Layout> ) }

export default Welcome Email

const styles = { h1: { font Size: "28px", font Weight: "700", color: "#111827", margin: "0 0 16px" }, text: { font Size: "16px", line Height: "1.6", color: "#374151", margin: "0 0 16px" }, button: { background Color: "#4f46e5", color: "#ffffff", border Radius: "6px", font Size: "16px", font Weight: "600", padding: "12px 24px", text Decoration: "none", display: "inline-block", margin: "8px 0 24px" }, hint: { font Size: "13px", color: "#6b7280" }, link: { color: "#4f46e5" }, list: { font Size: "16px", line Height: "1.8", color: "#374151", padding Left: "20px" }, }

Invoice Email

// emails/templates/invoice.tsx import { Row, Column, Section, Heading, Text, Hr, Button } from "@react-email/components" import { Email Layout } from "../components/layout/email-layout"

interface Invoice Item { description: string; amount: number }

interface Invoice Email Props { name: "string" invoice Number: string invoice Date: string due Date: string items: Invoice Item[] total: number currency: string down