1. 基本信息
| 项目 | 内容 |
|---|---|
| 名称 | react-email（合集仓库 resend/resend-skills 子技能） |
| 项目自述名称 | React Email（技能教学对象为 resend/react-email 开源项目，19,518 Stars，独立仓库） |
| 作者/维护者 | Resend, Inc.（官方） |
| 来源链接 | https://github.com/resend/resend-skills/tree/main/skills/react-email |
| 许可证 | MIT（GitHub API 核实） |
| GitHub Stars | 156（resend-skills 合集仓库整体，不代表本子技能个体热度；其教学对象 react-email 独立仓库自身 19,518 Stars / 1,073 Forks，2026-07-29 仍有代码提交） |
| 最新版本 | 2.1.0（SKILL.md 元数据，与所教学的 react-email 库版本号独立管理） |
| 安装方式 | npx skills add resend/resend-skills 勾选 react-email，或直接 npm i react-email |
2. 功能介绍与亮点
指导 agent 用 React 组件搭建 HTML 邮件模板（欢迎邮件、密码重置、订单确认、通知、多语言邮件等），并渲染成兼容主流邮件客户端的 HTML。核心能力：
- 组件化开发：
Html/Body/Container/Section/Row/Column等结构组件 +Tailwind（自带pixelBasedPreset，因邮件客户端不支持rem） - 邮件客户端专属约束：明确列出“禁用 flexbox/grid（改用 Row/Column 或表格布局）”“禁用媒体查询与深色模式选择器”“图片禁用 SVG/WEBP”等一系列邮件 HTML 与普通网页开发不同的硬性规则，并给出具体规避写法
- 模板变量处理：明确规定
{{variable}}类模板变量只能出现在PreviewProps里、不能写进组件 JSX 结构本身，避免生成无效模板 - 无障碍与国际化：内置
alt文本默认值、标题层级检查、WCAG AA 对比度提示；支持 next-intl/react-i18next/react-intl 三种国际化方案 - 可视化编辑器：内置基于 TipTap/ProseMirror 的
@react-email/editor组件，可嵌入应用供非技术用户可视化编辑邮件 - 本地预览与导出：
npx create-email@latest一键脚手架，本地开发服务器实时预览，支持导出静态 HTML 或渲染纯文本版本
亮点：教学对象是 JS/React 生态中最主流的邮件组件库之一（19,518 Stars），SKILL.md 本身随库同步更新（最近一次同步在 2026-06-23），内容不是一次性生成后闲置的文档。
3. 适用场景
固定分类：前端与设计。适用于用 React/Next.js 构建应用、需要开发注册确认、密码重置、订单通知、营销邮件等 HTML 邮件模板的初中级前端开发者——尤其是不熟悉邮件 HTML 历史包袱（不支持 flexbox、媒体查询、SVG 等）的开发者，可以直接照搬组件化写法而不必踩坑摸索。
4. 跨 Agent 兼容性
- Claude Code：✅ 原生支持——所属仓库 resend/resend-skills 自带
.claude-plugin清单，且已被 Anthropic 官方插件目录收录 - Codex：✅ 原生支持——仓库自带
.codex-plugin清单 - OpenClaw：✅ 原生支持——SKILL.md front matter 显式包含
openclaw元数据块（install.kind: node） - Hermes Agent：⚠️ 未验证——已抓取材料未提及，未为此单独搜索
5. 推荐理由
把“邮件 HTML 有一堆反直觉限制”这件事从开发者反复踩坑，变成组件库+技能文档提前把规则钉死——禁用 flexbox、媒体查询、SVG 等约束直接写进技能指令里，agent 不会生成中看不中用（在 Outlook/Gmail 里错位）的邮件模板；教学对象本身是社区认可度很高的开源项目，长期可用性有保障。
6. 评分
| 维度 | 分数 | 说明 |
|---|---|---|
| 受欢迎程度 | 8 | 合集仓库 156 star 不计入个体评分；技能教学对象 react-email 是独立开源仓库，19,518 Stars / 1,073 Forks，2026-07-29 仍有提交，属社区认可度很高的主流邮件组件库；技能子目录自身提交为自动同步性质（随库文档变化更新），未见独立于官方渠道的第三方大规模讨论帖，故不给满分 |
| 可用性 | 9 | npm i react-email 一条命令安装，或用脚手架一键生成完整项目；本地开发服务器实时预览；6 篇配套参考文档（组件、样式、编辑器、发送、国际化、常见模式）覆盖全面；核心建模板功能无需任何付费账号；SKILL.md 最近一次同步在 2026-06-23 |
| 安全性 | 9 | 见下方检查清单 |
安全检查清单：
① shell 命令执行——仅涉及标准 npm install/本地开发服务器（email dev），无自定义高风险脚本
② 联网外发——核心模板构建功能纯本地渲染，不联网；仅可选的邮件发送环节需调用 Resend/Nodemailer/SendGrid 等用户自行配置的服务商 API
③ 凭据存储——核心技能本身不要求任何 API Key；仅涉及发送邮件的可选环节需要用户自行配置的服务商密钥，不在本技能范围内处理
④ 无可疑指令——通读全文为标准组件用法、样式规则与无障碍指引，未发现诱导执行额外操作或外发数据的文字
⑤ 作者信誉——Resend, Inc. 官方账号，教学对象项目本身是知名度较高的开源库
⑥ License——MIT，明确
⑦ 最近维护——技能文档 2026-06-23 同步更新，教学对象项目仓库 2026-07-29 仍有提交，维护活跃
7. 跟同类 Skills 相比的优势
| 竞品 | 定位 | 差异 |
|---|---|---|
| Unlayer（商业邮件构建 SaaS） | 面向非技术用户的拖拽式可视化邮件编辑器 | 无需写代码，但深度定制能力和与现有 React 代码库的集成度不及组件化方案；本技能面向愿意用代码掌控全部细节的开发者 |
| React Email Editor（Zhugenmin，轻量开源） | 轻量级、简单的 React 邮件编辑器封装 | 功能面更窄，缺少本技能覆盖的完整无障碍、国际化、多种渲染输出（HTML/纯文本/静态导出）等生产级能力 |
| 手写 HTML + 内联样式（传统方式） | 直接编写兼容邮件客户端的原始 HTML/CSS | 需要开发者自行记忆邮件客户端的各种历史包袱（不支持 flexbox、媒体查询等），本技能把这些规则固化进组件与技能指令，减少人为疏漏 |
8. 用户评价
第三方邮件构建工具对比文章（Unlayer 官方博客）评价 react-email“提供一组高质量、无样式的组件用于构建美观邮件”，认为其优势是“完全的开发者代码掌控力、样式灵活性、跨客户端兼容性”,劣势是“无可视化拖拽界面、对不熟悉 React 的开发者有一定学习曲线”（该评价发布时间早于本技能新增的可视化编辑器组件，供参考）。React 生态周报 This Week In React 亦持续将该项目纳入更新追踪。
9. 其他补充
resend/resend-skills 仓库同时提供 resend（邮件收发 API 全功能）、agent-email-inbox（AI Agent 安全接收邮件的隔离指引）、resend-cli（命令行操作 Resend 平台）、email-best-practices（邮件送达率与合规实践）等姊妹技能，可按需搭配安装。
10. 安装使用方式
- 推荐：
npx skills add resend/resend-skills --skill react-email（自动识别当前 agent） - 直接使用底层库：
npm i react-email，或npx create-email@latest一键生成含示例的完整项目 - Claude Code 插件市场：
/plugin marketplace add resend/resend-skills后安装 resend-skills 插件 - 本地预览：
npm run dev（或按 package.json 中配置的email dev --dir emails --port 3000），浏览器打开 localhost:3000 查看模板实时渲染效果
11. 注意事项
- 构建模板本身仍需编写 React/TypeScript 代码，没有“零代码”拖拽式建模板工具；内置的
@react-email/editor是供开发者嵌入自己产品、给终端用户提供可视化编辑体验的组件，不是给写模板的开发者本人用的拖拽工具 - 生成模板时需人工确认品牌色、Logo 格式（仅支持 PNG/JPG，SVG/WEBP 在邮件客户端渲染不稳定）与生产环境静态资源域名，技能会主动提示但仍需用户提供
- 邮件 HTML 与普通网页开发规则差异较大（禁用 flexbox/grid、媒体查询、深色模式选择器等），初次接触邮件开发的团队需按技能文档逐条核对，不能直接套用常规前端惯例
- Hermes Agent 的兼容性尚未验证