skills.rest
Rocktown-Labs
Rocktown-LabsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

react-email

Build and send HTML email templates using React Email components and Tailwind styling.

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

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? Creating 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 React Email components with Tailwind styling and the pixelBasedPreset. - Email Client Safety Rules: Enforces table-based layouts, border type specifications, box-border buttons, and rejects SVG/WEBP images, flexbox, media queries, and dark: selectors that break in email clients. - Sending & Internationalization: Render templates to HTML or plain text, send via Resend or other providers, and add multi-language support with next-intl, react-i18next, or react-intl. - Use Case: A developer needs a password reset email for their SaaS app. The Skill asks for brand colors and logo format, then generates a template with proper static asset handling, dev/production URL patterns, and PreviewProps for testing. ## 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 HTML email templates with React components?▼

Use React Email components like Html, Body, Container, Text, and Button from @react-email/components, wrapped in the Tailwind component with pixelBasedPreset. Scaffold a project with npx create-email@latest, then run the dev server to preview templates at localhost:3000.

How to send React Email templates with Resend?▼

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

Does React Email support Tailwind CSS styling?▼

Yes, wrap your email in the Tailwind component and use utility classes, which are converted to inline styles automatically. Always include pixelBasedPreset imported from @react-email/components because email clients do not support rem units.

Why can't I use flexbox or media queries in email templates?▼

Outlook uses the Word rendering engine which ignores flexbox and grid, while Gmail strips media queries. Use Row and Column components for table-based layouts and stacked mobile-friendly designs instead of sm:, md:, or lg: breakpoint classes.

Can I use SVG images in HTML emails?▼

No, SVG and WEBP images do not render reliably in Gmail, Outlook, and Yahoo Mail. Convert logos and icons to PNG or JPG, place them in the emails/static folder, and reference them with absolute URLs using a baseURL pattern for dev 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 component, set lang={locale} on the Html element, create JSON message files per locale, and use a translator function to resolve strings.

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
vercelvercel
246

email

Automate transactional email sending from Vercel deployments with Resend and React Email templates.

Official
Intermediate
viralcodeviralcode
61

smtp-send

Send emails via SMTP with text, HTML, and attachments.

Community
Intermediate
seiggyseiggy
57

mjml-email-templates

Compiles MJML markup into responsive HTML email templates for .NET applications.

Community
Intermediate