菜单
Use when creating HTML email templates with React components - welcome emails, password resets, notifications, order confirmations, newsletters, or transactional emails.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/viclafouch/meme-studio --skill react-email命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Use when building email features, emails going to spam, high bounce rates, setting up SPF/DKIM/DMARC authentication, implementing email capture, ensuring compliance (CAN-SPAM, GDPR, CASL), handling webhooks, retry logic, or deciding transactional vs marketing.
Use when setting up an email inbox for an AI agent (Moltbot, Clawdbot, or similar) - configuring inbound email, webhooks, tunneling for local development, and implementing security measures to prevent prompt injection attacks.
Use when receiving emails with Resend - setting up inbound domains, processing email.received webhooks, retrieving email content/attachments, or forwarding received emails.
基于 SOC 职业分类
正在显示 SKILL.md
| name | react-email |
| description | Use when creating HTML email templates with React components - welcome emails, password resets, notifications, order confirmations, newsletters, or transactional emails. |
| license | MIT |
| metadata | {"author":"Resend","version":"1.1.0"} |
Build and send HTML emails using React components - a modern, component-based approach to email development that works across all major email clients.
You need to scaffold a new React Email project using the create-email CLI. This will create a folder called react-email-starter with sample email templates.
Using npm:
npx create-email@latest
Using yarn:
yarn create email
Using pnpm:
pnpm create email
Using bun:
bun create email
You must change into the newly created project folder:
cd react-email-starter
You need to install all project dependencies before running the development server.
Using npm:
npm install
Using yarn:
yarn
Using pnpm:
pnpm install
Using bun:
bun install
Your task is to start the local preview server to view and edit email templates.
Using npm:
npm run dev
Using yarn:
yarn dev
Using pnpm:
pnpm dev
Using bun:
bun dev
Confirm the development server is running by checking that localhost:3000 is accessible. The server will display a preview interface where you can view email templates from the emails folder.
Assuming React Email is installed in an existing project, update the top-level package.json file with a script to run the React Email preview server.
{
"scripts": {
"email": "email dev --dir emails --port 3000"
}
}
Make sure the path to the emails folder is relative to the base project directory.
Ensure the tsconfig.json includes proper support for jsx.
Replace the sample email templates. Here is how to create a new email template:
Create an email component with proper structure using the Tailwind component for styling:
import {
Html,
Head,
Preview,
Body,
Container,
Heading,
Text,
Button,
Tailwind,
pixelBasedPreset
} from '@react-email/components';
interface WelcomeEmailProps {
name: string;
verificationUrl: string;
}
export default function WelcomeEmail({ name, verificationUrl }: WelcomeEmailProps) {
return (
<Html lang="en">
<Tailwind
config={{
presets: [pixelBasedPreset],
theme: {
extend: {
colors: {
brand: '#007bff',
},
},
},
}}
>
<Head />
<Preview>Welcome - Verify your email</Preview>
<Body className="bg-gray-100 font-sans">
<Container =>
Welcome!
Hi {name}, thanks for signing up!
Verify Email
);
}
. = {
: ,
:
} ;
{ };
See references/COMPONENTS.md for complete component documentation.
Core Structure:
Html - Root wrapper with lang attributeHead - Meta elements, styles, fontsBody - Main content wrapperContainer - Centers content (max-width layout)Section - Layout sectionsRow & Column - Multi-column layoutsTailwind - Enables Tailwind CSS utility classesContent:
Preview - Inbox preview text, always first in BodyHeading - h1-h6 headingsText - ParagraphsButton - Styled link buttonsLink - HyperlinksImg - Images (see Static Files section below)Hr - Horizontal dividersSpecialized:
CodeBlock - Syntax-highlighted codeCodeInline - Inline codeMarkdown - Render markdownFont - Custom web fontsWhen a user requests an email template, ask clarifying questions FIRST if they haven't provided:
Example response to vague request:
Before I create your email template, I have a few questions:
- What is your primary brand color? (hex code)
- Do you have a logo file? (PNG or JPG - note: SVG and WEBP don't work reliably in email clients)
- What tone do you prefer - professional, casual, or minimal?
- Where will you host static assets in production? (e.g., https://cdn.example.com)
Local images must be placed in the static folder inside your emails directory:
project/
├── emails/
│ ├── welcome.tsx
│ └── static/ <-- Images go here
│ └── logo.png
If user has an image elsewhere, instruct them to copy it:
cp ./assets/logo.png ./emails/static/logo.png
Use this pattern for images that work in both dev preview and production:
const baseURL = process.env.NODE_ENV === "production"
? "https://cdn.example.com" // User's production CDN
: "";
export default function Email() {
return (
<Img
src={`${baseURL}/static/logo.png`}
alt="Logo"
width="150"
height="50"
/>
);
}
How it works:
baseURL is empty, so URL is /static/logo.png - served by React Email's dev serverbaseURL is the CDN domain, so URL is https://cdn.example.com/static/logo.pngImportant: Always ask the user for their production hosting URL. Do not hardcode localhost:3000.
const EmailTemplate = (props) => {
return (
{/* ... rest of the code ... */}
<h1>Hello, {props.variableName}!</h1>
{/* ... rest of the code ... */}
);
}
EmailTemplate.PreviewProps = {
// ... rest of the props ...
variableName: "{{variableName}}",
// ... rest of the props ...
};
export default EmailTemplate;
Use the Tailwind component for styling if the user is actively using Tailwind CSS in their project. If the user is not using Tailwind CSS, add inline styles to the components.
rem units, use the pixelBasedPreset for the Tailwind configuration.<Head /> inside <Tailwind> when using Tailwind CSSconst Email = (props) => {
return (
<div>
<a href={props.source}>click here if you want candy 👀</a>
</div>
);
}
Email.PreviewProps = {
source: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
};
font-sans py-10 bg-gray-100m-0 on address/copyrightbox-border to prevent padding overflowWhen requested: container black (#000), background dark gray (#151516)
import { render } from '@react-email/components';
import { WelcomeEmail } from './emails/welcome';
const html = await render(
<WelcomeEmail name="John" verificationUrl="https://example.com/verify" />
);
import { render } from '@react-email/components';
import { WelcomeEmail } from './emails/welcome';
const text = await render(<WelcomeEmail name="John" verificationUrl="https://example.com/verify" />, { plainText: true });
React Email supports sending with any email service provider. If the user wants to know how to send, view the Sending guidelines.
Quick example using the Resend SDK for Node.js:
import { Resend } from 'resend';
import { WelcomeEmail } from './emails/welcome';
const resend = new Resend(process.env.RESEND_API_KEY);
const { data, error } = await resend.emails.send({
from: 'Acme <onboarding@resend.dev>',
to: ['user@example.com'],
subject: 'Welcome to Acme',
react: <WelcomeEmail name="John" verificationUrl="https://example.com/verify" />
});
if (error) {
console.error('Failed to send:', error);
}
The Node SDK automatically handles the plain-text rendering and HTML rendering for you.
See references/I18N.md for complete i18n documentation.
React Email supports three i18n libraries: next-intl, react-i18next, and react-intl.
import { createTranslator } from 'next-intl';
import {
Html,
Body,
Container,
Text,
Button,
Tailwind,
pixelBasedPreset
} from '@react-email/components';
interface EmailProps {
name: string;
locale: string;
}
export default async function WelcomeEmail({ name, locale }: EmailProps) {
const t = createTranslator({
messages: await import(\`../messages/\${locale}.json\`),
namespace: 'welcome-email',
locale
});
return (
<Html lang={locale}>
<Tailwind config={{ presets: [pixelBasedPreset] }}>
<Body className="bg-gray-100 font-sans">
<Container className="max-w-xl mx-auto p-5">
<Text className="text-base text-gray-800">{t('greeting')} {name},</Text>
<Text className="text-base text-gray-800">{t('body')}</Text>
<Button href="https://example.com" className="bg-blue-600 text-white px-5 py-3 rounded">
{t('cta')}
</Button>
</Container>
</Body>
</Tailwind>
</Html>
);
}
Message files (`messages/en.json`, `messages/es.json`, etc.):
{
"welcome-email": {
"greeting": "Hi",
"body": "Thanks for signing up!",
"cta": "Get Started"
}
}
Test across email clients - Test in Gmail, Outlook, Apple Mail, Yahoo Mail. Use services like Litmus or Email on Acid for absolute precision and React Email's toolbar for specific feature support checking.
Keep it responsive - Max-width around 600px, test on mobile devices.
Use absolute image URLs - Host on reliable CDN, always include `alt` text.
Provide plain text version - Required for accessibility and some email clients.
Keep file size under 102KB - Gmail clips larger emails.
Add proper TypeScript types - Define interfaces for all email props.
Include preview props - Add `.PreviewProps` to components for development testing.
Handle errors - Always check for errors when sending emails.
Use verified domains - For production, use verified domains in `from` addresses.
See references/PATTERNS.md for complete examples including: