Build React Email Templates

React Email 模板开发 Skill 是一套面向 AI 编码助手的跨平台邮件模板构建规范。HTML 邮件因各邮件客户端渲染差异巨大，长期以来是前端开发的痛点领域。React Email 将 React 组件化开发体验引入邮件模板领域，提供了一套在各主流邮件客户端保持一致渲染的结构化方案。该 Skill 指导 AI 助手完成从模板创建到预览测试再到发送集成的完整工作流。

【这是什么】

做 Web 应用难免要发邮件：注册确认、密码重置、订单通知、每周摘要。传统的 HTML 邮件开发需要处理内联样式、表格布局、各邮件客户端的兼容性坑，开发体验远落后于现代 Web 开发。React Email 由知名邮件服务商 Resend 推出，将 React 组件化开发体验引入邮件模板领域，支持用熟悉的 React 写法构建邮件，输出在各主流邮件客户端（ Gmail、Outlook、Apple Mail 等）渲染一致的 HTML。

【核心能力】

• 完整组件库：提供 Html、Head、Body、Container、Tailwind、像素级预设等核心组件，覆盖邮件基础结构
• 样式安全规范：应用邮件安全样式规则，处理间距、边框、图片和深色模式兼容
• 发送集成示例：覆盖 Resend、Nodemailer、Mailgun、SendGrid 等主流发送服务的接入示例
• 多语言支持：内置 next-intl、react-intl、react-i18next 的国际化示例，支持 RTL 语言
• 视觉编辑器集成：嵌入 React Email 视觉编辑器并导出邮件可用内容
• 双重渲染保障：同时输出 HTML 和纯文本版本，保障所有用户可读

【适用场景】

• 交易类邮件：欢迎邮件、密码重置、订单确认、支付通知等需强品牌一致性的事务性邮件
• 产品通知邮件：功能更新公告、用户活动通知、订阅续费提醒等营销类邮件
• 团队协作邮件：工单状态变更、代码审查通知、CI/CD 流水线失败提醒等自动化邮件
• 国际化邮件系统：为多语言产品设计邮件模板架构，支持按语言切换主题和内容

【谁适合用】

全栈工程师需要为 SaaS 产品搭建邮件系统；前端开发者希望用 React 方式而非传统表格布局编写邮件模板；技术负责人需要建立团队统一的邮件开发规范；产品经理要求发出的邮件在各种邮件客户端保持视觉一致性。

【使用限制】

Skill 不自动接入 Resend 账号。无法保证在所有邮件客户端渲染完全一致（建议发前测试）。示例使用占位符域名和测试收件人，生产使用需替换为真实域名和经过验证的发件人配置。

【安装方式】

npx skillstore add resend/react-email

【质量说明】

Quality Score 82（Silver Tier），由 Resend 官方维护，Skillstore 安全审计通过，审核日期 2026-07-09。