前端设计需要联网githubverified来源可访问clear审计通过

react-email（React 邮件）

Agent Skill

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。它适合让 Agent 生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码，整理组件结构，或定位布局和性能问题。使用时需要结合项目现有设计系统、路由和构建方式，避免只生成孤立片段；涉及页面改动时，应配合本地预览和构建检查确认视觉效果。

总安装

113,928

周安装

4,736

GitHub Stars

18,980

下载量

37,224

CodexClaudeCursorGemini CLI

安装说明

本站只整理中文说明和来源信息，不托管安装包，也不代用户安装。

GitHub

来源数

许可证

MIT

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：react-email（React 邮件）
来源仓库：https://github.com/resend/react-email
仓库路径：skills/react-email
安装命令：
npx skills add https://github.com/resend/react-email --skill react-email
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。不同来源提供的安装方式可能略有差异；本站展示可直接复制的安装命令，安装前请核对来源页面。

skills.shnpx skills

npx skills add https://github.com/resend/react-email --skill react-email

简介

使用具有客户端安全样式和预览测试的 React 组件构建和发送 HTML 电子邮件。

支持 TypeScript 的基于组件的电子邮件开发，具有核心布局组件（Html、Body、Container、Section、Row、Column）和内容元素（标题、文本、按钮、图像、CodeBlock）
通过具有基于像素预设的 Tailwind 组件实现 Tailwind CSS 样式；电子邮件客户端兼容性所需的基于表格的布局
本地开发服务器预览位于 localhost:3000，具有实时编辑功能；支持为任何电子邮件服务提供商呈现为 HTML 或纯文本
具有开发/生产 URL 切换的静态图像托管；仅支持 PNG 和 JPG（SVG 和 WEBP 在电子邮件客户端中不可靠）
内置对next-intl、react-i18next和react-intl的i18n支持；快速集成Resend SDK进行发送

SKILL.md

name: react-email
description: Use when creating email templates with React - welcome emails, password resets, notifications, order confirmations, or transactional emails that need to render across email clients.

React Email

Overview

Build and send HTML emails using React components. A modern, component-based approach to email development that works across all major email clients by compiling to compatible HTML.

When to Use

Creating transactional emails (welcome, password reset, order confirmation)
Building notification or marketing email templates
Need consistent rendering across Gmail, Outlook, Apple Mail, Yahoo
Want component reusability and TypeScript support in emails
Integrating with email providers like Resend, SendGrid, Postmark

When NOT to use:

Simple plain-text emails
Emails that don't need cross-client compatibility
Projects without React/Node.js

Installation

Scaffold a new React Email project:

npx create-email@latest

Equivalent commands: yarn create email, pnpm create email, bun create email

Then install dependencies and start the dev server:

cd react-email-starter
npm install
npm run dev

The server runs at localhost:3000 with a preview interface for templates in the emails folder.

Adding to an Existing Project

Add dependencies to run the email server:

npm install react-email @react-email/preview-server -D -E
npm install @react-email/components react react-dom -E

Add a script to your package.json:

{
  "scripts": {
    "email:dev": "email dev"
  }
}

If the emails are in a different folder, you can specify the directory:

{
  "scripts": {
    "email:dev": "email dev --dir src/emails"
  }
}

Ensure tsconfig.json includes proper JSX support.

Basic Email Template

Create an email component with proper structure using the Tailwind component for styling:

import {
  Html,
  Head,
  Preview,
  Body,
  Container,
  Heading,
  Text,
  Button,
  Tailwind,
  pixelBasedPreset
} from '@react-email/components';

interface WelcomeEmailProps {
  name: string;
  verificationUrl: string;
}

