design-email

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