（10570期）React Email Skills – 用 React 写邮件，全客户端兼容

用 React 写邮件，全客户端兼容 Resend 官方出品，用 React 组件构建跨客户端兼容的 HTML 邮件模板，支持可视化编辑器嵌入与 Resend 发送集成 使用说明 核心用法 React Email 是 Resend 推出的开源框架，允许开发者使用 React 组件语法编写 HTML 邮件模板，彻底解决传统邮件开发的维护难题。核心工作流： 模板开发：使用 @react-email/components 提供的语义化组件（Html、Head、Body、Container、Tailwind 等）构建邮件 本地预览：npx create-email@latest 创建项目后，npm run dev 启动 3000 端口预览服务，实时查看多客户端渲染效果 渲染输出：通过 render() 函数转换为 HTML 或纯文本，兼容任意邮件服务商 可视化编辑：可嵌入 @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 | 仅通过环境变量注入，禁止硬编码 | 原始说明 Use when building HTML email templates with React components, adding a visual email editor to an application using the React Email visual editor, rendering e...