skills.rest
jchademwiri
jchademwiriCOMMUNITY
Explore all skills by this author →
Website𝕏@jchademwiriGitHub

react-email

Builds HTML emails using React Email components with Tailwind styling.

Updated May 14, 2025
Search Tags:#templates#html#react#email#tailwind#react-email
One-click install
npx skills add https://github.com/jchademwiri/tender-track-360 --skill react-email-jchademwiri
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-email
Source: https://github.com/jchademwiri/tender-track-360/tree/main/.claude/skills/react-email
Command: npx skills add https://github.com/jchademwiri/tender-track-360 --skill react-email-jchademwiri

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Build consistent, cross-client HTML emails using React Email components.

Core Features & Use Cases

  • Component-based templates: Build emails with React Email primitives like Html, Head, Body, Container, Section, Row, Column, and Text.
  • Tailwind styling with pixelBasedPreset: Style with Tailwind classes while inlining styles for compatibility across email clients.
  • Reference patterns & guidance: Access a references directory containing complete patterns and component documentation to accelerate template development.
  • Testing and previews: Provides Preview and PreviewProps patterns to test renderings during development.

Quick Start

Install the React Email package in your project and start building an email template using the provided components.

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 emails using React components?▼

Build HTML emails using React by composing component primitives like Html, Body, Container, and Text. This approach ensures cross-client compatibility and maintainable design for transactional, onboarding, and marketing templates.

Can I style HTML emails with Tailwind and still ensure client compatibility?▼

Style HTML emails with Tailwind classes using a pixel-based preset that inlines styles for compatibility. This ensures your React Email templates render consistently across various email clients.

What is the best way to structure onboarding and transactional email templates?▼

Structure onboarding and transactional emails using React Email components like Section, Row, and Column. This component-based architecture provides maintainable design patterns and cross-client rendering consistency.

How do I test and preview React email templates during development?▼

Test and preview React email templates during development using provided Preview and PreviewProps patterns. These tools allow you to verify rendering and visual consistency before deployment.

Does React Email require a specific project structure for templates?▼

React Email templates require a YAML frontmatter with name and description. Projects may optionally include scripts, references, and assets directories to organize component patterns and documentation.

How do I access reference patterns to accelerate HTML email development?▼

Access a references directory containing complete patterns and component documentation to accelerate template development. These references provide guidance for building robust cross-client HTML emails.

Related Skills

Explore More Software Engineering Skills→
irchamajiirchamaji

react-email

Generate React Email HTML templates with React components and Tailwind.

Community
Advanced
vercel-labsvercel-labs
15.9k

react-email

Convert JSON specifications into HTML or plain-text emails using React Email components.

Official
Intermediate
Sim-hub22Sim-hub22

react-email

Create HTML email templates with React components and Tailwind CSS.

Community
Intermediate
wshaddixwshaddix
71

mjml-email-templates

Generate responsive HTML email templates using MJML with .NET Razor syntax.

Community
Intermediate