skills.rest
resend
resendOFFICIAL
Explore all skills by this author →
Website𝕏@resendGitHub

react-email

Build HTML email templates with React Email components and Tailwind styling.

19.6k|1.1k|Updated Sep 19, 2022
Search Tags:#automation#documentation#i18n#tailwind#email-templates#react-email
One-click install
npx skills add https://github.com/resend/react-email --skill react-email-resend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-email
Source: https://github.com/resend/react-email/tree/main/skills/react-email
Command: npx skills add https://github.com/resend/react-email --skill react-email-resend

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

The React Email Skill standardizes how AI agents learn, assemble, and validate HTML emails by leveraging the React Email component library, Tailwind styling, and a structured reference system to ensure cross-client compatibility and accessibility.

Core Features & Use Cases

  • Build HTML emails with the React Email components (@react-email/components) and Tailwind for consistent styling
  • Access on-demand references (references/COMPONENTS.md, references/I18N.md, references/PATTERNS.md, references/SENDING.md) to guide implementation
  • Follow best practices for responsive layouts, images, typography, and cross-client rendering in email templates
  • Load core instructions on activation and consult references for advanced topics as needed

Quick Start

Load this skill and prompt it with a concrete email task; it will apply core instructions and fetch references as needed.

Frequently Asked Questions about react-email

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

FAQPage Schema
How do I build HTML email templates with React?▼

React Email templates are built using React components and Tailwind styling to generate consistent HTML, supporting transactional emails like password resets, welcome messages, and order confirmations.

What is the best way to ensure cross-client compatibility for HTML emails?▼

Cross-client compatibility for HTML emails is ensured by leveraging React Email components alongside structured references that guide responsive layouts, typography, and media URL handling.

Can I use Tailwind for styling React email templates?▼

Tailwind can be used for styling React email templates, providing utility classes within React Email components to maintain consistent visual formatting across various email types.

Does React Email support internationalization for transactional emails?▼

React Email supports internationalization for transactional emails by providing on-demand access to I18N.md references, guiding proper multi-language implementation during template assembly.

How do I handle media URLs when building React email templates?▼

Media URLs in React email templates are handled through core instructions ensuring proper file handling and image rendering, with detailed implementation patterns available in the PATTERNS.md reference.

What are the limitations of using React for HTML email templates?▼

Using React for HTML email templates has limitations regarding cross-client rendering constraints, requiring consultation of specific references for complex internationalization, sending patterns, and edge case handling.

Related Skills

Explore More Software Engineering Skills→
sobhanashinesobhanashine
1

senior-frontend

Automates React/Next.js scaffolding, component generation, and bundle analysis using Python scripts.

Community
Advanced
PrasadTelasulaPrasadTelasula

email-integration

Send password reset and notification emails via FastAPI-Mail with SMTP and Jinja2 templates.

Community
Intermediate
viralcodeviralcode
61

react-email

Create and send HTML emails using React components and React Email.

Community
Intermediate
devingobledevingoble

verify-email-snapshots

Snapshot test MJML email templates against approved HTML baselines.

Community
Intermediate