# Email Templates > > Generate Email Templates: React Email templates for common scenarios. - Skill: `majiayu000/email-templates-3` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add majiayu000/email-templates-3` - Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/email-templates-3/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: majiayu000 (https://skillmd.com/u/majiayu000) - Updated: 2026-09-09 - Page: https://skillmd.com/skills/majiayu000/email-templates-3 --- # Email Templates Skill > **Generate Email Templates**: React Email templates for common scenarios. --- ## 🎯 Purpose When user says: "Create email templates" or "Add email notifications" Generate email templates for: - Welcome email - Password reset - Order confirmation - Invoice/Receipt - Team invitation - Notification digest --- ## 📁 Generated Structure ``` emails/ ├── components/ │ ├── header.tsx │ ├── footer.tsx │ └── button.tsx ├── welcome.tsx ├── password-reset.tsx ├── order-confirmation.tsx ├── receipt.tsx ├── team-invitation.tsx └── notification-digest.tsx ``` --- ## 📧 Setup ```bash npm install @react-email/components resend ``` --- ## 🏗️ Shared Components ```tsx // emails/components/header.tsx import { Img, Section, Text } from "@react-email/components" export function EmailHeader() { return (
Logo Your Company
) } // emails/components/footer.tsx import { Hr, Link, Section, Text } from "@react-email/components" export function EmailFooter() { return (
© {new Date().getFullYear()} Your Company, Inc. 123 Business St, City, Country Unsubscribe
) } // emails/components/button.tsx import { Button as EmailButton } from "@react-email/components" interface ButtonProps { href: string children: React.ReactNode } export function Button({ href, children }: ButtonProps) { return ( {children} ) } ``` --- ## 👋 Welcome Email ```tsx // emails/welcome.tsx import { Html, Head, Body, Container, Text, Preview } from "@react-email/components" import { EmailHeader } from "./components/header" import { EmailFooter } from "./components/footer" import { Button } from "./components/button" interface WelcomeEmailProps { name: string loginUrl: string } export function WelcomeEmail({ name, loginUrl }: WelcomeEmailProps) { return ( Welcome to Your Company - Let's get started! Hi {name}, Welcome to Your Company! We're excited to have you on board. Here's what you can do next:
If you have any questions, just reply to this email. We're here to help! ) } ``` --- ## 🔑 Password Reset ```tsx // emails/password-reset.tsx import { Html, Head, Body, Container, Text, Preview, Section } from "@react-email/components" import { EmailHeader } from "./components/header" import { EmailFooter } from "./components/footer" import { Button } from "./components/button" interface PasswordResetEmailProps { name: string resetUrl: string expiresIn: string } export function PasswordResetEmail({ name, resetUrl, expiresIn }: PasswordResetEmailProps) { return ( Reset your password Hi {name}, We received a request to reset your password. Click the button below to choose a new one:
This link will expire in {expiresIn}. If you didn't request this, you can safely ignore this email. ) } ``` --- ## 📦 Order Confirmation ```tsx // emails/order-confirmation.tsx interface OrderConfirmationEmailProps { orderNumber: string customerName: string items: { name: string; quantity: number; price: number }[] total: number shippingAddress: string trackingUrl?: string } export function OrderConfirmationEmail({ orderNumber, customerName, items, total, shippingAddress, trackingUrl, }: OrderConfirmationEmailProps) { return ( Order #{orderNumber} confirmed!
✓ Order Confirmed!
Hi {customerName}, Thank you for your order! Here's your order summary:
Order #{orderNumber} {items.map((item, i) => ( {item.name} × {item.quantity} ${item.price.toFixed(2)} ))}
Total ${total.toFixed(2)}
Shipping to: {shippingAddress} {trackingUrl && (
)} ) } ``` --- ## 📤 Sending Emails ```typescript // lib/email.ts import { Resend } from "resend" import { WelcomeEmail } from "@/emails/welcome" import { PasswordResetEmail } from "@/emails/password-reset" import { OrderConfirmationEmail } from "@/emails/order-confirmation" const resend = new Resend(process.env.RESEND_API_KEY) export async function sendWelcomeEmail(to: string, name: string) { await resend.emails.send({ from: "noreply@yourcompany.com", to, subject: "Welcome to Your Company!", react: WelcomeEmail({ name, loginUrl: `${process.env.APP_URL}/login` }), }) } export async function sendPasswordResetEmail(to: string, name: string, token: string) { await resend.emails.send({ from: "noreply@yourcompany.com", to, subject: "Reset your password", react: PasswordResetEmail({ name, resetUrl: `${process.env.APP_URL}/reset-password?token=${token}`, expiresIn: "1 hour", }), }) } ``` --- **Beautiful emails in minutes!**