前言¶

事務郵件、歡迎信、重置密碼、訂單確認這類 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 爲準。