# Email Templates Builder
> Templates HTML de email transaccional y envío desde web app. Stack: React Email + Resend. Para secuencias de email marketing usar `market-emails`. Usar cuando: "email transaccional", "React Email", "Resend", "template de email", "email de bienvenida HTML", "email de reset", "factura por email", "MJML", "Nodemailer".
- Skill: `apolo-81/email-templates-builder` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add apolo-81/email-templates-builder`
- Raw SKILL.md: https://api.skillmd.com/api/skills/apolo-81/email-templates-builder/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: apolo-81 (https://skillmd.com/u/apolo-81)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/apolo-81/email-templates-builder
---
# Email Templates Builder
Stack principal: **React Email + Resend** dentro de Next.js App Router.
**Regla:** Si el proyecto es Next.js, usar React Email + Resend siempre.
| Stack | Cuando |
|-------|--------|
| **React Email + Resend** | Apps Next.js, emails transaccionales |
| **MJML** | Newsletters, marketing masivo, agencias |
| **HTML puro (tables)** | Clientes corporativos Outlook-heavy |
---
## 1. Setup
```bash
npm install react-email @react-email/components resend
npx react-email dev # Preview con hot reload en localhost:3000
```
Estructura:
```
emails/ # welcome.tsx, verify-account.tsx, password-reset.tsx, etc.
app/api/send-email/route.ts
lib/resend.ts # singleton: new Resend(process.env.RESEND_API_KEY)
```
Ver `references/templates.tsx` para los 7 templates completos.
### API Route y cliente
```typescript
// lib/resend.ts
import { Resend } from 'resend';
export const resend = new Resend(process.env.RESEND_API_KEY);
// app/api/send-email/route.ts
const { data, error } = await resend.emails.send({
from: 'Tu App ',
to, subject: 'Bienvenido',
react: WelcomeEmail({ name }),
});
```
**Dominio verificado en Resend:** Settings > Domains > Add Domain > registros DNS (SPF, DKIM).
---
## 2. Componentes React Email
### Estructura base
```tsx
Preheader 50-100 chars
{/* contenido */}
```
### Reglas criticas
| Componente | Regla |
|------------|-------|
| `` | Siempre incluir, max 100 chars |
| `` | Siempre `max-w-[600px]` |
| `