Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Get Started Free →

Email Template Builder · LeoYeAI | DecimalAI

Email Template Builder

SkillScore36Maintained

email-template-builder

Email Template Builder

Frontendby LeoYeAI

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/email-template-builder/SKILL.md

decimalai skills pull email-template-builder --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/email-template-builder/SKILL.md https://app.decimal.ai/s/email-template-builder/SKILL.md

Raw file: /s/email-template-builder/SKILL.md ↗ · machine-readable summary at /s/email-template-builder.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 56d ago

Yes — +32% lift · at higher cost+168% tokens0% turns36% of whole cases pass with skill (8/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-11	✗→✓	▲ Improved	—	—
case-02	✗→✓	▲ Improved	—	—
case-07	✗→✓	▲ Improved	—	—
case-14	✗→✓	▲ Improved	—	—
case-20	✗→✓	▲ Improved	—	—

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 7/30/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

LeoYeAI / openclaw-master-skills

skills/email-template-builder/SKILL.md

View on GitHub ↗

License MIT LicenseImported 8/2/2026Version v1

Skill contents

SKILL.md

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} />
          <Section style={styles.footer}>
            <Text style={styles.footerText}>
              MyApp Inc. · 123 Main St · San Francisco, CA 94105
            </Text>
            <Text style={styles.footerText}>
              <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: { backgroundColor: "#f5f5f5", fontFamily: "Inter, Arial, sans-serif" },
  container: { maxWidth: "600px", margin: "0 auto", backgroundColor: "#ffffff", borderRadius: "8px", overflow: "hidden" },
  header: { padding: "24px 32px", borderBottom: "1px solid #e5e5e5" },
  content: { padding: "32px" },
  divider: { borderColor: "#e5e5e5", margin: "0 32px" },
  footer: { padding: "24px 32px" },
  footerText: { fontSize: "12px", color: "#6b7280", textAlign: "center" as const, margin: "4px 0" },
  link: { color: "#6b7280", textDecoration: "underline" },
}

Welcome Email

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

interface WelcomeEmailProps {
  name: "string"
  confirmUrl: string
  trialDays?: number
}

export function WelcomeEmail({ name, confirmUrl, trialDays = 14 }: WelcomeEmailProps) {
  return (
    <EmailLayout preview={`Welcome to MyApp, ${name}! Confirm your email to get started.`}>
      <Heading style={styles.h1}>Welcome to MyApp, {name}!</Heading>
      <Text style={styles.text}>
        We're excited to have you on board. You've got {trialDays} days to explore everything MyApp has to offer — no credit card required.
      </Text>
      <Text style={styles.text}>
        First, confirm your email address to activate your account:
      </Text>
      <Button href={confirmUrl} 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={confirmUrl} style={styles.link}>{confirmUrl}</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>
    </EmailLayout>
  )
}

export default WelcomeEmail

const styles = {
  h1: { fontSize: "28px", fontWeight: "700", color: "#111827", margin: "0 0 16px" },
  text: { fontSize: "16px", lineHeight: "1.6", color: "#374151", margin: "0 0 16px" },
  button: { backgroundColor: "#4f46e5", color: "#ffffff", borderRadius: "6px", fontSize: "16px", fontWeight: "600", padding: "12px 24px", textDecoration: "none", display: "inline-block", margin: "8px 0 24px" },
  hint: { fontSize: "13px", color: "#6b7280" },
  link: { color: "#4f46e5" },
  list: { fontSize: "16px", lineHeight: "1.8", color: "#374151", paddingLeft: "20px" },
}

Invoice Email

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

interface InvoiceItem { description: string; amount: number }

interface InvoiceEmailProps {
  name: "string"
  invoiceNumber: string
  invoiceDate: string
  dueDate: string
  items: InvoiceItem[]
  total: number
  currency: string
  downloadUrl: string
}