export default function WelcomeEmail({ name, verificationUrl }: WelcomeEmailProps) {
  return (
    <Html lang="en">
      <Tailwind
        config={{
          presets: [pixelBasedPreset],
          theme: {
            extend: {
              colors: {
                brand: '#007bff',
              },
            },
          },
        }}
      >
        <Head />
        <Body className="bg-gray-100 font-sans">
        <Preview>Welcome - Verify your email</Preview>
          <Container className="max-w-xl mx-auto p-5">
            <Heading className="text-2xl text-gray-800">
              Welcome!
            </Heading>
            <Text className="text-base text-gray-800">
              Hi {name}, thanks for signing up!
            </Text>
            <Button
              href={verificationUrl}
              className="bg-brand text-white px-5 py-3 rounded block text-center no-underline box-border"
            >
              Verify Email
            </Button>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

WelcomeEmail.PreviewProps = {
  name: 'John Doe',
  verificationUrl: 'https://example.com/verify/abc123'
} satisfies WelcomeEmailProps;

export { WelcomeEmail };

Essential Components

See references/COMPONENTS.md for complete component documentation.

Core Structure:

Html - Root wrapper with lang attribute
Head - Meta elements, styles, fonts
Body - Main content wrapper
Container - Centers content (max-width layout)
Section - Layout sections
Row & Column - Multi-column layouts (table-based, won't stack on mobile)
Tailwind - Enables Tailwind CSS utility classes

Content:

Preview - Inbox preview text, place immediately after Body opening tag
Heading - h1-h6 headings
Text - Paragraphs
Button - Styled link buttons
Link - Hyperlinks
Img - Images (use absolute URLs; copy local images to /emails/static/ and use dev server BASE_URL in dev, ask user for production BASE_URL)
Hr - Horizontal dividers

Specialized:

CodeBlock - Syntax-highlighted code
CodeInline - Inline code
Markdown - Render markdown
Font - Custom web fonts

Behavioral Guidelines

When re-iterating over code, only update what the user asked for
If the user asks for media queries, inform them email clients don't support them and suggest alternatives
Never use template variables (like {{name}}) directly in TypeScript code - reference props directly

For example, if the user explicitly asks for a variable following the pattern {{variableName}}:

const EmailTemplate = (props) => {
  return (
    <h1>Hello, {props.variableName}!</h1>
  );
}

EmailTemplate.PreviewProps = {
  variableName: "{{variableName}}",
};

export default EmailTemplate;

Never write the {{variableName}} pattern directly in the component structure - explain this makes the template invalid.

Styling

See references/STYLING.md for complete styling documentation, including shared Tailwind config patterns for multiple templates.

Key rules:

Use pixelBasedPreset - email clients don't support rem units
Never use flexbox/grid - use Row/Column components
Never use SVG/WEBP images - use PNG/JPEG only
Never use media queries (sm:, md:) or theme selectors (dark:)
Always specify border type (border-solid, border-dashed)
Always use box-border on buttons

Rendering

Convert to HTML

import { render } from '@react-email/components';
import { WelcomeEmail } from './emails/welcome';

const html = await render(
  <WelcomeEmail name="John" verificationUrl="https://example.com/verify" />
);

Convert to Plain Text

import { render } from '@react-email/components';
import { WelcomeEmail } from './emails/welcome';

const text = await render(
  <WelcomeEmail name="John" verificationUrl="https://example.com/verify" />,
  { plainText: true }
);

Sending

React Email supports any email service provider. See references/SENDING.md for details.

Quick example using Resend:

import { Resend } from 'resend';
import { WelcomeEmail } from './emails/welcome';

const resend = new Resend(process.env.RESEND_API_KEY);

const { data, error } = await resend.emails.send({
  from: 'Acme <onboarding@resend.dev>',
  to: ['user@example.com'],
  subject: 'Welcome to Acme',
  react: <WelcomeEmail name="John" verificationUrl="https://example.com/verify" />
});

if (error) {
  console.error('Failed to send:', error);
}

Resend can receive a React component directly. If not included in the call, Resend will automatically include a plain-text version of the email.

Internationalization

See references/I18N.md for complete i18n documentation with examples for next-intl, react-i18next, and react-intl.

Common Mistakes

Mistake	Fix
Using flexbox/grid	Use `Row` and `Column` components or tables
Using `rem` units	Use `pixelBasedPreset` with Tailwind
Using SVG images	Use PNG or JPG instead
Using media queries (sm:, md:)	Design mobile-first with stacked layouts
Template vars in JSX (`{{name}}`)	Use props: `{props.name}`
Missing border type	Always specify: `border-solid`, `border-dashed`, etc.
Fixed image dimensions on content images	Use responsive: `w-full h-auto` (fixed OK for small icons)
Emails over 102KB	Gmail clips larger emails - reduce size

Best Practices

Test across clients - Gmail, Outlook, Apple Mail, Yahoo. Use Litmus or Email on Acid for precision.
Keep it responsive - Max-width ~600px, test on mobile.
Use absolute image URLs - Host on reliable CDN, always include alt text. If local development, copy to emails/static/.
Provide plain text version - Required for accessibility.
Add TypeScript types - Define interfaces for all email props.
Include PreviewProps - For development testing.
Handle errors - Always check for errors when sending.
Use verified domains - For production from addresses.

Additional Resources

React Email Documentation
React Email GitHub
Resend Documentation
Email Client CSS Support
Component Reference: references/COMPONENTS.md
Internationalization Guide: references/I18N.md
Common Patterns: references/PATTERNS.md
Sending Guide: references/SENDING.md

适合场景

用户想查找某类 Agent Skill 时

需要根据任务场景推荐可安装能力包时

需要对比不同来源的安装命令和来源信息时

需要参考平台分布和安装热度时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明，方便继续核验

能力 4

补充不同宿主或平台的使用分布数据

能力 5

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用；具体调用方式请以来源页面和 README 为准。

平台分布

Claude Code

28.51%

按下载量换算10,613

Cursor

19.82%

按下载量换算7,378

OpenCode

18.47%

按下载量换算6,875

Gemini CLI

11.72%

按下载量换算4,363

github-copilot

7.98%

按下载量换算2,970

Codex

3.31%

按下载量换算1,232

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

需要联网

该 Skill 可能需要联网访问来源站点、仓库或外部 API；具体网络访问范围需要结合源码和 README 复核。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。

来源信息

GitHub 仓库

github.com

/resend/react-email

SKILL.md 来源

github.com

/resend/react-email/tree/main/skills/react-email

skills-sh

skills.sh

/resend/react-email/react-email

agentskills-to

agentskills.to

/resend/react-email/react-email

继续浏览同类 Skills

更多前端设计 Skills（10,216）返回 Skills 目录

上一个 Skill

react-doctor（React doctor 安全）

下一个 Skill

react-email（React 邮件）