multiAI Summary Pending

email-handler

Create and send transactional emails using React Email. Covers templates, layout integration, and sending logic.

231 stars

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/email-handler/SKILL.md --create-dirs "https://raw.githubusercontent.com/aiskillstore/marketplace/main/skills/aayushbaniya2006/email-handler/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/email-handler/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How email-handler Compares

Feature / Agent	email-handler	Standard Approach
Platform Support	multi	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.

Which AI agents support this skill?

This skill is compatible with multi.

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.