SKILL.md
React Email
Overview
React Email is a library for building responsive HTML emails using React components. It provides a set of unstyled, accessible components that render to email-client-compatible HTML. Supports inline styles, Tailwind CSS via a wrapper component, custom web fonts, and rendering to both HTML and plain text.
When to use: Transactional emails (welcome, password reset, receipts), marketing templates, email design systems, any project that renders emails server-side.
When NOT to use: Static HTML email templates with no dynamic content, projects that already use a dedicated email builder (MJML, Maizzle), or when you only need plain-text emails.
Quick Reference
| Pattern | API | Key Points |
|---|---|---|
| Document structure | Html, Head, Body |
Html wraps everything, Head loads fonts/meta |
| Content container | Container |
Centers content, sets max-width |
| Layout grid | Section, Row, Column |
Table-based layout for email clients |
| Text content | Text, Heading |
Heading accepts as prop for h1-h6 |
| Links | Link |
Standard anchor, href required |
| Call-to-action | Button |
Renders as link styled as button, href required |
| Images | Img |
Always set width, height, alt |
| Divider | Hr |
Horizontal rule between sections |
| Inbox preview | Preview |
Sets preview text shown in inbox list |
| Custom fonts | Font |
Place inside Head, set webFont and fallbackFontFamily |
| Tailwind styling | Tailwind |
Wraps email, inlines Tailwind classes at render |
| Render to HTML | render(<Email />) |
Async, returns HTML string |
| Render plain text | render(<Email />, { plainText: true }) |
Strips HTML, returns text |
| Pretty output | render(<Email />, { pretty: true }) |
Formatted HTML for debugging |
| Preview server | email dev |
Local dev server with hot reload |
| Markdown content | Markdown |
Renders Markdown as email-compatible HTML |
| Code blocks | CodeBlock |
Syntax-highlighted code with theme support |
| Inline code | CodeInline |
Monospace inline code spans |
Common Mistakes
| Mistake | Correct Pattern |
|---|---|
Using className with inline styles |
Use either Tailwind (className) or inline style objects, not both on the same element |
Forgetting width/height on Img |
Always specify dimensions to prevent layout shifts in email clients |
Nesting Container inside Container |
Use one Container for centering, Section/Row/Column for inner layout |
| Using CSS Grid or Flexbox | Use Section, Row, Column for table-based layouts that work across email clients |
Placing Font outside Head |
Font must be a child of Head to load correctly |
Using render() synchronously |
render() is async, always await the result |
Wrapping Tailwind inside Html |
Tailwind wraps Html, not the other way around |
Omitting Preview component |
Without Preview, email clients show the first body text as preview |
| Using external CSS stylesheets | Email clients strip <link> tags; use inline styles or Tailwind component |
Passing React component to resend.emails.send |
Render to HTML string first, then pass html to the send method |
Delegation
- Email template discovery: Use
Exploreagent - Email styling review: Use
Taskagent - Code review: Delegate to
code-revieweragent
If the
resendskill is available, delegate email delivery tasks to it.
Otherwise, recommend:npx skills add oakoss/agent-skills --skill resend
References
- [Built-in components: structure, content, and layout](references/components.md)
- [Styling with inline CSS, Tailwind, responsive patterns, and fonts](references/styling-and-layout.md)
- [Rendering to HTML, preview server, and provider integration](references/rendering.md)