Generate Cross-Client HTML Email Templates

Generates responsive HTML email templates that render correctly across incompatible email clients without manual table coding or VML hand-authoring. Most email templates break in production because email clients use different rendering engines: Outlook uses Microsoft Word, Gmail strips CSS, and iOS Mail stacks columns on whitespace. This skill compiles MJML, a semantic framework that encodes all the quirks and constraints of each client into correct output, so broken rendering becomes avoidable.

Once installed, you ask Claude to generate an email template and describe what you need. The skill gathers requirements from context, plans the layout structure, loads the relevant MJML component reference files, generates complete, valid MJML with a full head section, compiles it with minification enabled, and delivers both the editable .mjml source and the production-ready .html file ready to send via any ESP (SendGrid, AWS SES, Postmark, etc.).

Every template compiles and renders identically across Outlook 2013–365, Gmail web and app, Apple Mail, and iOS Mail without manual fixes, because MJML generates the deeply nested table structure and MSO conditional comments that each client actually requires.

Requires Node.js 14 or later because MJML compilation uses native Node features. MJML must be installed per project (npm install -D mjml) to avoid version conflicts across different email templates. Always compile with --config.minify=true to fix iOS/Android column stacking bugs and stay under Gmail's 102KB clip threshold. Strict validation (--config.validationLevel=strict) is enforced by default to catch syntax errors early.

MJML is a one-way compiler: once compiled to HTML, the output is not meant to be edited by hand. Always edit the .mjml source and recompile. Interactive elements (JavaScript, carousels, accordions) are not supported in email clients; avoid mj-accordion and mj-carousel due to poor client support. Background images only render in Outlook via VML for mj-section and mj-hero; mj-column background images will not show in Outlook. Requires Node.js 14+ and MJML installed per project, never globally.