Skills
skills/charlieclark/skill-email-automater/email

email

Installation
SKILL.md

/email

A unified skill for email automations — from initial setup to production deployment. Describe what you need in natural language and the skill routes to the right action.

Capabilities

Action What it does Signal keywords
Init Scaffold config, templates, adapter into your project set up, initialize, add email, scaffold
Explore Scan codebase for existing email code, suggest migration scan, find, analyze, migrate, what emails
Template Create a React Email .tsx template interactively create template, new email, make a … email
Automation Define a send/delay/condition sequence in config sequence, drip, flow, automation, campaign
Preview Launch the visual flow editor on port 3333 preview, visual, editor, show me, see my
Send Generate send functions, runner, and API endpoints send code, endpoint, trigger, deploy, generate

Routing Logic

Classify intent using two signals, checked in order:

1. Explicit intent (first match wins)

If the user says… Route to
"set up" / "initialize" / "scaffold" / "add email to my project" Init
"scan" / "find email" / "analyze" / "migrate" / "what emails" Explore
"create template" / "new email" / "make a ___ email" / "receipt" / "invoice" Template
"sequence" / "drip" / "campaign" / "automation" / "onboarding flow" Automation
"preview" / "visual" / "editor" / "show me" / "see the flow" Preview
"send code" / "endpoint" / "trigger" / "deploy" / "generate send" Send

2. Project-state fallback (when intent is ambiguous)

Project state Default action
No automations.config.json and no emails/ directory Init
Config exists but no templates in emails/ Template
Config + templates exist but no automations defined Automation
Automations defined but no send code generated Send
Everything exists Ask the user what they want to do

Only ask a clarifying question when both signals are genuinely ambiguous.

Init

Scaffold email automation infrastructure into your project.

Steps

  1. Detect the project's package manager and framework
  2. Ask which email provider to use (Resend, SendGrid, Nodemailer, or SES)
  3. Create the directory structure:
    • emails/ — React Email templates
    • emails/BaseLayout.tsx — Shared layout wrapper
    • emails/welcome.tsx — Starter welcome template
    • emails/follow-up.tsx — Starter follow-up template
    • automations.config.json — Automation sequence definitions
  4. Install required dependencies (@react-email/components, react, react-email)
  5. Install the provider-specific package if needed (e.g. resend)
  6. Set up the adapter utility in utils/email/
  7. Add env var placeholders to .env.example

Output

your-project/
├── automations.config.json
├── emails/
│   ├── BaseLayout.tsx
│   ├── welcome.tsx
│   └── follow-up.tsx
└── utils/email/
    ├── adapter.ts
    ├── render.ts
    └── index.ts

Explore

Scan the codebase to find existing email sending patterns, templates, and trigger points.

Steps

  1. Scan for email-related imports and patterns:
    • nodemailer, @sendgrid/mail, resend, aws-sdk SES calls
    • SMTP configuration, transport setup
    • HTML template files (.hbs, .ejs, .pug, .html in email-related directories)
    • sendMail, send, email-related function calls
  2. Identify trigger points (API routes, event handlers, cron jobs that send emails)
  3. Catalog existing templates and their variables
  4. Generate a structured report:
    • Current provider and setup
    • List of email templates found
    • Trigger points and their locations
    • Migration recommendations (what to move to automations.config.json)

Output

A conversation report like:

## Email Exploration Report

### Provider
- Currently using: nodemailer (SMTP)
- Config location: src/lib/mailer.ts

### Templates Found (3)
1. welcome — src/emails/welcome.hbs (vars: name, appName)
2. reset-password — src/emails/reset.hbs (vars: resetUrl, name)
3. invoice — src/emails/invoice.ejs (vars: items, total, customerName)

