skills.rest
cgRGM
cgRGMCOMMUNITY
Explore all skills by this author →
Website𝕏@c_g_stewartGitHub

react-email

Build React Email templates for transactional and marketing messages.

1|Updated Oct 10, 2025
Search Tags:#localization#tailwind#email templates#resend#transactional email#react email#html email
One-click install
npx skills add https://github.com/cgRGM/rivercitymd --skill react-email-cgrgm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-email
Source: https://github.com/cgRGM/rivercitymd/tree/main/.agents/skills/react-email
Command: npx skills add https://github.com/cgRGM/rivercitymd --skill react-email-cgrgm

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you create production-ready HTML emails with React Email while avoiding common email-client pitfalls, saving time on formatting, layout, and sending setup.

Core Features & Use Cases

  • Email Template Authoring: Build welcome emails, password resets, order confirmations, newsletters, and notifications with React components.
  • Email-Safe Styling: Apply Tailwind-based styling with email-client-aware rules for buttons, borders, images, layouts, and typography.
  • Workflow Guidance: Handle localization, static assets, preview props, rendering, and sending through providers like Resend.
  • Use Case: A product team can generate a branded password reset email that works in Gmail, Outlook, and Apple Mail without broken layouts or unsupported CSS.

Quick Start

Use the react-email skill to create a polished transactional email template with verified sender details, responsive-safe styling, and the correct asset and preview setup.

Frequently Asked Questions about react-email

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

FAQPage Schema
How do I build transactional email templates with React that render correctly in Gmail and Outlook?▼

Build transactional email templates using React Email components with email-client-aware rules for buttons, borders, and typography. This ensures your HTML emails render correctly across Gmail, Outlook, and Apple Mail without broken layouts or unsupported CSS.

Can I use Tailwind CSS to style HTML emails without breaking email client layouts?▼

Yes, you can use Tailwind CSS to style HTML emails by applying email-client-aware pixel conversion rules. This approach enforces email-safe styling for layouts and typography, preventing broken layouts caused by unsupported CSS in various email clients.

What's the best way to set up a sending workflow for React Email templates with Resend?▼

Set up a sending workflow for React Email templates by configuring Resend with verified sender domains. This handles static asset management, preview props, and rendering, ensuring your transactional and marketing messages are delivered reliably.

Does React Email support multi-language campaign localization for transactional messages?▼

React Email supports multi-language campaign localization for transactional and marketing messages. It provides workflow guidance to handle localization within your Next.js or other React apps, ensuring correct content delivery for diverse audiences.

Why do my React email templates have broken layouts when viewed in Apple Mail?▼

Broken layouts in Apple Mail often result from using unsupported CSS or unhandled static assets. This Skill enforces React Email component usage, Tailwind pixel conversion, and email-client limitations to prevent these formatting and layout issues.

How do I add preview props to a React Email password reset template?▼

Add preview props to a React Email password reset template by configuring the provided workflow guidance. This allows you to test and render email-safe layouts with static assets before sending transactional messages through your provider.

Related Skills

Explore More Software Engineering Skills→
zuzu59zuzu59

convex-quickstart

Automate Convex project setup across React, Next.js, Vue, and Svelte.

Community
Intermediate
lukemcdonaldlukemcdonald
1

react-email

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

Community
Intermediate
FabioFioritaFabioFiorita

react-email

Build HTML email templates with React Email and Tailwind.

Community
Advanced
gil00pitagil00pita

react-email

Create cross-client email templates with React components and render them to HTML.

Community
Intermediate