skills.rest
eyenalxai
eyenalxaiCOMMUNITY
Explore all skills by this author →
GitHub

react-email

Build, render, and send HTML email templates using React Email components.

Updated Sep 5, 2023
Search Tags:#tailwind#email templates#resend#react-email#transactional email#email editor#html email
One-click install
npx skills add https://github.com/eyenalxai/dotfiles --skill react-email-eyenalxai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-email
Source: https://github.com/eyenalxai/dotfiles/tree/main/.agents/skills/react-email
Command: npx skills add https://github.com/eyenalxai/dotfiles --skill react-email-eyenalxai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react-email, @react-email/editor, resend, and includes references (resource) components.

What problem does it solve? Writing HTML emails that render correctly across Gmail, Outlook, Apple Mail, and Yahoo is notoriously difficult because email clients lack support for modern CSS like flexbox, grid, media queries, and SVG. This Skill guides AI agents to build email templates with React Email components that follow email-client-safe patterns automatically. ## Core Features & Use Cases - Component-Based Email Templates: Create welcome emails, password resets, order confirmations, newsletters, and notifications using components like Html, Body, Container, Button, Row, and Column with Tailwind styling via pixelBasedPreset. - Rendering and Sending: Render templates to HTML or plain text and send them through Resend, Nodemailer, or SendGrid. - Visual Email Editor: Embed the @react-email/editor component (built on TipTap) into an app so end users can compose email-ready HTML with bubble menus, slash commands, and themes. - Internationalization: Implement multi-language emails with next-intl, react-i18next, or react-intl, including RTL language support. - Use Case: Ask the agent to create a password reset email for your SaaS app; it will ask about brand colors and logo format, then produce a TypeScript template with correct static image handling, box-border buttons, and preview props. ## Quick Start Ask the agent to create a welcome email template with React Email, providing your brand color, logo file, and production hosting URL.

Frequently Asked Questions about react-email

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

FAQPage Schema
How do I create an HTML email template with React components?▼

Install react-email and compose templates using components like Html, Body, Container, Heading, Text, and Button, styled with the Tailwind component and pixelBasedPreset. Render the template to an HTML string with the render function, then send it through providers like Resend or Nodemailer.

How do I send React Email templates with Resend?▼

Pass the React component directly to the Resend SDK's react field in resend.emails.send along with from, to, and subject. The Resend Node SDK automatically handles both HTML and plain-text rendering of the template.

Can I use flexbox or CSS grid in HTML emails?▼

No, flexbox and CSS grid are not reliably supported because Outlook uses the Word rendering engine. Use React Email's Row and Column components, which produce table-based layouts that work across Gmail, Outlook, Apple Mail, and Yahoo.

Why shouldn't I use SVG images in email templates?▼

SVG and WEBP images do not render reliably in major email clients including Gmail, Outlook, and Yahoo. Use PNG or JPG images hosted at absolute URLs on a CDN, and reference them through a baseURL pattern that switches between development and production.

How do I add multi-language support to React Email templates?▼

React Email supports next-intl, react-i18next, and react-intl for internationalization. Add a locale prop to your template, set lang and dir attributes on the Html component, and load translations from message files organized per locale.

Can I embed a visual email editor in my React application?▼

Yes, the @react-email/editor package provides an EmailEditor component built on TipTap with bubble menus, slash commands, an inspector sidebar, and built-in themes. It exports editor content to email-ready HTML and plain text via composeReactEmail.

Related Skills

Explore More Software Engineering Skills→
oakossoakoss
14

brand-designer

Generate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.

Official
Advanced
mrsknetworkmrsknetwork

email

Render HTML email templates and queue asynchronous delivery via Celery.

Community
Advanced
maltehedderichmaltehedderich
6

html-email-templates

Build HTML email templates with table-based layouts and inline CSS.

Community
Advanced
webdevarifwebdevarif

neuro-theme-engine

Builds section-based theme systems with live preview, CSS variables, and React component registries.

Community
Advanced