1. Habit
  2. Skills
  3. React Email skill
resend · 12K installs

React Email skill
Runs by itself, emails folder changes.

Email templates render in every inbox.

Install the React Email skill and make it a habit: follow https://gethabit.dev/skills/resend/react-email.md

  1. 1Copy
  2. 2Paste into Claude Code, Codex or Cursor
  3. 3It runs by itself

12K installs20K starsMIT licenceSource on GitHub ↗

React Email

by resend · 12K installs

The skill

The react email skill builds HTML email templates with React components, renders them to HTML and plain text, embeds the visual email editor and sends with Resend.

Only when you ask.

The habit

Email templates render in every inbox.

↻ Runs by itselfemails folder changes

How the habit works.
You don't have to.

Three questionsWhen does it start? How does it check its work? What does it remember?

01

It starts by itself

emails folder changes. Runs in GitHub Actions or Claude Code routine.

  • ↻ emails folder changes
  • pull_request paths: emails/**

02

It checks its work

export and markup checks. If a check fails, it tries again.

  • ✓email export finishes without errors
  • ✓each exported HTML file stays under 102KB
  • ✓every Button has box-border and every border has a type
  • ✓no dark:, sm: or md: classes and no SVG or WEBP images

03

It remembers

template fix log. The next run reads it first: templates fixed before and checks that failed.

loops/react-email-template-loop/run-log.md

One run, step by step.
Then it stops.

Stop ruleStops after 10 templates or 2 retries per template.

  1. 01

    Find changed templates

    The run lists the templates in the emails folder that the pull request touched.

  2. 02

    Ask what is missing

    For a new template without brand color, logo, tone or production URL, the agent asks you first.

  3. 03

    Review the markup

    The agent checks structure: Head inside Tailwind, Preview first in Body, one Container, Row and Column instead of flexbox or grid.

  4. 04

    Fix the styles

    The agent uses pixelBasedPreset, adds box-border and border types, and removes media query and theme classes.

  5. 05

    Check accessibility

    The agent makes sure there is one h1, alt text on images and link text that names the destination.

  6. 06

    Export to HTML

    The agent runs email export with --plainText and checks the size of each file.

  7. 07

    Log the run

    The run writes each template and its fixes into the run log.

What it may do.
Nothing more.

Safe by defaultIt writes only in its own folder and asks you before anything goes out.

Is it for you?
Use it when it fits.

Quick checkRead both lists. If the left one sounds like you, the React Email skill helps.

Use it when

  • ✓ You build transactional email templates
  • ✓ You add an email editor to an app
  • ✓ You render React emails to HTML

Skip it when

  • – You only send plain text emails
  • – You do not use React

Questions

React Email skill, answered.

Does the loop send emails?

No. It only reviews, fixes and exports templates. Sending stays your own step.

Why no media queries?

The skill says most email clients do not support them, so it uses Row and Column instead.

Why the 102KB limit?

The skill says Gmail clips emails that are larger.

How do I install the React Email skill?

Copy the prompt at the top into your agent. It installs the skill from resend/resend-skills and sets up the habit. Or run npx skills add resend/resend-skills --skill react-email.

Is the React Email skill free?

Yes. It is published under MIT. Habit is free too.

React Email. Now as a habit.

Install the React Email skill and make it a habit: follow https://gethabit.dev/skills/resend/react-email.md

  • Free
  • No account
  • Undo in one line

All resend skills →More code skills →

Works in

  • Claude Code
  • Codex
  • Cursor
  • ChatGPT
  • Claude app

Made by resend, published under MIT. Habit links to the original and never changes it. Is this your skill?

Copying didn't work here. Select the line and copy it by hand.