Refactor high-complexity React components in Dify frontend. Use when `pnpm analyze-component...
npx skills add BAiSEDagent/openclaw-skills --skill "email-integration"
Install specific skill from multi-skill repository
# Description
Send and receive email. Templates, notifications, transactional email. Use when building email features or sending notifications.
# SKILL.md
name: email-integration
description: "Send and receive email. Templates, notifications, transactional email. Use when building email features or sending notifications."
metadata:
openclaw:
emoji: "📧"
Email Integration
Send transactional emails, notifications, and process incoming mail.
Providers
| Provider | Best For | Pricing |
|---|---|---|
| Resend | Developer-first, React Email | 3k/mo free |
| SendGrid | Volume, deliverability | 100/day free |
| Postmark | Transactional reliability | 100/mo free |
| AWS SES | Cost at scale | $0.10/1k emails |
Resend (Recommended)
import { Resend } from 'resend';
const resend = new Resend(process.env.RESEND_API_KEY);
// Send email
await resend.emails.send({
from: 'BAiSED <[email protected]>',
to: '[email protected]',
subject: 'x402 Payment Received — 0.10 USDC',
html: `
<h2>Payment Settled</h2>
<p>Amount: <strong>0.10 USDC</strong></p>
<p>From: 0x1234...5678</p>
<p>TX: <a href="https://basescan.org/tx/${txHash}">${txHash.slice(0, 20)}...</a></p>
<p>EAS Attestation: <a href="https://base.easscan.org/attestation/view/${uid}">${uid.slice(0, 20)}...</a></p>
`
});
Email Templates
Payment Notification
function paymentEmail(payment: Payment) {
return {
subject: `x402 Payment: ${formatUSDC(payment.amount)} USDC`,
html: `
<div style="font-family: 'JetBrains Mono', monospace; background: #09090b; color: #f4f4f5; padding: 24px;">
<h2 style="color: #34d399;">Payment Settled ✓</h2>
<table style="border-collapse: collapse; width: 100%;">
<tr><td style="color: #a1a1aa; padding: 8px 0;">Amount</td><td>${formatUSDC(payment.amount)} USDC</td></tr>
<tr><td style="color: #a1a1aa; padding: 8px 0;">From</td><td style="font-family: monospace;">${payment.from}</td></tr>
<tr><td style="color: #a1a1aa; padding: 8px 0;">TX Hash</td><td><a href="${explorerUrl}/tx/${payment.txHash}" style="color: #60a5fa;">${payment.txHash.slice(0, 20)}...</a></td></tr>
</table>
</div>
`
};
}
Alert Notification
function alertEmail(alert: Alert) {
const colors = { critical: '#ef4444', warning: '#fbbf24', info: '#60a5fa' };
return {
subject: `[${alert.severity.toUpperCase()}] ${alert.message}`,
html: `
<div style="border-left: 4px solid ${colors[alert.severity]}; padding-left: 16px;">
<h3>${alert.message}</h3>
<p style="color: #a1a1aa;">${alert.details}</p>
<p style="font-family: monospace; font-size: 12px;">${new Date().toISOString()}</p>
</div>
`
};
}
Receiving Email (Webhooks)
// Most providers support inbound email via webhook
// Resend: Configure inbound domain → webhook URL
app.post('/webhooks/email', async (req, res) => {
const { from, subject, text, html } = req.body;
// Process incoming email
await processInboundEmail({ from, subject, text });
res.status(200).send('ok');
});
Safety Rules
- ⚠️ Never send unsolicited email — only to known recipients
- ⚠️ Adam approval for any email to external recipients
- Use transactional email only (notifications, alerts, reports)
- Include unsubscribe mechanism for recurring emails
- Never include private keys or sensitive data in email
Cross-References
- monitoring-alerting: Alert notifications via email
- webhooks: Email webhook handling
- api-design: Email API patterns
# Supported AI Coding Agents
This skill is compatible with the SKILL.md standard and works with all major AI coding agents:
Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.