#601

Global Rank · of 601 Skills

react-email AI Agent Skill

View Source: oakoss/agent-skills

Safe

Installation

npx skills add oakoss/agent-skills --skill react-email

38

Installs

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 Explore agent
  • Email styling review: Use Task agent
  • Code review: Delegate to code-reviewer agent

If the resend skill is available, delegate email delivery tasks to it.
Otherwise, recommend: npx skills add oakoss/agent-skills --skill resend

References

Installs

Installs 38
Global Rank #601 of 601

Security Audit

ath Safe
socket Safe
Alerts: 0 Score: 90
snyk Low
EU EU-Hosted Inference API

Power your AI Agents with the best open-source models.

Drop-in OpenAI-compatible API. No data leaves Europe.

Explore Inference API

GLM

GLM 5

$1.00 / $3.20

per M tokens

Kimi

Kimi K2.5

$0.60 / $2.80

per M tokens

MiniMax

MiniMax M2.5

$0.30 / $1.20

per M tokens

Qwen

Qwen3.5 122B

$0.40 / $3.00

per M tokens

How to use this skill

1

Install react-email by running npx skills add oakoss/agent-skills --skill react-email in your project directory. Run the install command above in your project directory. The skill file will be downloaded from GitHub and placed in your project.

2

No configuration needed. Your AI agent (Claude Code, Cursor, Windsurf, etc.) automatically detects installed skills and uses them as context when generating code.

3

The skill enhances your agent's understanding of react-email, helping it follow established patterns, avoid common mistakes, and produce production-ready output.

What you get

Skills are plain-text instruction files — not executable code. They encode expert knowledge about frameworks, languages, or tools that your AI agent reads to improve its output. This means zero runtime overhead, no dependency conflicts, and full transparency: you can read and review every instruction before installing.

Compatibility

This skill works with any AI coding agent that supports the skills.sh format, including Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider, and other tools that read project-level context files. Skills are framework-agnostic at the transport level — the content inside determines which language or framework it applies to.

Data sourced from the skills.sh registry and GitHub. Install counts and security audits are updated regularly.

EU Made in Europe

Chat with 100+ AI Models in one App.

Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.

Start for free View pricing
Customer Support