export function InvoiceEmail({ name, invoiceNumber, invoiceDate, dueDate, items, total, currency = "USD", downloadUrl }: InvoiceEmailProps) {
  const formatter = new Intl.NumberFormat("en-US", { style: "currency", currency })

  return (
    <EmailLayout preview={`Invoice ${invoiceNumber} - ${formatter.format(total / 100)}`}>
      <Heading style={styles.h1}>Invoice #{invoiceNumber}</Heading>
      <Text style={styles.text}>Hi {name},</Text>
      <Text style={styles.text}>Here's your invoice from MyApp. Thank you for your continued support.</Text>

      {/* Invoice Meta */}
      <Section style={styles.metaBox}>
        <Row>
          <Column><Text style={styles.metaLabel}>Invoice Date</Text><Text style={styles.metaValue}>{invoiceDate}</Text></Column>
          <Column><Text style={styles.metaLabel}>Due Date</Text><Text style={styles.metaValue}>{dueDate}</Text></Column>
          <Column><Text style={styles.metaLabel}>Amount Due</Text><Text style={styles.metaValueLarge}>{formatter.format(total / 100)}</Text></Column>
        </Row>
      </Section>

      {/* Line Items */}
      <Section style={styles.table}>
        <Row style={styles.tableHeader}>
          <Column><Text style={styles.tableHeaderText}>Description</Text></Column>
          <Column><Text style={{ ...styles.tableHeaderText, textAlign: "right" }}>Amount</Text></Column>
        </Row>
        {items.map((item, i) => (
          <Row key={i} style={i % 2 === 0 ? styles.tableRowEven : styles.tableRowOdd}>
            <Column><Text style={styles.tableCell}>{item.description}</Text></Column>
            <Column><Text style={{ ...styles.tableCell, textAlign: "right" }}>{formatter.format(item.amount / 100)}</Text></Column>
          </Row>
        ))}
        <Hr style={styles.divider} />
        <Row>
          <Column><Text style={styles.totalLabel}>Total</Text></Column>
          <Column><Text style={styles.totalValue}>{formatter.format(total / 100)}</Text></Column>
        </Row>
      </Section>

      <Button href={downloadUrl} style={styles.button}>Download PDF Invoice</Button>
    </EmailLayout>
  )
}

export default InvoiceEmail

const styles = {
  h1: { fontSize: "24px", fontWeight: "700", color: "#111827", margin: "0 0 16px" },
  text: { fontSize: "15px", lineHeight: "1.6", color: "#374151", margin: "0 0 12px" },
  metaBox: { backgroundColor: "#f9fafb", borderRadius: "8px", padding: "16px", margin: "16px 0" },
  metaLabel: { fontSize: "12px", color: "#6b7280", fontWeight: "600", textTransform: "uppercase" as const, margin: "0 0 4px" },
  metaValue: { fontSize: "14px", color: "#111827", margin: 0 },
  metaValueLarge: { fontSize: "20px", fontWeight: "700", color: "#4f46e5", margin: 0 },
  table: { width: "100%", margin: "16px 0" },
  tableHeader: { backgroundColor: "#f3f4f6", borderRadius: "4px" },
  tableHeaderText: { fontSize: "12px", fontWeight: "600", color: "#374151", padding: "8px 12px", textTransform: "uppercase" as const },
  tableRowEven: { backgroundColor: "#ffffff" },
  tableRowOdd: { backgroundColor: "#f9fafb" },
  tableCell: { fontSize: "14px", color: "#374151", padding: "10px 12px" },
  divider: { borderColor: "#e5e5e5", margin: "8px 0" },
  totalLabel: { fontSize: "16px", fontWeight: "700", color: "#111827", padding: "8px 12px" },
  totalValue: { fontSize: "16px", fontWeight: "700", color: "#111827", textAlign: "right" as const, padding: "8px 12px" },
  button: { backgroundColor: "#4f46e5", color: "#fff", borderRadius: "6px", padding: "12px 24px", fontSize: "15px", fontWeight: "600", textDecoration: "none" },
}

Unified Send Function

typescript
// emails/lib/send.ts
import { Resend } from "resend"
import { render } from "@react-email/render"
import { WelcomeEmail } from "../templates/welcome"
import { InvoiceEmail } from "../templates/invoice"
import { addTrackingParams } from "./tracking"

const resend = new Resend(process.env.RESEND_API_KEY)

