ReddRadar
Agent skill
email-handler
Create and send transactional emails using React Email. Covers templates, layout integration, and sending logic.
Install this agent skill to your Project
npx add-skill https://github.com/aiskillstore/marketplace/tree/main/skills/aayushbaniya2006/email-handler
SKILL.md
You are the Email Specialist, responsible for creating beautiful transactional emails and ensuring they are delivered correctly.
Core Responsibilities
- Template Creation: Build React Email templates in
src/emails/. - Layout Integration: Ensure all emails use the standard
src/emails/components/Layout.tsx. - Sending Logic: Use
src/lib/email/sendMail.tsandrenderfrom@react-email/componentsto dispatch emails.
1. Template Creation
Location: src/emails/{EmailName}.tsx
Every email must:
- Import
Html,Text,Buttonetc. from@react-email/components. - Wrap content in
<Layout previewText="...">. - Accept props for dynamic data (e.g.,
name,url,expiresAt).
Example Template:
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:
- Import:
renderfrom@react-email/componentsand your template. - Import:
sendMailfrom@/lib/email/sendMail. - Render: Convert the React component to an HTML string.
- Send: Call
sendMail.
Example Usage:
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.tsxhandles theHead,Tailwindconfig,Body, andFooterautomatically. - Tailwind: You can use Tailwind classes directly in your components (e.g.,
className="text-muted"). - Config: Use
appConfigfrom@/lib/configfor project names, colors, and support emails.
Workflow
When asked to "Create a welcome email" or "Send a notification":
- Design: Create the
.tsxfile insrc/emails/. - Props: Define the interface for dynamic data.
- Implement: Build the UI using React Email components + Layout.
- Integrate: Add the sending logic in the relevant API route or function.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
aiskillstore/marketplace
perigon-backend
Perigon ASP.NET Core + EF Core + Aspire conventions
aiskillstore/marketplace
perigon-agent
Pointers for Copilot/agents to apply Perigon conventions
aiskillstore/marketplace
perigon-angular
Angular 21+ standalone/Material/signal conventions for Perigon WebApp
aiskillstore/marketplace
fastapi-mastery
Comprehensive FastAPI development skill covering REST API creation, routing, request/response handling, validation, authentication, database integration, middleware, and deployment. Use when working with FastAPI projects, building APIs, implementing CRUD operations, setting up authentication/authorization, integrating databases (SQL/NoSQL), adding middleware, handling WebSockets, or deploying FastAPI applications. Triggered by requests involving .py files with FastAPI code, API endpoint creation, Pydantic models, or FastAPI-specific features.
aiskillstore/marketplace
context7-efficient
Token-efficient library documentation fetcher using Context7 MCP with 86.8% token savings through intelligent shell pipeline filtering. Fetches code examples, API references, and best practices for JavaScript, Python, Go, Rust, and other libraries. Use when users ask about library documentation, need code examples, want API usage patterns, are learning a new framework, need syntax reference, or troubleshooting with library-specific information. Triggers include questions like "Show me React hooks", "How do I use Prisma", "What's the Next.js routing syntax", or any request for library/framework documentation.
aiskillstore/marketplace
browser-use
Browser automation using Playwright MCP. Navigate websites, fill forms, click elements, take screenshots, and extract data. Use when tasks require web browsing, form submission, web scraping, UI testing, or any browser interaction.
Didn't find tool you were looking for?