React Email skill for agents
React Email skill
A skill that teaches an agent to build emails with React Email: email-client rules, HTML and text rendering, sending, translations, editor
- 19,859 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill only changes the agent's instructions, but the agent then writes files into the emails folder and installs npm packages
- The sending example uses a RESEND_API_KEY that should not be kept in code
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/react-email-skillDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill only changes the agent's instructions, but the agent then writes files into the emails folder and installs npm packages
- The sending example uses a RESEND_API_KEY that should not be kept in code
This is third-party code. Review the repository files before installing.
What it does
The react-email skill sits in the skills/react-email folder of the React Email repository and is added with npx skills add resend/react-email. Once installed, the agent builds emails from the Html, Body, Container, Button, Preview and Tailwind components and keeps the templates in an emails folder. Before writing code it asks for your brand color, the logo format (PNG and JPG fit, and it warns about SVG and WEBP), the tone of the email and the address where images will be hosted in production. The core of the skill is a set of rules for email clients. For Tailwind the agent uses the pixelBasedPreset preset because email clients do not understand rem units. It replaces flexbox and grid with the Row and Column components, avoids media queries and the dark: and light: selectors, adds box-border to a button and border-solid to borders. Preview goes first inside Body, Head sits inside Tailwind and test data goes into PreviewProps. Template variables written in double curly braces go only into PreviewProps and never into the component markup. A finished template is turned into HTML or plain text by the render function, and the email dev command starts a preview server on port 3000. The skill includes sending examples for the Resend SDK, Nodemailer and SendGrid, and translation guides for next-intl, react-i18next and react-intl. A separate reference covers the embeddable visual email editor @react-email/editor, built on TipTap and ProseMirror, and the accessibility section asks for a single h1, descriptive alt text and 4.5 to 1 contrast.
Who it is for. For React and TypeScript developers who build transactional emails and newsletters and want the agent to respect email-client limits from the first draft.
Good fit when
- You need an email-confirmation, password-reset or order-confirmation message and want a ready component with types and PreviewProps
- Your email layout breaks in Outlook or Gmail because the agent habitually writes flexbox and media queries
- Emails must go out in several languages and you are choosing between next-intl, react-i18next and react-intl
- You want to embed a visual email editor built on @react-email/editor into your app
- A template has to be exported to static HTML and plain text with the email export command
Not a fit when
- The project is not JavaScript or TypeScript: the skill is built entirely on React components and the react-email package
- You need general advice on deliverability, domain warm-up or spam filters: the skill covers building and sending from code and says little about that
- You need media queries, flexbox or a dark theme in an email: the skill forbids the agent to use them
- You want to manage Resend contacts, broadcasts and domains from chat: the catalog has the official Resend MCP Server for that
Example request
Build a password-reset email with React Email: a PNG logo, our blue brand color, a button with a link, and show how to send it through ResendLimitations
- The skill needs Node.js and a package manager: react-email is installed with npm i react-email, or a starter project is created with npx create-email@latest.
- Sending in the examples goes through the Resend SDK, which needs a RESEND_API_KEY from a Resend account. The email resend setup command stores such a key for the CLI.
- The rules on flexbox, media queries, SVG and WEBP reflect email-client support at the time the skill was written, and the skill leaves testing on real clients to you.
- Because media queries are banned, emails come out without responsive styles: the width stays around 600 pixels. Gmail clips emails heavier than 102 KB.
- The TESTS.md file lists check scenarios with notes on runs without the skill and with it. It is the authors' internal log, and the repository has no independent quality evaluation.
- MIT license.
How to disable. Delete the react-email skill from your agent's skills folder and it stops loading these rules. Templates already created in the emails folder and the react-email package stay in the project; remove the package with npm uninstall react-email.
FAQ
How do I connect the React Email skill to Claude Code, Cursor or Codex?
Run npx skills add resend/react-email in the project. The authors name Claude Code, Codex, Cursor and GitHub Copilot as compatible, and the list ends with others. The skill itself follows the Agent Skills specification.
Why does the agent refuse to use flexbox and media queries in an email?
The skill explicitly bans flexbox, grid, media queries and the dark: and light: selectors because email clients support them poorly. If you ask for media queries, the agent warns you and suggests another route, such as the Row and Column components.
Why does the skill insist on pixelBasedPreset and the box-border class?
Email clients do not understand the rem unit, so Tailwind is configured with the pixelBasedPreset preset from the react-email package. The box-border class on Button keeps padding inside the button width. The border-solid class sets a border type that clients do not inherit.
Can I use {{name}} in an email template?
The skill keeps that syntax out of component markup, where the agent uses a property such as {firstName}. A string with double curly braces is allowed only in PreviewProps. If you insist, the agent explains that the template would become invalid code.
How do I build a multilingual email with this skill?
The I18N.md reference covers next-intl, react-i18next and react-intl: installation, setup and translation files organized by namespace. The locale is passed to the component and written to the lang attribute of the root Html, and text direction is set with the dir attribute.
Can the skill add a visual email editor?
Yes, the EDITOR.md reference describes the @react-email/editor package. It has the EmailEditor component with basic and minimal themes, a StarterKit of more than 35 extensions and the composeReactEmail function that outputs HTML and plain text.
Discussion
No questions or reviews yet.
Related
SkillsAnnotation toolbar for React pages: click an element to hand the agent its selector and context, plus skills for setup and an autonomous UI critique
Four official Material UI skills: styling, theming, Next.js integration and working alongside Tailwind CSS
React Joyride skill for agents
React Joyride
A skill for React Joyride v3: guided product tours, steps, events, custom components and a guide to the usual breakages
Skills against boilerplate-looking UIs: layout, type, motion and spacing, plus reference image generation for web and mobile
A registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles
Skill and MCP server for Shaders: the agent builds backgrounds, glass, gradients and cursor effects on WebGPU for React, Vue, Svelte, Solid and JS
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| React Email skill for agents (this entry) | yes | 19,859 | ||
| Resend skills | no | API key | 203 | Resend's official set: sending and receiving email, React Email and the CLI, plus a remote MCP |
| Resend MCP Server | yes | OAuth | 576 | Resend's official MCP server for managing email, contacts and domains from an agent |
README in short
The React Email repository has the main component documentation with a button example, a Using with AI section that gives the skill install command, and a link to the docs for models in the llms.txt format. The skills/react-email folder holds a SKILL.md under 350 lines, six references (components, editor, translations, patterns, sending, styling), a short note on the structure and a file of test scenarios. The core instructions load at once and the references load on demand.