skills.rest
Tgoldi
TgoldiCOMMUNITY
Explore all skills by this author →
GitHub

react-email

Create responsive HTML email templates using React Email components and Tailwind styling.

1|Updated May 10, 2026
Search Tags:#i18n#tailwind#email templates#resend#react-email#transactional email#html email
One-click install
npx skills add https://github.com/Tgoldi/claude-skills --skill react-email-tgoldi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-email
Source: https://github.com/Tgoldi/claude-skills/tree/main/react-email
Command: npx skills add https://github.com/Tgoldi/claude-skills --skill react-email-tgoldi

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Building HTML emails that render correctly across Gmail, Outlook, and Apple Mail requires navigating strict email client limitations like no flexbox, no media queries, and no rem units. This Skill guides the creation of transactional email templates with React components that compile to email-client-safe HTML. ## Core Features & Use Cases - Component-Based Email Templates: Build emails with React Email components like Html, Body, Container, Button, and Tailwind with the pixelBasedPreset for pixel-based styling. - Internationalization Support: Implement multi-language emails using next-intl, react-i18next, or react-intl with locale-aware formatting and RTL support. - Sending Integration: Render templates to HTML or plain text and send via Resend, Nodemailer, or SendGrid. - Use Case: Create a password reset email with an expiring link button, preview it locally at localhost:3000, then send it through the Resend SDK with a single react prop. ## Quick Start Scaffold a new React Email project with create-email, start the dev server, and build a welcome email template with a verification button.

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 Email?▼

Scaffold a project with npx create-email@latest, then build a component using Html, Tailwind with pixelBasedPreset, Body, Container, and content components like Text and Button. Add PreviewProps for testing and preview templates at localhost:3000.

How do I send React Email templates with Resend?▼

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

Can I use Tailwind CSS media queries in email templates?▼

No, email clients do not support media queries, so responsive classes like sm:, md:, and lg: should be avoided. Use stacked, mobile-friendly layouts with table-based Row and Column components instead of flexbox or grid.

How do I add internationalization to React Email templates?▼

React Email supports next-intl, react-i18next, and react-intl. Pass a locale prop, load message files per locale, set the Html lang attribute, and use Intl APIs for locale-specific date and currency formatting.

Why should I avoid SVG images and rem units in HTML emails?▼

Email clients do not render SVG or WEBP images and do not support rem units. Use PNG or JPEG images hosted on absolute URLs and apply the pixelBasedPreset so Tailwind outputs pixel values.

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
evolv3aievolv3ai
3

email-gateway

Send emails through Resend, SendGrid, Mailgun, and SMTP2Go providers.

Community
Advanced
maltehedderichmaltehedderich
6

html-email-templates

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

Community
Advanced
freedomw1987freedomw1987
2

react-html5-drag-drop-pitfalls

Diagnose silent HTML5 drag-and-drop failures in React applications.

Community
Intermediate