### Trigger Points (4)
1. POST /api/auth/signup → sends "welcome" (src/routes/auth.ts:42)
2. POST /api/auth/forgot → sends "reset-password" (src/routes/auth.ts:87)
3. Cron job → sends "invoice" (src/jobs/billing.ts:15)
4. Event "user.upgraded" → inline HTML email (src/events/upgrade.ts:23)

### Recommendations
- Convert 3 Handlebars templates to React Email components
- Move inline HTML email to a template
- Define 2 automation sequences in config (welcome + billing)

Template

Create a new React Email .tsx template through interactive conversation.

Steps

  1. Ask what kind of email to create (welcome, notification, receipt, etc.)
  2. Ask about the data/variables the template needs (name, items, urls, etc.)
  3. Generate a React Email component using @react-email/components:
    • Uses BaseLayout for consistent structure
    • Applies clean, responsive inline styles
    • Includes proper TypeScript interfaces for props
    • Adds default prop values for preview
  4. Write the template to the emails/ directory
  5. Optionally add a send step referencing the template to an existing automation

Output

A new .tsx file in emails/:

// emails/password-reset.tsx
import { Heading, Text, Button } from "@react-email/components";
import { BaseLayout } from "./BaseLayout";

interface PasswordResetEmailProps {
  name?: string;
  resetUrl?: string;
}

export default function PasswordResetEmail({
  name = "there",
  resetUrl = "https://example.com/reset",
}: PasswordResetEmailProps) {
  return (
    <BaseLayout previewText="Reset your password">
      <Heading>Reset your password</Heading>
      <Text>Hi {name}, click below to reset your password.</Text>
      <Button href={resetUrl}>Reset Password</Button>
    </BaseLayout>
  );
}

Automation

Build email automation sequences and write them to automations.config.json.

Steps

  1. Ask for the automation name and trigger type:
    • Event — fires on a named event (e.g. user.signup, order.completed)
    • Schedule — fires on a cron expression
    • Manual — triggered programmatically
  2. Walk through adding steps one at a time:
    • Send — pick a template from emails/, set the subject line
    • Delay — set a wait duration (30m, 2h, 1d, 7d)
    • Condition — branch on a data field (equals, notEquals, gt, lt, contains)
  3. Validate the sequence (no dangling condition refs, templates exist)
  4. Write the automation to automations.config.json
  5. Show a summary of the complete flow

Output

A new automation entry in automations.config.json:

{
  "id": "trial-expiry",
  "name": "Trial Expiry Reminder",
  "trigger": { "type": "event", "event": "trial.expiring" },
  "steps": [
    { "id": "step-1", "type": "send", "template": "trial-reminder", "subject": "Your trial ends in 3 days" },
    { "id": "step-2", "type": "delay", "duration": "2d" },
    { "id": "step-3", "type": "condition", "field": "user.hasConverted", "operator": "equals", "value": false, "thenSteps": ["step-4"], "elseSteps": [] },
    { "id": "step-4", "type": "send", "template": "trial-last-chance", "subject": "Last day of your trial" }
  ]
}

Preview

Launch the visual editor webapp to preview and edit automation flows.

Steps

  1. Check that dependencies are installed in the skill directory
  2. Launch the Vite dev server on port 3333
  3. Point the editor at your project directory for config and templates
  4. Open a three-panel interface:
    • Left: Automation list — select which sequence to view
    • Center: Flow canvas — vertical pipeline showing trigger → steps
    • Right: Node editor + email preview — edit selected step, preview rendered email in iframe
  5. Bottom palette lets you add new steps (Send, Delay, Condition)
  6. Save button writes changes back to automations.config.json

Requirements

  • Node.js 18+
  • The email-automater skill must have its dependencies installed (npm install in the skill directory)

Output

Opens http://localhost:3333 with the visual editor. The editor:

  • Reads automations.config.json from your project directory
  • Renders email templates server-side via Vite SSR
  • Saves changes back to the config file on save

Send

Generate the code needed to send emails and run automation sequences.

