email-handler
Create and send transactional emails using React Email. Covers templates, layout integration, and sending logic.
Best use case
email-handler is best used when you need a repeatable AI agent workflow instead of a one-off prompt. It is especially useful for teams working in multi. Create and send transactional emails using React Email. Covers templates, layout integration, and sending logic.
Create and send transactional emails using React Email. Covers templates, layout integration, and sending logic.
Users should expect a more consistent workflow output, faster repeated execution, and less time spent rewriting prompts from scratch.
Practical example
Example input
Use the "email-handler" skill to help with this workflow task. Context: Create and send transactional emails using React Email. Covers templates, layout integration, and sending logic.
Example output
A structured workflow result with clearer steps, more consistent formatting, and an output that is easier to reuse in the next run.
When to use this skill
- Use this skill when you want a reusable workflow rather than writing the same prompt again and again.
When not to use this skill
- Do not use this when you only need a one-off answer and do not need a reusable workflow.
- Do not use it if you cannot install or maintain the related files, repository context, or supporting tools.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/email-handler/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How email-handler Compares
| Feature / Agent | email-handler | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Create and send transactional emails using React Email. Covers templates, layout integration, and sending logic.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
SKILL.md Source
You are the Email Specialist, responsible for creating beautiful transactional emails and ensuring they are delivered correctly.
# Core Responsibilities
1. **Template Creation**: Build React Email templates in `src/emails/`.
2. **Layout Integration**: Ensure all emails use the standard `src/emails/components/Layout.tsx`.
3. **Sending Logic**: Use `src/lib/email/sendMail.ts` and `render` from `@react-email/components` to dispatch emails.
# 1. Template Creation
**Location**: `src/emails/{EmailName}.tsx`
Every email must:
- Import `Html`, `Text`, `Button` etc. from `@react-email/components`.
- Wrap content in `<Layout previewText="...">`.
- Accept props for dynamic data (e.g., `name`, `url`, `expiresAt`).
**Example Template**:
```tsx
import * as React from "react";
import { Button } from "@react-email/button";
import { Html } from "@react-email/html";
import { Text } from "@react-email/text";
import Layout from "./components/Layout";
import { appConfig } from "@/lib/config";
interface MyEmailProps {
username: string;
actionUrl: string;
}
export default function MyEmail({ username, actionUrl }: MyEmailProps) {
return (
<Html>
<Layout previewText="Action Required">
<Text>Hi {username},</Text>
<Text>Please click the button below:</Text>
<Button
href={actionUrl}
className="bg-primary text-primary-foreground rounded-md py-2 px-4 mt-4"
>
Click Me
</Button>
</Layout>
</Html>
);
}
```
# 2. Sending Emails
**Location**: API Routes or Server Actions (e.g., `src/app/api/...`).
To send an email:
1. **Import**: `render` from `@react-email/components` and your template.
2. **Import**: `sendMail` from `@/lib/email/sendMail`.
3. **Render**: Convert the React component to an HTML string.
4. **Send**: Call `sendMail`.
**Example Usage**:
```typescript
import { render } from "@react-email/components";
import MyEmail from "@/emails/MyEmail";
import sendMail from "@/lib/email/sendMail";
// Inside an async function
const html = await render(
MyEmail({
username: "John",
actionUrl: "https://myapp.com/action"
})
);
await sendMail(
"user@example.com",
"Subject Line Here",
html
);
```
# 3. Layout & Styling
- **Layout**: `src/emails/components/Layout.tsx` handles the `Head`, `Tailwind` config, `Body`, and `Footer` automatically.
- **Tailwind**: You can use Tailwind classes directly in your components (e.g., `className="text-muted"`).
- **Config**: Use `appConfig` from `@/lib/config` for project names, colors, and support emails.
# Workflow
When asked to "Create a welcome email" or "Send a notification":
1. **Design**: Create the `.tsx` file in `src/emails/`.
2. **Props**: Define the interface for dynamic data.
3. **Implement**: Build the UI using React Email components + Layout.
4. **Integrate**: Add the sending logic in the relevant API route or function.Related Skills
agent-email-cli
Operate the agent-email CLI to create disposable inboxes, poll for new mail, retrieve full message details, and manage local mailbox profiles. Use when the user needs terminal-based email inbox access for LLM or agent automation workflows.
email-systems
Email has the highest ROI of any marketing channel. $36 for every $1 spent. Yet most startups treat it as an afterthought - bulk blasts, no personalization, landing in spam folders. This skill covers transactional email that works, marketing automation that converts, deliverability that reaches inboxes, and the infrastructure decisions that scale. Use when: keywords, file_patterns, code_patterns.
react-email
Use when creating HTML email templates with React components - welcome emails, password resets, notifications, order confirmations, newsletters, or transactional emails.
error-handler-advisor
Proactively reviews error handling patterns and suggests improvements using Result types, proper error propagation, and idiomatic patterns. Activates when users write error handling code or use unwrap/expect.
email-composer
Draft professional emails for various contexts including business, technical, and customer communication. Use when the user needs help writing emails or composing professional messages.
email-marketing-bible
Comprehensive, data-backed email marketing knowledge base. 908 sources, 4,798 insights. Use when reviewing email setups, building automation flows, diagnosing deliverability, writing email copy, selecting platforms, or pulling benchmarks. Covers strategy, flows, deliverability, copywriting, segmentation, compliance, cold email, and 19 industry playbooks.
email-sequence
When the user wants to create or optimize an email sequence, drip campaign, automated email flow, or lifecycle email program. Also use when the user mentions "email sequence," "drip campaign," "nurture sequence," "onboarding emails," "welcome sequence," "re-engagement emails," "email automation," or "lifecycle emails." For in-app onboarding, see onboarding-cro.
cold-email
Write B2B cold emails and follow-up sequences that get replies. Use when the user wants to write cold outreach emails, prospecting emails, cold email campaigns, sales development emails, or SDR emails. Also use when the user mentions "cold outreach," "prospecting email," "outbound email," "email to leads," "reach out to prospects," "sales email," "follow-up email sequence," "nobody's replying to my emails," or "how do I write a cold email." Covers subject lines, opening lines, body copy, CTAs, personalization, and multi-touch follow-up sequences. For warm/lifecycle email sequences, see email-sequence. For sales collateral beyond emails, see sales-enablement.
email-assistant
User asks to read, check, or manage emails - User asks to reply to or send an email - User asks to draft an email response
email-agent
Processes incoming emails for Unite-Hub. Extracts sender data, identifies communication intents, links to CRM contacts, analyzes sentiment, and updates contact records with AI insights.
email-notify
Send SMTP email notifications after Codex completes a task. Use when one Codex or Claude run is finished, or when you need to notify on task completion with device name, project name, status, and summary via email.
ui-handler
Implement UI using Shadcn MCP (atoms/theme) and 21st.dev MCP (complex sections). Use when adding buttons, layouts, or generating landing pages.