Designing Email Templates

Create responsive, cross-client compatible HTML email templates using MJML. This skill handles email design and layout — for email copy and strategy, see the designing-email-sequences skill.

Workflow

1. Identify template type — Consult references/email-design-patterns.md for structure and guidelines (transactional, newsletter, announcement, welcome).

2. Write MJML — Create the email template using MJML components:

   • Use semantic MJML tags (<mj-section>, <mj-column>, <mj-text>, <mj-button>)
   • Set global styles in <mj-attributes>
   • Add dark mode support via <mj-style>

3. Compile to HTML — Convert MJML to production-ready HTML:

   node scripts/compile-mjml.js email.mjml --output email.html
   

4. Review compatibility — Consult references/email-client-compatibility.md for client-specific issues.