Run any Skill in Manus with one click

transactional-email

Stars1

Forks0

UpdatedJune 6, 2026 at 03:00

Use when sending product email — wire up Resend (or Postmark/SES) with typed React Email templates, send from background jobs not the request path, and cover deliverability basics like SPF/DKIM and unsubscribe.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

param087

param087/saas-starter-skills

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

SKILL.md

readonly

name	transactional-email
description	Use when sending product email — wire up Resend (or Postmark/SES) with typed React Email templates, send from background jobs not the request path, and cover deliverability basics like SPF/DKIM and unsubscribe.

Transactional Email

Overview

SaaS apps send email constantly: verification, invites, receipts, password resets, alerts. Use a provider built for it (Resend, Postmark, or SES) with React Email for typed, previewable templates. Treat sending as a side effect: trigger it from a background job, not inline in the request, so a slow mail API never blocks the user or fails their action.

When to use

Sending verification, invite, receipt, reset, or notification emails.
Building reusable, branded email templates.
Email sends are slowing requests or failing them.

Template + send

// src/server/email/templates/Invite.tsx
import { Button, Html, Text } from "@react-email/components";

export function InviteEmail({ org, url }: { org: string; url: string }) {
  return (
    <Html>
      <Text>You've been invited to join {org}.</Text>
      <Button href={url}>Accept invite</Button>
    </Html>
  );
}

// src/server/email/send.ts
import "server-only";
import { Resend } from "resend";
import { env } from "@/env";
import { InviteEmail } from "./templates/Invite";

const resend = new Resend(env.RESEND_API_KEY);

export async function sendInvite(to: string, org: string, url: string) {
  const { error } = await resend.emails.send({
    from: "Acme <noreply@acme.com>",
    to,
    subject: `Join ${org} on Acme`,
    react: InviteEmail({ org, url }),
  });
  if (error) throw new Error(`Email failed: ${error.message}`);
}

Call sendInvite from a job/queue (see background-jobs), and the action just enqueues it.

Deliverability essentials

Verify your domain and set SPF + DKIM + DMARC records — without them you land in spam.
Send from a real domain (noreply@yourapp.com), not a free inbox.
Include unsubscribe for anything non-essential; keep transactional and marketing streams separate.
Idempotency keys on critical sends (receipts) so retries don't double-send.

Pitfalls

Sending inline in the request — a 3s mail API call becomes a 3s user wait, and a mail outage fails signups. Enqueue it.
Skipping DKIM/SPF — great templates still hit spam without authenticated domains.
Hard-coded HTML strings — unmaintainable; use React Email components and preview them.
Leaking data across tenants — render with explicit, validated recipient + org; never reuse a cached template with stale props.
No failure handling — log and retry via the job system; surface nothing scary to the user.

Hand-off

Reliable, typed email behind a service. background-jobs runs the actual send off the request path; observability-and-errors tracks failures.

More from this repository

same repository

api-routes-and-validation

param087/saas-starter-skills

Use when building API endpoints or server actions — validate every input with zod, return consistent typed JSON errors, set correct status codes, and authenticate/authorize before touching data.

2026-06-061

authentication

param087/saas-starter-skills

Use when adding sign-in/sign-up or session handling to a SaaS app — set up Auth.js (NextAuth) or a hosted provider with secure sessions, OAuth + email, and server-side session checks that protect routes and actions.

2026-06-061

authorization-rbac

param087/saas-starter-skills

Use when controlling what a user may do — implement role-based access control with a central permission map, server-side checks on every mutation, and a typed `can()` helper instead of scattered role string comparisons.

2026-06-061

background-jobs

param087/saas-starter-skills

Use when work shouldn't run in the request path — offload emails, webhooks, exports, and scheduled tasks to a queue or job runner with retries, idempotency, and dead-letter handling instead of blocking the user.

2026-06-061

data-access-layer

param087/saas-starter-skills

Use when querying or mutating the database from the app — wrap Drizzle in server-only, tenant-scoped functions instead of calling the ORM from components, so every read/write is typed, testable, and isolation-safe.

2026-06-061

database-schema

param087/saas-starter-skills

Use when designing the Postgres schema or setting up Drizzle ORM — model users, organizations, memberships, and tenant-scoped tables with the right keys, indexes, timestamps, and migrations from day one.

2026-06-061

name	transactional-email
description	Use when sending product email — wire up Resend (or Postmark/SES) with typed React Email templates, send from background jobs not the request path, and cover deliverability basics like SPF/DKIM and unsubscribe.

Transactional Email

Overview

When to use

Sending verification, invite, receipt, reset, or notification emails.
Building reusable, branded email templates.
Email sends are slowing requests or failing them.

Template + send

// src/server/email/templates/Invite.tsx
import { Button, Html, Text } from "@react-email/components";

export function InviteEmail({ org, url }: { org: string; url: string }) {
  return (
    <Html>
      <Text>You've been invited to join {org}.</Text>
      <Button href={url}>Accept invite</Button>
    </Html>
  );
}

// src/server/email/send.ts
import "server-only";
import { Resend } from "resend";
import { env } from "@/env";
import { InviteEmail } from "./templates/Invite";

const resend = new Resend(env.RESEND_API_KEY);

export async function sendInvite(to: string, org: string, url: string) {
  const { error } = await resend.emails.send({
    from: "Acme <noreply@acme.com>",
    to,
    subject: `Join ${org} on Acme`,
    react: InviteEmail({ org, url }),
  });
  if (error) throw new Error(`Email failed: ${error.message}`);
}

Call sendInvite from a job/queue (see background-jobs), and the action just enqueues it.

Deliverability essentials

Verify your domain and set SPF + DKIM + DMARC records — without them you land in spam.
Send from a real domain (noreply@yourapp.com), not a free inbox.
Include unsubscribe for anything non-essential; keep transactional and marketing streams separate.
Idempotency keys on critical sends (receipts) so retries don't double-send.

Pitfalls

Sending inline in the request — a 3s mail API call becomes a 3s user wait, and a mail outage fails signups. Enqueue it.
Skipping DKIM/SPF — great templates still hit spam without authenticated domains.
Hard-coded HTML strings — unmaintainable; use React Email components and preview them.
Leaking data across tenants — render with explicit, validated recipient + org; never reuse a cached template with stale props.
No failure handling — log and retry via the job system; surface nothing scary to the user.

Hand-off

Reliable, typed email behind a service. background-jobs runs the actual send off the request path; observability-and-errors tracks failures.