skills.rest
drdanmaggs
drdanmaggsCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react-email

Create and send HTML emails with React Email components and Tailwind.

Updated Mar 19, 2026
Search Tags:#automation#templates#react#components#rendering#email#tailwind
One-click install
npx skills add https://github.com/drdanmaggs/rocket-fuel --skill react-email-drdanmaggs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-email
Source: https://github.com/drdanmaggs/rocket-fuel/tree/main/internal/plugin/skills/react-email
Command: npx skills add https://github.com/drdanmaggs/rocket-fuel --skill react-email-drdanmaggs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps teams create, style, and ship consistent HTML emails using React Email components across major clients, dramatically reducing hand-tuning and rendering issues.

Core Features & Use Cases

  • Build templates with React Email's core components (Html, Head, Body, Container, Row, Column, Text, Button, Img, Hr) and optional Tailwind styling via the pixelBasedPreset.
  • Manage internationalization and multi-language content with supported i18n libraries (next-intl, react-i18next, or react-intl).
  • Provide safe asset handling patterns and a production-friendly baseURL mechanism to serve images from a CDN or hosting service.
  • Support example patterns from the references (SENDING.md, PATTERNS.md) to cover common emails like password resets, order confirmations, and notifications.

Quick Start

Load this skill and follow its guidance to scaffold a production-ready HTML email workflow using React Email components and Tailwind with pixelBasedPreset.

Frequently Asked Questions about react-email

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build HTML emails with React components and ensure they render correctly across clients?▼

Send HTML emails built with React by integrating a provider like Resend. The workflow includes constructing templates, handling internationalization, and applying a production-friendly baseURL mechanism to safely serve images from a CDN.

Can I use Tailwind to style React Email components for pixel-perfect layouts?▼

Yes, you can use Tailwind to style React Email components. The workflow supports a pixelBasedPreset specifically designed to manage layout structures like Row and Column, enabling pixel-perfect styling without manual CSS overrides.

How do I handle internationalization for multi-language content in React Email templates?▼

Handle internationalization in React Email templates by integrating supported i18n libraries such as next-intl, react-i18next, or react-intl. This allows you to manage and render multi-language content dynamically within your email components.

What is the best way to manage image assets and URLs when building HTML emails with React?▼

Manage image assets in React emails by using a production-friendly baseURL mechanism. This pattern provides safe asset handling by directing image paths to a CDN or external hosting service, ensuring images load reliably in production.

Does React Email work with i18n libraries like next-intl and react-i18next?▼

Yes, React Email works with i18n libraries like next-intl and react-i18next. The template construction process explicitly supports these libraries to manage multi-language content and internationalization within your email components.

Related Skills

Explore More Software Engineering Skills→
mjamoremjamore

expo-tailwind-setup

Configure Tailwind CSS v4 styling in Expo projects with NativeWind and Metro.

Community
Intermediate
jnlanahanjnlanahan

add-email

Integrates transactional email into web apps with provider detection and React Email templates.

Community
Advanced
Xza85hrfXza85hrf

i18n

Set up internationalization and extract translatable strings in React, Next.js, Vue, and Angular projects.

Community
Intermediate
wshaddixwshaddix
71

mjml-email-templates

Generate responsive HTML email templates using MJML with .NET Razor syntax.

Community
Intermediate