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.
Create and send transactional emails using React Email. Covers templates, layout integration, and sending logic.
Teams using email-handler should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
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.
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
websocket-handler-setup
Websocket Handler Setup - Auto-activating skill for Backend Development. Triggers on: websocket handler setup, websocket handler setup Part of the Backend Development skill category.
webhook-retry-handler
Webhook Retry Handler - Auto-activating skill for API Integration. Triggers on: webhook retry handler, webhook retry handler Part of the API Integration skill category.
timeout-handler
Timeout Handler - Auto-activating skill for API Integration. Triggers on: timeout handler, timeout handler Part of the API Integration skill category.
sorting-parameter-handler
Sorting Parameter Handler - Auto-activating skill for API Development. Triggers on: sorting parameter handler, sorting parameter handler Part of the API Development skill category.
oauth-callback-handler
Oauth Callback Handler - Auto-activating skill for API Integration. Triggers on: oauth callback handler, oauth callback handler Part of the API Integration skill category.
long-polling-handler
Long Polling Handler - Auto-activating skill for API Integration. Triggers on: long polling handler, long polling handler Part of the API Integration skill category.
kubernetes-configmap-handler
Kubernetes Configmap Handler - Auto-activating skill for DevOps Advanced. Triggers on: kubernetes configmap handler, kubernetes configmap handler Part of the DevOps Advanced skill category.
go-handler-generator
Go Handler Generator - Auto-activating skill for Backend Development. Triggers on: go handler generator, go handler generator Part of the Backend Development skill category.
etag-handler
Etag Handler - Auto-activating skill for API Development. Triggers on: etag handler, etag handler Part of the API Development skill category.
error-handler-middleware
Error Handler Middleware - Auto-activating skill for Backend Development. Triggers on: error handler middleware, error handler middleware Part of the Backend Development skill category.
environment-variables-handler
Environment Variables Handler - Auto-activating skill for DevOps Basics. Triggers on: environment variables handler, environment variables handler Part of the DevOps Basics skill category.
email-template-generator
Email Template Generator - Auto-activating skill for Business Automation. Triggers on: email template generator, email template generator Part of the Business Automation skill category.