# 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](https://www.mailblastr.com/docs/api/emails-send).
## 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](https://react.email) when it needs to build a message, then sends the rendered HTML with the official [`mailblastr` SDK](https://www.mailblastr.com/docs/resources/sdks) or plain HTTP. Add `@react-email/components` and `@react-email/render` to the project the agent works in.
```bash
npm install @react-email/components @react-email/render
```
## What 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](https://www.mailblastr.com/docs/resources/sdks) or a plain HTTP `POST` (shown below).
**emails/welcome.tsx**
```jsx
import { Html, Button, Text } from '@react-email/components';
export default function Welcome({ name }: { name: string }) {
return (
Hi {name}, welcome aboard!
);
}
```
**send.ts**
```js
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();
const text = await render(, { plainText: true });
const { data, error } = await mb.emails.send({
from: 'Acme ',
to: ['delivered@example.com'],
subject: 'Welcome aboard',
html,
text,
});
```
> **Note:** Provide both `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.
> **Warning:** Email clients support only a subset of CSS. Lean on React Email's components (which emit table-based, inline-styled markup) rather than modern layout CSS, and preview in the skill's preview server before sending.