react-email Skill for Claude: What It Does and How to Install It

Makes Claude build HTML email templates with React Email components, then preview, render and send them.

Installs: 13.1K; on skills.sh
Stars: 208; on GitHub
Files: 6; besides SKILL.md
Updated: Oct 2026; last repo commit

This skill is Resend's own guide for writing emails with React Email. It sets structure rules (Html, Head, Body, Container, Preview first in Body), email-safe styling rules (Tailwind with pixelBasedPreset, no flexbox or grid, no media queries, no SVG or WEBP) and 9 best practices.

Before writing code it tells Claude to ask for brand colors, logo, tone and the production URL for images. It also covers rendering to HTML or plain text, the email CLI, the embeddable visual editor and translations.

It loads when you ask for an email template, an email editor or sending with Resend. It runs npm, npx and the React Email dev server in your project.

Good for

Developers building welcome, reset and order emails
Teams adding an email editor to their app
Anyone sending templates through Resend

Install react-email

Claude Code

Copy this prompt.

Install the react-email skill in Claude Code. Run this command:

/plugin marketplace add resend/resend-skills
/plugin install resend@resend-skills

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Pick one route. The plugin route installs the resend plugin: 5 skills (counted from the repo tree) and a hosted Resend MCP server entry from mcp.json, which the README says signs in with OAuth. The skills routes install just this skill. The skill writes code for the react-email npm package in your own project.

Built from the package data we hold. Not yet tested by us. Source.

What's in the skill

When it loads

Use when building HTML email templates with React components, adding a visual email editor to an application using the React Email visual editor, rendering emails to HTML, or sending emails with Resend. Covers welcome emails, password resets, notifications, order confirmations, newsletters, transactional emails, and the embeddable email editor component.

Sections in SKILL.md

Installation
Adding to an Existing Project
Basic Email Template
Behavioral Guidelines
Essential Components
Before Writing Code
Static Files and Images
Directory Structure
Dev vs Production URLs
Styling
Key Rules
Required Classes
Structure Notes
Rendering
Convert to HTML
Convert to Plain Text

Key facts

