Create a new React Email template and upload it to Resend. Use when the user wants to create, design, or build a new email template.
Create a new email template for the DreamTeam project and upload it to Resend.
The user wants to create an email described as: $ARGUMENTS
If no description was provided, ask the user what kind of email they want to create.
Read 1-2 existing email templates to match the established style:
apps/user-web/src/emails/landing-page-email.tsx — narrative marketing emailapps/user-web/src/emails/marketing-outreach.tsx — shorter outreach emailapps/user-web/src/emails/contact-confirmation.tsx — transactional confirmationMatch these conventions:
@react-email/components (Html, Head, Body, Container, Section, Text, Button, Hr, Link, Preview, Font)#18181b#3f3f46#71717a#a1a1aa#2563eb#fafafa#e4e4e7#2563eb bg, white text, 8px radius, 14px 32px paddingrecipientName?, companyName?)const objects at the bottom of the file (not inline), using as const for literal types like textAlignCreate the file at apps/user-web/src/emails/<kebab-case-name>.tsx.
Design guidelines:
<table> for any side-by-side layout (not flexbox/grid)<Text> over <p>, <Button> over <a>, <Hr> over <hr><Preview> tag for inbox preview text<Font> in <Head>Read apps/user-web/src/emails/index.ts and add:
send<TemplateName>Email function following the existing patternRun: cd apps/user-web && npx tsc --noEmit 2>&1 | grep -i "<filename>"
Filter for just the new file. Fix any errors before proceeding.
Run the upload. Since the upload script creates new templates each run, instead run a targeted upload:
cd apps/user-web && export $(grep RESEND_API_KEY .env.local | xargs) && npx tsx -e "
import { render } from '@react-email/render';
import { <ComponentName> } from './src/emails/<filename>';
async function upload() {
const html = await render(<ComponentName>({}));
const res = await fetch('https://api.resend.com/templates', {
method: 'POST',
headers: {
Authorization: 'Bearer ' + process.env.RESEND_API_KEY,
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: '<kebab-case-name>',
subject: '<subject line>',
html,
}),
});
const data = await res.json();
console.log(res.ok ? '✅ Created:' : '❌ Error:', JSON.stringify(data, null, 2));
}
upload();
"
Tell the user: