Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

aiskillstore/email-handler

Name: email-handler
Author: aiskillstore

skills/aayushbaniya2006/email-handler/SKILL.md

npx skillsauth add aiskillstore/marketplace email-handler

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

VirusTotalMulti-engine malware detection

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

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.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:

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: render from @react-email/components and your template.
Import: sendMail from @/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(
  "[email protected]",
  "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":

Design: Create the .tsx file in src/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.

aiskillstore/email-handler

skills/aayushbaniya2006/email-handler/SKILL.md

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

230 stars

development

Updated Mar 27, 2026

$ install --global

skillsauth

npx skillsauth add aiskillstore/marketplace email-handler

Install this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.

Security Scan Results

3 of 9 scanners reported clean

Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.

Scanners Passed

Scanners in report

Clean

TrivyContainer and dependency vulnerability scanner

95%

Clean

SemgrepStatic code analysis for vulnerabilities

95%

Clean

mcp-scan (Snyk)Model Context Protocol security validation

95%

Skipped

Snyk (dep)Open source security scanning

50%

Skipped

Socket.devSupply chain security analysis

50%

Skipped

VirusTotalMulti-engine malware detection

50%

Skipped

CrowdStrikeAdvanced threat intelligence

50%

Skipped

OSV-ScannerOpen Source Vulnerability database check

50%

Skipped

OWASP Dep-Check

50%

Last scanned: Mar 28, 2026, 3:51 PM36.5s3 files scanned

SKILL.md

name:: email-handler
description:: Create and send transactional emails using React Email. Covers templates, layout integration, and sending logic.
tools:: Read, Write, Edit
model:: inherit

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.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:

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: render from @react-email/components and your template.
Import: sendMail from @/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(
  "[email protected]",
  "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":

Design: Create the .tsx file in src/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.

Related Skills

aiskillstore/hig-components-content

development

VerifiedTrustedCommunity

Apple Human Interface Guidelines for content display components. Use this skill when the user asks about charts component, collection view, image view, web view, color well, image well, activity view, lockup, data visualization, content display, displaying images, rendering web content, color pickers, or presenting collections of items in Apple apps. Also use when the user says how should I display charts, what's the best way to show images, should I use a web view, how do I build a grid of items, what component shows media, or how do I present a share sheet. Cross-references: hig-foundations for color/typography/accessibility, hig-patterns for data visualization patterns, hig-components-layout for structural containers, hig-platforms for platform-specific component behavior.

244SKILL.mdUpdated Apr 10, 2026

aiskillstore/hig-components-content

aiskillstore/helpdesk-automation

tools

VerifiedTrustedCommunity

Automate HelpDesk tasks via Rube MCP (Composio): list tickets, manage views, use canned responses, and configure custom fields. Always search tools first for current schemas.

244SKILL.mdUpdated Apr 10, 2026

aiskillstore/helpdesk-automation

aiskillstore/haskell-pro

testing

VerifiedTrustedCommunity

Expert Haskell engineer specializing in advanced type systems, pure functional design, and high-reliability software. Use PROACTIVELY for type-level programming, concurrency, and architecture guidance.

244SKILL.mdUpdated Apr 10, 2026

aiskillstore/haskell-pro

aiskillstore/graphql

tools

VerifiedTrustedCommunity

GraphQL gives clients exactly the data they need - no more, no less. One endpoint, typed schema, introspection. But the flexibility that makes it powerful also makes it dangerous. Without proper controls, clients can craft queries that bring down your server. This skill covers schema design, resolvers, DataLoader for N+1 prevention, federation for microservices, and client integration with Apollo/urql. Key insight: GraphQL is a contract. The schema is the API documentation. Design it carefully.

244SKILL.mdUpdated Apr 10, 2026

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/aiskillstore/marketplace.git

# Copy into Claude Code skills folder (global)
cp -r marketplace/skills/aayushbaniya2006/email-handler ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

aiskillstore/marketplace

230 stars

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT