前言¶

事务邮件、欢迎信、重置密码、订单确认这类 HTML 邮件，常见做法是手写表格布局 HTML，或在模板引擎里拼字符串。组件化前端和邮件模板往往是两套写法，预览要在真实客户端里反复试，样式还要迁就 Outlook 等客户端的限制。React Email 把邮件当成 React 组件来写，本地有预览；Resend 在 resend-skills 里提供的 react-email Skill，则把「怎么写模板、怎么避坑、怎么接静态资源」写成 Agent 可执行的说明，并和 Resend 生态（发送、文档、插件）对齐。下面介绍这个 Skill 的定位、能力与用法。

这是什么¶

react-email 是 Resend 维护的 Agent Skill（metadata 版本 2.1.0，MIT 许可）。Skill 描述写明：适用于用 React 组件构建 HTML 邮件模板、在应用里接入 React Email 可视化编辑器、把邮件渲染为 HTML，以及通过 Resend 发送邮件；覆盖欢迎信、密码重置、通知、订单确认、 Newsletter、事务邮件等场景。

• 官方 Skill 目录：resend/resend-skills — skills/react-email
• 对应开源项目：resend/react-email，主页 react.email
• 补充文档：Resend — React Email Skill

在 resend-skills 仓库中，该 Skill 标注为从 resend/react-email 同步而来；在 resend-skills 里直接改会被下次同步覆盖，长期维护应在源仓库修改。

核心功能¶

Skill 正文围绕 React Email 的开发与约束展开，Agent 按其中规则生成或修改模板，主要包括：

1. 组件化模板：使用 Html、Head、Body、Container、Section、Row/Column、Preview、Heading、Text、Button、Link、Img 等结构；可用 Tailwind 配合 pixelBasedPreset 写样式。
2. 本地预览：通过 email dev 在浏览器预览 emails 目录下的模板（默认端口 3000）。
3. 脚手架与接入：npx create-email@latest 新建项目，或在现有项目的 package.json 增加 email 脚本。
4. 静态资源：图片放在 emails/static/，开发环境与生产 CDN 的 baseURL 切换模式。
5. 行为准则：写代码前先澄清品牌色、Logo、风格、生产静态资源域名；禁止在 JSX 里直接写 {{variableName}} 类占位符（仅可在 PreviewProps 中按文档示例处理）；迭代时只改用户要求的部分。
6. 与 Resend 的关系：Skill 元数据将发送场景纳入范围；resend-skills 插件还提供 Resend MCP（https://mcp.resend.com/mcp）及 resend 等兄弟 Skill。发送邮件通常需要 Resend 账号、已验证域名，以及环境变量 RESEND_API_KEY（见 resend.com/api-keys）。

安装与启用¶

安装 Agent Skill（resend-skills 插件）¶

在支持 Agent Skills / Agent Plugins 的客户端中，可从 Resend 技能集一次性安装多个 Skill：

npx skills add resend/resend-skills

执行后按提示选择要安装的 Skill，其中包含 react-email。同一仓库对 Claude Code、Cursor、Grok 等提供各自插件清单（如 Cursor 对应 .cursor-plugin/）。

安装 React Email 本体（写模板时用）¶

Skill 的 openclaw 元数据声明 Node 包安装方式：

npm i react-email

也可用官方脚手架新建项目（支持 npm、yarn、pnpm、bun）：

npx create-email@latest
cd react-email-starter
npm install
npm run dev

开发服务在 localhost:3000，预览 emails 文件夹中的模板。

接入已有项目：安装依赖后，在 package.json 增加脚本，并保证 emails 路径相对项目根目录、tsconfig.json 支持 JSX：

{
  "scripts": {
    "email": "email dev --dir emails --port 3000"
  }
}

典型用法¶

基础欢迎信模板（Tailwind）¶

下面示例来自 Skill 官方正文：用 props 传 name 与 verificationUrl，Preview 作为收件箱摘要，Button 需带 box-border。

import {
  Html,
  Head,
  Preview,
  Body,
  Container,
  Heading,
  Text,
  Button,
  Tailwind,
  pixelBasedPreset
} from 'react-email';

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 />
        <Body className="bg-gray-100 font-sans">
          <Preview>Welcome - Verify your email</Preview>
          <Container className="max-w-xl mx-auto p-5">
            <Heading className="text-2xl text-gray-800">
              Welcome!
            </Heading>
            <Text className="text-base text-gray-800">
              Hi {name}, thanks for signing up!
            </Text>
            <Button
              href={verificationUrl}
              className="bg-brand text-white px-5 py-3 rounded block text-center no-underline box-border"
            >
              Verify Email
            </Button>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

WelcomeEmail.PreviewProps = {
  name: 'John Doe',
  verificationUrl: 'https://example.com/verify/abc123'
} satisfies WelcomeEmailProps;

export { WelcomeEmail };

本地预览时依赖 PreviewProps；发往生产时在应用代码中 render 后交给 Resend 等发信 API（具体调用见 Resend 文档及同插件中的 resend Skill）。

图片与生产 CDN¶

Logo 等文件放在 emails/static/。Skill 要求向用户确认生产环境静态资源域名，不要硬编码 localhost:3000：

const baseURL = process.env.NODE_ENV === "production"
  ? "https://cdn.example.com"
  : "";

export default function Email() {
  return (
    <Img
      src={`${baseURL}/static/logo.png`}
      alt="Logo"
      width="150"
      height="50"
    />
  );
}

开发时 baseURL 为空，由 React Email 开发服务器提供 /static/...；生产时拼上 CDN 根 URL。

适用场景与注意¶

适合谁：已在用或打算用 React/TypeScript 的团队；需要事务邮件、通知类模板且希望 Agent 按邮件客户端约束写代码的场景；使用 Cursor、Claude Code 等并安装了 resend-skills 的开发者。

样式与布局限制（Skill 中明确要求）：

• 使用 Tailwind 时配合 pixelBasedPreset（邮件客户端对 rem 支持差）。
• 不用 flexbox / grid，多列用 Row/Column 或表格思路。
• 避免 sm:、md: 等媒体查询以及 dark:/light: 主题选择器。
• 图片优先 PNG/JPG，避免 SVG、WEBP；Button 必须包含 box-border；边框需写明 border-solid 等类型。

用户若坚持在组件结构里写 {{name}} 一类 Mustache 占位符，Skill 要求 Agent 说明会使模板无效，并改用 props 或仅在 PreviewProps 中按文档处理。

结尾¶

react-email Skill 把 React Email 的组件模型、预览流程、静态资源与客户端兼容规则写进 Agent 可遵循的说明书，并与 Resend 官方技能集、文档同源维护。若你的目标是「组件写模板 + 本地预览 + 与 Resend 发送链路同一生态」，可从安装 resend-skills 选用该 Skill 开始，模板细节以 skills/react-email 与 react.email 为准。