Steps

  1. Read automations.config.json to understand provider and automations
  2. Detect the framework (Next.js, Express, Fastify, Hono, etc.)
  3. Ask about the delay strategy:
    • Inline — setTimeout / in-process (dev/simple use cases)
    • Queue — BullMQ, SQS, or similar job queue
    • Cron — scheduled job that checks pending delays
    • Serverless — step functions, Vercel cron, etc.
  4. Generate:
    • lib/email.ts — configured adapter instance + sendEmail() helper
    • lib/automations.ts — runner that executes automation steps
    • API route or endpoint for triggering automations
    • Delay handler based on chosen strategy
  5. Add required env vars to .env.example

Output

Framework-specific generated code. Example for Next.js App Router:

lib/
├── email.ts            — sendEmail(), adapter instance
└── automations.ts      — executeAutomation(), step runner

app/api/automations/
└── route.ts            — POST handler to trigger automations

Config Schema Reference

automations.config.json is the single source of truth for automation definitions.

Step Types

Type Fields Example
send template, subject Send welcome email with subject "Welcome!"
delay duration Wait 2 days ("2d"), 30 minutes ("30m"), 1 hour ("1h")
condition field, operator, value, thenSteps, elseSteps If user.plan equals "free", send upsell

Trigger Types

  • Event — { "type": "event", "event": "user.signup" }
  • Schedule — { "type": "schedule", "cron": "0 9 * * 1" }
  • Manual — { "type": "manual" }

Providers

  • Resend — RESEND_API_KEY
  • SendGrid — SENDGRID_API_KEY
  • Nodemailer — SMTP_HOST, SMTP_PORT, SMTP_USER, SMTP_PASS
  • AWS SES — Standard AWS credentials (AWS_REGION, etc.)

Troubleshooting

"Cannot find module @react-email/components" Run npm install @react-email/components react react-email manually.

Config validation errors Ensure automations.config.json has a valid provider.from email address and at least one automation with a valid trigger.

Wrong provider selected Edit the provider.adapter field in automations.config.json and update the env vars accordingly.

No email patterns found (Explore) The scan looks for common email libraries and patterns. If you use a custom or uncommon setup, describe it and the skill will adapt its search.

Template not rendering in preview Ensure the template has a default export and uses valid @react-email/components.

Styles not applying in templates React Email uses inline styles, not CSS classes. Pass style objects directly to component style props.

Images not showing in emails Use absolute URLs for images. Relative paths won't work in email clients.

"Template not found" warning (Automation) Create the template first, or the skill will offer to create a placeholder.

Condition branches not executing Ensure thenSteps and elseSteps reference valid step IDs within the same automation.

Duration format Use m (minutes), h (hours), d (days). Examples: "30m", "2h", "7d".

Port 3333 already in use Kill the existing process or set a different port: PORT=3334 npm run dev

"No config found" in preview The editor falls back to sample data if no automations.config.json exists. Run /email first to initialize, or set EMAIL_PROJECT_DIR to point at your project.

Email preview not rendering The preview uses Vite SSR to render .tsx templates. Ensure templates have a default export and use @react-email/components.

Changes not saving in preview Check that automations.config.json is writable. The editor writes via POST to /api/config.

"API key not set" (Send) Set the provider API key as an environment variable. Check .env.example for the expected variable name.

Delay steps not working The runner pauses at delay steps and calls your onDelay callback. You need infrastructure (queue, cron, serverless timer) to resume execution after the delay.

Template not found at runtime Ensure the template .tsx file exists in your emails/ directory and matches the template field in the config step.

Type errors after generation Run npm install to ensure all dependencies are installed. The generated code imports from @react-email/components and your adapter package.

Weekly Installs
2
Repository
charlieclark/sk…utomater
First Seen
Feb 7, 2026
Security Audits
Gen Agent Trust HubPass
SocketPass
SnykPass
Installed on
amp2
opencode2
kimi-cli2
codex2
github-copilot2
claude-code2