Email Template Builder
Stand up production transactional email with React Email or MJML, wire Resend/Postmark/SendGrid/SES, and ship templates with preview, i18n, and deliverability checks.
Overview
Email Template Builder is an agent skill most often used in Build (also Ship and Grow) that produces complete transactional email systems with React Email or MJML, multi-provider sending, preview, i18n, and tracking.
Install
npx skills add https://github.com/alirezarezvani/claude-skills --skill email-template-builderWhat is this skill?
- React Email and MJML templates for welcome, verification, reset, invoice, notification, and digest flows
- Unified sending layer across Resend, Postmark, SendGrid, and AWS SES
- Local preview server with hot reload for template iteration
- Typed i18n keys, dark-mode media queries, and spam-score optimization checklist
- Open/click tracking with UTM parameters for lifecycle analytics
- Supports six core template families: welcome, verification, password reset, invoice, notification, and digest
- Documents four providers: Resend, Postmark, SendGrid, and AWS SES
Adoption & trust: 531 installs on skills.sh; 17.5k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need reliable transactional email but provider APIs, client rendering, localization, and deliverability rules are easy to get wrong in ad-hoc implementation.
Who is it for?
Solo builders shipping SaaS signup, billing, and notification email who want one guided pass from templates through Resend-class providers.
Skip if: Teams that only need a one-off marketing blast or already maintain a mature ESP with no migration, i18n, or template refactor goals.
When should I use this skill?
Adding transactional email to a new product, migrating between email providers, refactoring legacy templates for accessibility, or adding internationalization to existing templates.
What do I get? / Deliverables
After the skill runs you have production-ready templates, a unified provider integration, preview workflow, and optional analytics hooks ready to deploy with your auth and billing flows.
- React Email or MJML template set with preview server config
- Unified send module for chosen provider(s)
- i18n key map and deliverability checklist notes
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Build because the skill outputs sending code, provider adapters, and template projects—the core work happens while wiring product communications. Integrations fits best: multi-provider APIs, unified send interface, and provider migration are third-party connection work, not generic frontend polish alone.
Where it fits
Wire welcome and verification templates to Resend right after auth ships.
Add invoice and notification email types alongside billing webhooks.
Run spam-score and client-compat checks before a major onboarding email change.
Enable UTM-tracked links in digest emails to measure re-engagement.
How it compares
Use instead of stitching together React Email docs and four different provider SDKs without a shared send contract or deliverability checklist.
Common Questions / FAQ
Who is email-template-builder for?
Indie and solo builders adding or refactoring transactional email in web apps, especially when multiple providers, i18n, or accessibility matter.
When should I use email-template-builder?
During Build when wiring auth and billing emails; during Ship when fixing spam or client compatibility; during Grow when adding open/click UTM tracking to lifecycle messages.
Is email-template-builder safe to install?
Review the Security Audits panel on this Prism page and inspect generated code for provider API keys and sending permissions before deploying to production.
SKILL.md
READMESKILL.md - Email Template Builder
# 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, SendGrid, 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 ```tsx // emails/components/layout/email-layout.tsx import { Body, Container, Head, Html, Img, Preview, Section, Text, Hr, Font } from "@react-email/components" interface EmailLayoutProps { preview: string children: React.ReactNode } export function EmailLayout({ preview, children }: EmailLayoutProps) { return ( <Html lang="en"> <Head> <Font fontFamily="Inter" fallbackFontFamily="Arial" webFont={{ url: "https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2", format: "woff2" }} fontWeight={400} fontStyle="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 className="email-body" style={styles.body}> <Container className="email-container" style={styles.container}> {/* Header */} <Section style={styles.header}> <Img src="https://yourapp.com/logo.png" width={120} height={40} alt="MyApp" /> </Section> {/* Content */} <Section style={styles.content}> {children} </Section> {/* Footer */} <Hr style={styles.divider} />