Author: Resend (vendor's own repo)
License: MIT (SKILL.md frontmatter and the repo README)
Installs on skills.sh: 13,063 (Nov 2, 2026)
GitHub stars: 208 for the whole resend/resend-skills repo (Nov 2, 2026)
Last repo commit: Oct 28, 2026
What it includes: 7 files including SKILL.md: 6 reference files under references/ and no scripts
Needs: Node.js and the react-email package in your project. Sending through Resend needs a RESEND_API_KEY
Part of: The resend plugin in resend/resend-skills. The repo has 5 skills, and its mcp.json registers Resend's hosted MCP server
Works in: Claude Code, Cursor and any Agent Plugins client, per the repo README

What it includes

npm i react-email, or npx create-email@latest, then npm run dev
Adds the package or scaffolds a starter project, then runs the preview server at localhost:3000 for templates in the emails folder.
Runs code · Install and preview
Asks for brand color, logo, style and production URL
Claude asks these four questions first if you have not given the answers.
Read · Before writing code
Html, Head, Body, Container, Section, Row, Column, Tailwind
Writes the email component with Preview first inside Body and PreviewProps for the dev preview.
Try: “Build a password reset email with our blue brand color and a reset button.”
Write · Template structure
Tailwind with pixelBasedPreset, no flexbox, grid or media queries
Lists what email clients do not support and the classes Button and borders need.
Read · Styling rules
Images go in emails/static, with a dev versus production base URL
Shows a baseURL pattern and tells Claude to ask for your production hosting URL.
Write · Static files and images
render() to HTML, or plain text with plainText: true
Converts a template to HTML or plain text in code.
Read · Rendering
Resend SDK example; Nodemailer, Mailgun and SendGrid in SENDING.md
Sends with the Resend Node SDK using RESEND_API_KEY. SENDING.md also covers uploading a template to Resend and other providers.
Network · Sending
email dev, build, start, export, resend setup, resend reset
Preview server, production build, static HTML export, and connecting or removing a stored Resend API key.
Runs code · email CLI
@react-email/editor: EmailEditor, StarterKit, Inspector, theming
Embeds a TipTap-based email editor in your app and exports email-ready HTML and plain text. Details in references/EDITOR.md.
Write · Visual editor
next-intl, react-i18next and react-intl (I18N.md)
Shows how to localize templates with one of three libraries.
Write · Translations
Change only what you asked for; no {{variable}} in JSX
Tells Claude to keep the rest of the code intact and to put mustache variables only in PreviewProps.
Read · Behavioral guidelines

From the official docs

Permissions

Low risk

Claude installs npm packages, writes template files and runs a local preview server in your project. Sending uses your Resend key, so check the recipient list before you approve a send.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It installs npm packages in your project
SKILL.md and the reference files use npm i react-email, npx create-email@latest, and npm install for the editor and i18n libraries. Review each command before it runs. github.com
The Resend setup command stores an API key
The email CLI table lists resend setup (connect with an API key) and resend reset (remove the stored key). Use a key limited to what you need. github.com
Sending examples send real email
The Resend SDK example calls resend.emails.send. Keep test recipients to your own address. github.com
The plugin route adds an MCP server
The plugin registers the hosted Resend MCP server at mcp.resend.com. The skills-only routes do not add it. github.com

Security advisories

No published security advisories as of Nov 2, 2026.

Technical details

Turning on read-only	No read-only mode. Use version control.
Talks to	Package downloads from npm when you run the install commands
Sign-in and keys	SKILL.md and SENDING.md read the Resend key from the RESEND_API_KEY environment variable. The email resend setup command stores a key you give it in the terminal.
Scopes	Installs the react-email package and, if asked, the editor and translation libraries with npm Runs email dev, which starts a preview server on port 3000 by default Writes template files in your emails folder Can send email through the Resend SDK using RESEND_API_KEY

Questions

What does the react-email skill do?

It teaches Claude to build HTML emails from React components with the React Email library. Claude uses it for welcome emails, password resets, order confirmations and newsletters, and to render and send them.

How do I install react-email?

Use the install box at the top of this page. The skill also uses the react-email npm package in your project, which SKILL.md says to add with npm or scaffold with create-email.

Does it need a Resend account?

Not to build or preview templates. SKILL.md says React Email works with any provider, and SENDING.md shows Resend, Nodemailer, Mailgun and SendGrid. The Resend example reads RESEND_API_KEY.

Does it work in the Claude app?

The install box has no Claude app upload for it, because the skill runs npm and a local preview server. Use Claude Code. The repo README names Claude Code, Cursor and Agent Plugins clients.

Is it safe?

It installs npm packages and runs a local dev server in your project, and it writes email files there. If you ask it to send, it uses your Resend key and sends real email. SENDING.md says the Resend setup command asks you to provide the key in the terminal. Review package installs before they run (our advice).

Can I use Tailwind and flexbox in emails?

Tailwind yes, flexbox no. SKILL.md says to use Tailwind with pixelBasedPreset and never flexbox or grid, because many email clients do not support them. Use Row and Column instead.

Is this skill from Resend?

Yes. It is in Resend's own repo, resend/resend-skills. SKILL.md lists Resend as author, and the README says this copy is synced from resend/react-email, so edits are made there.

What is the difference between react-email and resend-cli?

react-email is for writing and rendering email templates. resend-cli runs the Resend command line to send mail and manage the account. Both are in the same repo.

Information

updated Nov 2, 2026

Repository: resend/resend-skills
Folder: skills/react-email

resend/resend-skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 5

react-email SKILL.md · github.com
resend/resend-skills README · github.com
resend plugin.json · github.com
resend-skills mcp.json · github.com
react-email SENDING.md · github.com