Agent skill · Resend

React Email skill for Claude Code, Codex and Cursor

Builds HTML email templates from React components and renders them for sending.

Officialname: react-email★ 205 (repo)pushed 2026-10-17MITSKILL.md on GitHubchecked 2026-11-07

What it does, in the publisher's words

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.

The description field of the SKILL.md. The agent reads only this at startup and decides from it when to load the full skill.

Install React Email

The skills CLI copies the skill into the folder of each agent you pick (Claude Code, Codex, Cursor, Copilot, Gemini CLI, OpenCode, Windsurf...). Add -g for all projects. Needs Node.js 22.20+. docs

npx skills add resend/resend-skills --skill react-email

This repo is a plugin marketplace. Inside Claude Code, add it and install the plugin that holds the skill (resend), or copy only this skill into ~/.claude/skills. docs

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

# or only this skill:
npx skills add resend/resend-skills --skill react-email -a claude-code

Download the skill folder, zip it, then Customize > Skills > + > Create skill > Upload a skill. Code execution must be on (Settings > Capabilities). docs

git clone --depth 1 https://github.com/resend/resend-skills.git /tmp/react-email-src
cp -r /tmp/react-email-src/skills/react-email ./react-email
zip -r react-email.zip react-email

Codex reads skills from .agents/skills in the repo or ~/.agents/skills. Type $ in Codex to use one. docs

npx skills add resend/resend-skills --skill react-email -a codex

gh skill (GitHub CLI 2.90+, preview) installs it for Copilot in VS Code, the CLI and the cloud agent. Copilot also reads .github/skills and ~/.copilot/skills. docs

gh skill install resend/resend-skills react-email

Cursor reads .cursor/skills, .agents/skills and ~/.cursor/skills (and .claude/skills). It does not install loose skills from a GitHub URL, so copy it in. docs

npx skills add resend/resend-skills --skill react-email -a cursor

Installs from the GitHub repo; --path picks this skill out of the repo. Default scope is user (all projects). docs

gemini skills install https://github.com/resend/resend-skills.git --path skills/react-email

OpenCode reads .opencode/skills, ~/.config/opencode/skills and the Claude and .agents folders. docs

npx skills add resend/resend-skills --skill react-email -a opencode

Windsurf (now Devin Desktop) reads .devin/skills, .windsurf/skills and ~/.codeium/windsurf/skills. docs

npx skills add resend/resend-skills --skill react-email -a windsurf

Works with

Claude Code, Claude.ai and Claude Desktop, Codex, GitHub Copilot, Cursor, Gemini CLI, OpenCode, Windsurf and other agents that read the open Agent Skills format.

What's in the SKILL.md

24 sections

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
Sending
CLI Commands
Internationalization
Email Editor
Common Patterns
Email Best Practices
Accessibility
Additional Resources

Bundled files

references/COMPONENTS.md
references/EDITOR.md
references/I18N.md
references/PATTERNS.md
references/SENDING.md
references/STYLING.md

Loaded only when the instructions point to them.

Facts

Skill name: react-email
Publisher: Resend (official)
Repo: resend/resend-skills
License: MIT
Version: 2.1.0
SKILL.md size: 1,424 words, 382 lines
Bundled files: 6, 6 docs
Repo stars: 205 (as of 2026-10-24)
SKILL.md checked: 2026-11-07

Pairs with the Resend MCP server: the server gives the agent the tools, the skill teaches it how to use them.

More skills from resend/resend-skills

Email Best Practices: Deliverability and compliance help: SPF, DKIM, DMARC, bounces, spam and retry logic.
Resend: Sends and receives email with the Resend API: batches, templates, domains, webhooks.

Related frontend & design skills

FAQ

What does the react-email skill do?+

Builds HTML email templates from React components and renders them for sending. In its own SKILL.md, Resend describes it as: "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."

How do I install the react-email skill?+

Run npx skills add resend/resend-skills --skill react-email and pick your agents, or use the tab for your agent above. In Claude Code the skill ends up in ~/.claude/skills/react-email/SKILL.md; in Codex and Cursor in .agents/skills/react-email/.

Does React Email work in Codex, Cursor and Copilot, or only Claude?+

It's a standard SKILL.md, so any agent that reads the Agent Skills format can use it: Claude Code, the Claude apps, Codex, GitHub Copilot, Cursor, Gemini CLI, OpenCode, Windsurf and more.

Who maintains React Email?+

Resend, the company or project behind it, in the resend/resend-skills repo on GitHub, last pushed 2026-10-17. License: MIT.

Read a skill's SKILL.md and scripts before you install it: skills aren't verified by any agent vendor. Claude skills marketplace · How to install skills · MCP servers