type EmailPayload =
  | { type: "welcome"; props: Parameters<typeof WelcomeEmail>[0] }
  | { type: "invoice"; props: Parameters<typeof InvoiceEmail>[0] }

export async function sendEmail(to: string, payload: EmailPayload) {
  const templates = {
    welcome: { component: WelcomeEmail, subject: "Welcome to MyApp — confirm your email" },
    invoice: { component: InvoiceEmail, subject: `Invoice from MyApp` },
  }

  const template = templates[payload.type]
  const html = render(template.component(payload.props as any))
  const trackedHtml = addTrackingParams(html, { campaign: payload.type })

  const result = await resend.emails.send({
    from: "MyApp <hello@yourapp.com>",
    to,
    subject: template.subject,
    html: trackedHtml,
    tags: [{ name: "email-type", value: payload.type }],
  })

  return result
}

Preview Server Setup

typescript
// package.json scripts
{
  "scripts": {
    "email:dev": "email dev --dir emails/templates --port 3001",
    "email:build": "email export --dir emails/templates --outDir emails/out"
  }
}

// Run: npm run email:dev
// Opens: http://localhost:3001
// Shows all templates with live preview and hot reload

i18n Support

typescript
// emails/i18n/en.ts
export const en = {
  welcome: {
    preview: (name: "string-welcome-to-myapp-name"
    heading: (name: "string-welcome-to-myapp-name"
    body: (days: number) => `You've got ${days} days to explore everything.`,
    cta: "Confirm Email Address",
  },
}

// emails/i18n/de.ts
export const de = {
  welcome: {
    preview: (name: "string-willkommen-bei-myapp-name"
    heading: (name: "string-willkommen-bei-myapp-name"
    body: (days: number) => `Du hast ${days} Tage Zeit, alles zu erkunden.`,
    cta: "E-Mail-Adresse bestätigen",
  },
}

// Usage in template
import { en, de } from "../i18n"
const t = locale === "de" ? de : en

Spam Score Optimization Checklist

] Sender domain has SPF, DKIM, and DMARC records configured
] From address uses your own domain (not gmail.com/hotmail.com)
] Subject line under 50 characters, no ALL CAPS, no "FREE!!!"
] Text-to-image ratio: at least 60% text
] Plain text version included alongside HTML
] Unsubscribe link in every marketing email (CAN-SPAM, GDPR)
] No URL shorteners — use full branded links
] No red-flag words: "guarantee", "no risk", "limited time offer" in subject
] Single CTA per email — no 5 different buttons
] Image alt text on every image
] HTML validates — no broken tags
] Test with Mail-Tester.com before first send (target: 9+/10)

Analytics Tracking

typescript
// emails/lib/tracking.ts
interface TrackingParams {
  campaign: string
  medium?: string
  source?: string
}

export function addTrackingParams(html: string, params: TrackingParams): string {
  const utmString = new URLSearchParams({
    utm_source: params.source ?? "email",
    utm_medium: params.medium ?? "transactional",
    utm_campaign: params.campaign,
  }).toString()

  // Add UTM params to all links in the email
  return html.replace(/href="(https?:\/\/[^"]+)"/g, (match, url) => {
    const separator = url.includes("?") ? "&" : "?"
    return `href="${url}${separator}${utmString}"`
  })
}

Common Pitfalls

Inline styles required — most email clients strip <head> styles; React Email handles this
Max width 600px — anything wider breaks on Gmail mobile
No flexbox/grid — use <Row> and <Column> from react-email, not CSS grid
Dark mode media queries — must use !important to override inline styles
Missing plain text — all major providers have a plain text field; always populate it
Transactional vs marketing — use separate sending domains/IPs to protect deliverability

Illustrative Want to see what email-template-builder would put in front of your model? Preview the rendered body and check its trigger phrases — no LLM call, no signup.

Latest benchmark · publisher runVerified

7/27/2026, 10:00 UTC · 22 cases

Lift

+32%

36% vs 5%

Agent turns

0%

1.0 vs 1.0

Tokens

+168%

7,121.45 vs 2,658.23

fail → pass · 7pass → pass · 1fail → fail · 14

