react-email
用React和TypeScript构建现代化、响应式邮件的组件库。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：react-email。 它的用途是：用React和TypeScript构建现代化、响应式邮件的组件库。 完整的 Skill 内容见：https://321skill.com/skills/react-email/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“帮我用React Email组件写一个用户欢迎邮件的模板，包含公司Logo、欢迎标题、一个引导按钮和页脚信息。”，它会生成一个结构清晰、包含必要组件（如Img, Heading, Button, Section）的React组件代码，并提示你如何添加样式和替换内容。
介绍
React Email 解决了在React项目中开发高质量、跨邮件客户端兼容的响应式邮件模板的难题。传统的邮件开发需要处理大量基于表格的布局和过时的HTML标记，并且要应对Gmail、Outlook等不同邮件客户端的渲染差异，过程繁琐且容易出错。
该库提供了一套高质量、无预设样式的React组件（如Button、Container、Row、Column等），开发者可以像构建普通React应用一样，使用熟悉的JSX语法和TypeScript来组合和设计邮件模板。它内部处理了邮件客户端的兼容性问题，并支持深色模式等现代特性。
它非常适合需要发送事务性邮件（如注册确认、密码重置、通知）或营销邮件的Web开发团队，特别是那些已经使用React技术栈的团队。前端开发者、全栈工程师和产品团队可以利用它快速构建和维护美观、专业的邮件模板。
与直接编写HTML邮件或使用其他模板引擎相比，React Email的核心优势在于将现代前端开发体验引入了邮件开发领域。它不是一个简单的模板集合，而是一个完整的组件化解决方案，让开发者能够复用组件、享受类型安全，并通过其配套的编辑器工具进一步提升开发效率。
核心特点
核心区别在于：1) 它是专为React和TypeScript生态设计的组件库，而非通用模板语言，让前端开发者能用最熟悉的工具链开发邮件；2) 它深度处理了Gmail、Outlook等主流邮件客户端的渲染不一致性问题，并内置了响应式布局和深色模式支持，这是许多同类工具所欠缺的。
注意事项
不适合需要完全自定义、不基于React技术栈的邮件项目，或对构建产物体积有极端苛刻要求的场景。
常见问题
React Email 和普通HTML邮件模板有什么区别？
React Email 让你用React组件的方式开发邮件，享受组件化、类型安全和现代开发工具链，同时它自动处理了跨邮件客户端的兼容性难题。
用React写的邮件，最终怎么发送？
React Email 模板最终会被渲染成标准的、兼容性良好的HTML字符串，你可以将这个字符串交给任何邮件发送服务（如Resend、SendGrid、AWS SES等）进行投递。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/react-email/raw/index.md 读取 react-email 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/react-email/raw/index.md（查看排版版本）