React Email Skill
Teach an AI agent to build responsive, cross-client HTML emails using React components, then send the rendered HTML via MailBlastr.
The React Email skill lets an AI agent build production-ready HTML emails from React components. Instead of hand-writing fragile table-based HTML, the agent composes reusable components and renders them to the HTML and plain-text that MailBlastr sends.
React Email is an open-source component library for email. The skill teaches the agent its component vocabulary and how to render a component to a string you pass to the MailBlastr Emails API.
How to give an agent this skill
This is a skill *pattern* rather than a package to install. Capture the guidance below as a SKILL.md (or equivalent context file) in your repo so your agent reaches for React Email when it needs to build a message, then sends the rendered HTML with the official `mailblastr` SDK or plain HTTP. Add @react-email/components and @react-email/render to the project the agent works in.
npm install @react-email/components @react-email/renderWhat it gives your agent
- Component-based templates — build emails from reusable components for consistent, maintainable templates.
- Brand-consistent styling — style with Tailwind so emails match your design system.
- Multi-format rendering — generate both an HTML and a plain-text version of each email.
- Cross-client compatibility — the components emit markup that renders correctly across major email clients.
- Live preview — a preview server renders emails in real time with hot reloading during development.
Build, render, send
The agent writes a component, renders it to an HTML string, then hands that string to MailBlastr. The React Email part only produces the html and text bodies; the send itself can use the official `mailblastr` SDK or a plain HTTP POST (shown below).
import { Html, Button, Text } from '@react-email/components';
export default function Welcome({ name }: { name: string }) {
return (
<Html>
<Text>Hi {name}, welcome aboard!</Text>
<Button href="https://yourapp.com/get-started">Get started</Button>
</Html>
);
}import { render } from '@react-email/render';
import { MailBlastr } from 'mailblastr';
import Welcome from './emails/welcome';
const mb = new MailBlastr(process.env.MAILBLASTR_API_KEY);
const html = await render(<Welcome name="Ada" />);
const text = await render(<Welcome name="Ada" />, { plainText: true });
const { data, error } = await mb.emails.send({
from: 'Acme <hello@yourdomain.com>',
to: ['delivered@example.com'],
subject: 'Welcome aboard',
html,
text,
});html and text. The plain-text alternative improves deliverability and renders for clients that block HTML. If you only send html, MailBlastr delivers it as-is; if you only send text, MailBlastr generates an HTML alternative.