React Email Skills

核心用法

React Email 是 Resend 推出的开源框架，允许开发者使用 React 组件语法编写 HTML 邮件模板，彻底解决传统邮件开发的维护难题。核心工作流：

1. 模板开发：使用 @react-email/components 提供的语义化组件（Html、Head、Body、Container、Tailwind 等）构建邮件
2. 本地预览：npx create-email@latest 创建项目后，npm run dev 启动 3000 端口预览服务，实时查看多客户端渲染效果
3. 渲染输出：通过 render() 函数转换为 HTML 或纯文本，兼容任意邮件服务商
4. 可视化编辑：可嵌入 @react-email/editor（基于 TipTap/ProseMirror）到自有应用，提供所见即所得的邮件编辑器

显著优点

• 开发体验现代化：TypeScript 原生支持、组件复用、Tailwind CSS 样式（px 预设替代 rem）、热重载预览
• 跨客户端兼容性：内置 600px 最大宽度约束、table 布局替代 flexbox/grid、自动处理 Outlook/Gmail 等客户端差异
• 生态闭环完整：从模板开发（React Email）→ 可视化编辑（EmailEditor）→ 发送服务（Resend SDK）形成完整链路
• 可嵌入架构：EmailEditor 作为 React 组件可集成到任意应用，支持主题定制、扩展插件、Inspector 侧边栏
• 安全可信：MIT 协议、Resend 官方维护、GitHub 9K+ stars、零危险代码、S+ 安全评级

潜在缺点与局限性

• 技术栈绑定：强依赖 React 生态，非 React 项目引入成本较高（需额外构建步骤）
• 样式约束严格：不支持 CSS 媒体查询（sm:/md:）、dark/light 主题选择器、flexbox/grid 布局，复杂响应式需求受限
• 图片格式限制：明确禁止 SVG/WEBP，需提前转换为 PNG/JPG 并托管至 CDN
• 文件大小限制：Gmail 对超过 102KB 的邮件进行截断，需控制模板复杂度
• 编辑器依赖：可视化编辑器需额外安装 @react-email/editor，增加 bundle 体积

适合人群

• 已有 React 技术栈的团队，希望统一前后端与邮件模板的技术选型
• SaaS 产品需要向用户提供内置邮件编辑功能（如营销自动化、通知模板定制）
• 对邮件客户端兼容性要求高、缺乏专业邮件开发经验的中小型团队
• 使用 Resend 作为邮件服务商，追求生态一体化体验的用户

常规风险

| 风险类别 | 说明 | 缓解措施 |

|---------|------|---------|

| 渲染一致性 | 邮件客户端 CSS 支持差异极大（参考 caniemail.com）| 严格遵循 Skill 中的组件规范，多客户端测试 |

| 图片失效 | 相对路径图片在生产环境 404 | 必询问用户生产 CDN 域名，使用 baseURL 条件渲染 |

| 变量注入误用 | 用户可能要求在 JSX 中写 `{{variable}}` | 强制解释此模式会使模板无效，引导使用 PreviewProps |

| 依赖版本漂移 | npm 包更新可能引入不兼容变更 | package.json 锁定确切版本，升级前测试 |

| API Key 泄露 | 生产环境发送需配置 Resend API Key | 仅通过环境变量注入，禁止硬编码 |

核心用法

React Email 将现代前端组件化开发模式引入邮件领域，开发者可使用 React JSX 编写邮件模板，通过 @react-email/components 提供的基础组件（Html、Head、Body、Container、Tailwind 等）构建结构化邮件。框架内置基于 Tailwind CSS 的样式系统（需使用 pixelBasedPreset 适配邮件客户端），支持开发服务器实时预览（email dev）、HTML/纯文本渲染（render 函数），以及与 Resend、Nodemailer、SendGrid 等邮件服务提供商集成发送。

显著优点

1. 开发体验现代化：热更新预览、TypeScript 类型支持、组件复用机制，告别传统邮件开发的表格嵌套地狱
2. 跨客户端兼容：组件层抽象处理 Gmail、Outlook、Apple Mail 等主流客户端的渲染差异，自动转换 flexbox 为表格布局
3. 生态系统完整：提供可视化编辑器（@react-email/editor）、国际化方案（next-intl/react-i18next/react-intl）、常用邮件模板模式库
4. Resend 原生集成：与 Resend 邮件服务深度打通，支持直接发送 React 组件，自动处理 HTML/纯文本双版本
5. 安全合规：MIT 开源协议，Resend 官方维护，GitHub 社区活跃，通过 GDPR/CCPA 隐私合规检查

潜在缺点与局限性

1. 邮件客户端 CSS 限制：仍需遵循传统邮件开发约束（无 flexbox/grid、无媒体查询、无 CSS 变量），Tailwind 的 sm:/md: 等响应式类无效
2. 图片格式限制：明确不支持 SVG/WEBP，需使用 PNG/JPG 并提供生产环境 CDN 绝对路径
3. 构建输出体积：邮件 HTML 需内联样式，复杂模板可能导致体积超过 Gmail 102KB 截断阈值
4. 编辑器额外依赖：可视化编辑器基于 TipTap/ProseMirror，嵌入应用会增加包体积
5. 学习成本：需同时掌握 React 组件开发和邮件客户端渲染特性两套知识体系

适合人群

• 已使用 React 技术栈的团队，希望统一前后端与邮件模板开发语言
• 需要频繁迭代邮件设计、重视开发效率的产品团队
• 使用 Resend 作为邮件服务提供商的开发者（获得最佳集成体验）
• 需要为 SaaS 应用嵌入可视化邮件编辑功能的场景

常规风险

• 生产环境配置风险：开发服务器使用 localhost:3000，上线前必须配置真实 CDN 域名，否则图片失效
• API 密钥泄露：Resend API Key 需通过环境变量注入，避免硬编码
• XSS 防护：邮件内容若包含用户输入需进行转义，防止恶意脚本注入
• 发送配额管理：Resend 免费套餐有每日发送限制，生产环境需监控配额和退信率

安全认证结论

该 Skill 通过 CLS-Certify v2.1.0 六维深度检测（静态分析、动态分析、依赖审计、网络流量、隐私合规、威胁情报），获得 S+ 顶级安全评级 和 T1 来源可信度认证。8 个 Markdown 文件（2,976 行）纯文档结构，无可执行代码、无外部 API 调用、无第三方依赖，威胁扫描零发现。