skills.rest
AO-HyS
AO-HySOFFICIAL
Explore all skills by this author →
WebsiteGitHub

react-email

Create HTML email templates with React Email components for transactional and marketing emails.

Updated Jun 28, 2026
Search Tags:#i18n#tailwind#email templates#resend#react-email#transactional email#html email
One-click install
npx skills add https://github.com/AO-HyS/aohys.com --skill react-email-ao-hys
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-email
Source: https://github.com/AO-HyS/aohys.com/tree/main/.agents/skills/react-email
Command: npx skills add https://github.com/AO-HyS/aohys.com --skill react-email-ao-hys

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Building 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 produce email templates that respect these constraints from the start, avoiding broken layouts and rendering bugs. ## Core Features & Use Cases - Component-Based Email Templates: Build welcome emails, password resets, order confirmations, notifications, and newsletters using React Email components with Tailwind styling via the pixelBasedPreset. - Email Client Safety Rules: Enforces table-based layouts, pixel units, border type declarations, box-border buttons, and PNG/JPG-only images so templates render consistently across clients. - Sending and Internationalization: Covers rendering to HTML or plain text, sending through Resend and other providers, and multi-language support with next-intl, react-i18next, or react-intl including RTL languages. - Use Case: Ask for a password reset email for your SaaS app, and the agent first asks about brand colors, logo format, and production asset hosting, then generates a template with correct static file handling and dev/production image URLs. ## Quick Start Ask the agent to create a welcome email template with React Email for your product, providing your brand color, logo file, and production asset 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 HTML email templates with React components?▼

Scaffold a project with create-email, then build templates using React Email components like Html, Body, Container, Text, and Button wrapped in the Tailwind component with pixelBasedPreset. Preview templates locally with the dev server on localhost:3000.

How do I send React Email templates with Resend?▼

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

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

No, flexbox and CSS grid are not supported because Outlook uses the Word rendering engine. Use React Email's Row and Column components with percentage widths to build table-based multi-column layouts instead.

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

SVG and WEBP images do not render reliably in Gmail, Outlook, and Yahoo Mail. Use PNG or JPG images hosted at absolute URLs on a CDN, and always include alt text for accessibility.

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

React Email supports next-intl, react-i18next, and react-intl. Add a locale prop to your component, set lang on the Html element, load message files per locale, and set dir="rtl" for languages like Arabic and Hebrew.

Why are my email images broken in production but working locally?▼

Relative paths and localhost URLs break in production because email clients fetch images from absolute URLs. Use a baseURL variable that is empty in development and points to your production CDN when NODE_ENV is production.

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
trusted-americantrusted-american

mailgun

Send transactional emails and manage domains and webhooks via Mailgun API.

Official
Advanced
jasonkneenjasonkneen
471

clicky-email-assistant

Draft, rewrite, summarize, and triage email content across Gmail, Outlook, and Apple Mail.

Community
Intermediate
delta-and-betadelta-and-beta

engineer-in-app-messages

Design and deploy Braze in-app messages across campaigns, canvases, and API-triggered workflows.

Community
Advanced