skills.rest
curvenote
curvenoteOFFICIAL
Explore all skills by this author →
WebsiteGitHub

react-email

Generate production-ready HTML email templates from React components.

161|10|Updated Sep 24, 2021
Search Tags:#templates#react#tailwind#cross-client#email-templates#pixelBasedPreset#html-email
One-click install
npx skills add https://github.com/curvenote/curvenote --skill react-email-curvenote
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-email
Source: https://github.com/curvenote/curvenote/tree/main/.agents/skills/react-email
Command: npx skills add https://github.com/curvenote/curvenote --skill react-email-curvenote

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

React Email provides a structured, reusable approach to building cross-client HTML emails using React components, eliminating ad-hoc HTML/CSS tinkering and ensuring consistent rendering across major email clients.

Core Features & Use Cases

  • Component-driven templates: Build emails with Html, Head, Body, Container, Section, Row, Column, and Tailwind wrappers.
  • Tailwind + pixelBasedPreset: Style emails with Tailwind utilities that are auto-converted to inline CSS for reliability.
  • Ready-to-send patterns: Welcome emails, password resets, order confirmations, notifications, and other transactional messages.
  • Preview and testing: Use Preview props and sample data to render and test emails during development.

Quick Start

Create a new React Email project, define a template in SKILL.md, wrap content in Html/Tailwind, render to HTML, and integrate with your email sending workflow.

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

Build HTML email templates with React by composing reusable components like Html, Body, and Section wrappers, then rendering them directly to production-ready HTML for reliable cross-client delivery.

What is the best way to ensure consistent email rendering across major clients?▼

To ensure consistent email rendering across major clients, use Tailwind with pixelBasedPreset to apply styles that are automatically converted to inline CSS, eliminating ad-hoc HTML tinkering.

Can I use Tailwind to style transactional emails?▼

Yes, you can style transactional emails with Tailwind utility classes. The skill converts these utilities into inline CSS to guarantee reliable rendering for welcome, password reset, and order confirmation messages.

How do I preview and test HTML emails during development?▼

Preview and test HTML emails during development by using Preview props and sample data within your React components to render and validate template output before integrating with your sending workflow.

Does React Email work without external email sending dependencies?▼

React Email works without external sending dependencies, focusing purely on generating cross-client HTML output from React components. You integrate the rendered HTML into your existing email sending workflow.

Related Skills

Explore More Design & Creative Skills→
AbdullahMalik17AbdullahMalik17
9

styling-with-shadcn

Set up shadcn/ui components, forms, and dark mode in Next.js projects.

Community
Intermediate
growupanandgrowupanand
101

react-email

Create and send HTML email templates with React components and Tailwind CSS.

Community
Intermediate
hidonguyenhidonguyen

ck:ui-styling

Generate shadcn/ui component libraries with Tailwind CSS themes.

Community
Intermediate
irchamajiirchamaji

react-email

Generate React Email HTML templates with React components and Tailwind.

Community
Advanced