Agent skill · writing content · aiskillstore
email-handler
Create and send transactional emails using React Email. Covers templates, layout integration, and sending logic.
Why this skill is useful
Provides specific patterns and templates for creating and sending transactional emails using React Email that the AI wouldn't reliably generate on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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: 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: 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.
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/email-handler