design-emaillisted

Design and implement transactional and marketing email templates. Detects email framework (React Email, MJML, or plain HTML), mail provider (Resend, SendGrid, Postmark, AWS SES, Nodemailer), and delivery setup (SPF/DKIM/DMARC). Builds mobile-first templates with dark mode support, 600px max-width, inline styles for client compatibility, and accessible alt text. Reviews copy for natural, conversational tone — no jargon, no passive voice, no corporate formality. Checks deliverability config. Tests rendering across major email clients. Generic across any stack. Use when asked to "build an email template", "transactional email", "welcome email", "password reset email", "email design", "React Email", "MJML", "dark mode email", "deliverability", "SPF DKIM", "email copy review", or "why is my email in spam".
kensaurus/cursor-kenji · ★ 4 · Web & Frontend · score 80

Install: claude install-skill kensaurus/cursor-kenji

# design-email — Email Templates That Actually Get Read **Email is the one channel users check before they check your app.** A well-crafted transactional email — clear, warm, fast-loading, and readable on any device — builds trust. A corporate, jargon-heavy, broken email erodes it. This skill handles the full stack: design, copy, deliverability. --- ## Phase 0: Detect the stack ``` package.json → @react-email/*, mjml, nodemailer, @sendgrid/mail, resend, @aws-sdk/client-ses, postmark emails/ → existing React Email templates src/emails/ → email template directory .env.* → RESEND_API_KEY, SENDGRID_API_KEY, etc. (reference by name only) ``` | Detected framework | Approach | |--------------------|----------| | React Email (`@react-email/components`) | JSX components, preview server, multi-client export | | MJML | XML-like syntax, battle-tested cross-client output | | None | Implement React Email (current best practice) | --- ## Phase 1: Audit existing templates If templates already exist, walk through each one and check: **Copy quality**: - Does it sound like a person sent it, or a system? - Is the subject line specific? ("Your order is on its way" not "Order notification") - Is the first sentence the most important one (preview text matters)? - Does it tell the reader exactly what to do and what happens next? - Is it free of business jargon, technical terms, and passive voice? **Design**: - Single-column layo