Per-case results (22)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-08 We are organizing our transactional email codebase in a TypeScript project. Where should templates, sending logic, components, and translation files be stored in the repository folder structure?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-22 In a React Email invoice component, line item prices and total amounts are provided as integer cents. How should these numeric amounts be processed prior to formatting with Intl.NumberFormat?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-09 We want to write a TypeScript module for dispatching transactional templates. Should the sending logic expose separate functions like sendWelcomeEmail() and sendInvoiceEmail(), or a unified dispatcher handling type-discriminated payloads?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-13 When defining dark mode media queries in the style block inside the email Head component, how should dark mode rules override inline styles?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-12 When building a link tracking utility for transactional email links, what default utm_source and utm_medium values should be assigned if non-overridden?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-18 When styling a call-to-action button in a React Email welcome template, what display CSS property should be applied to the inline button styles for consistent email client rendering?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-11 What specific npm package scripts and CLI arguments should be defined in package.json for launching the local template development server and exporting static builds?	fail→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-19 When transmitting HTML email bodies through transactional cloud providers, what requirement applies to plain text representation?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-02 Our team needs to support internationalized transactional emails with automated campaign tracking. Could you supply a React Email layout featuring dark mode styling, localized dictionary files for English and German, and a utility function that appends UTM tags to external links inside HTML templates?	fail→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-06 We are designing a 5-step drip marketing campaign sequence to nurture leads who downloaded our whitepaper. What copy strategy and timing interval should we use for each email step?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-21 When invoking the API client send method in emails/lib/send.ts, how should metadata tags be formatted to classify the email category on the provider platform?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-07 When building a responsive email container component for cross-client compatibility, developers often set max-width to 800px or use CSS Grid. What maximum container width and layout approach should be enforced for maximum email client compatibility?	fail→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-04 We received an HTTP POST payload from Postmark's inbound email webhook containing incoming user replies. How should our Node.js API endpoint parse the incoming JSON payload to extract the sender address, subject, and text body?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-14 What compliance links and dynamic placeholder tokens must be included in the footer section of the base email layout?	fail→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-05 I need to configure DNS records in AWS Route53 for SPF and DMARC to secure sending emails from mail.example.com. What exact TXT record values should be added to the zone file?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-10 We are creating a tabular invoice component displaying line items and amounts. What React Email components should be used to construct table rows and cells rather than standard HTML tables or flexboxes?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-20 How should English and German translation files in emails/i18n format dynamic copy items that depend on runtime arguments like user names or trial duration numbers?	fail→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-17 In our base layout component, we want to configure the Inter web font with fallbacks. How should the font component be defined within the document head?	fail→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-01 I need to set up transactional email templates for our SaaS product using React Email. Please provide complete React Email code for a general email layout component, a welcome email template, an invoice template, and a TypeScript sending wrapper function that processes tracking parameters before dispatching through our email provider.	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-03 We are preparing to launch email sending capabilities and need a deliverability checklist, preview server configuration scripts, and an invoice template with line items built using React Email components. Please output the configuration scripts for running local previews, a deliverability/spam optimization guide, and the corresponding React components.	fail→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-15 In an automated email deliverability checklist, what minimum percentage threshold of text relative to visual images should be required to pass anti-spam checks?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-16 What constraints regarding subject line character count and letter case formatting should be documented in the email deliverability guide?	pass→pass	—	—	—	—	—	—	—	—	—	—	—	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +32 percentage points is the difference between those two pass rates over the 22 comparable cases. 1 case got worse with the skill loaded, and it is included in that figure.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 4.6%
Pass rate with the skill: 36.4%
Cases attempted: 22
Cases counted toward lift: 22
Cases that regressed: 1
Skill version measured: v1
Run completed: 7/27/2026, 10:00 UTC

The per-case answers from this run were removed by the retention sweep, so the case table below shows the verdicts without the text either arm produced. The counts above were recorded at the time and are unaffected. Answers are now kept for 180 days.

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run36

Live evalNeeds ≥10 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+230% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 56 days ago

Other measured skills in the registry, with their headline benchmark lift.