Generate MJML Email Templates1 skill
Creates responsive, cross-client MJML source templates with complete head blocks, layouts, and content blocks.
Content Blueprint
Generate Cross-Client HTML Email Templates
framix-teamMay 2026
A Claude Code skill that generates MJML 4.x templates and compiles them to production-ready HTML emails compatible with Outlook 2013–365, Gmail, and Apple Mail.
Email Template GenerationHTML Email CompilationCross-Client Compatibility
Install Command
Run this command to deploy the blueprint to your environment.
What problem does this solve?
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.
How does it work?
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.).
Included Skill Groups
What's the biggest win?
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.
What should I know technically?
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.
What should I watch out for?
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.
Key Features
Outlook Compatibility
Automatic VML injection for background images, MSO conditional Ghost Tables for layout constraints, font fallback protection, and background positioning limited to keyword values.
Gmail Optimization
Minified output stays under the 102KB clip threshold. Inline styles on critical CSS blocks because Gmail strips head styles.
Mobile Stacking Prevention
mj-group component and minification eliminate the iOS Mail and Android whitespace-triggered column stacking bug.
Dark Mode Support
Implements color-scheme meta tags, logo swapping, and media query overrides with safe neutrals to prevent forced inversions in Apple Mail.
WCAG 2.1 AA Accessibility
Required alt text on every image, title and aria-label population, heading roles via html-attributes, and 4.5:1 contrast enforcement.
Tools in this Blueprint
About This Blueprint
- License
- MIT
- Industry
- Technology
- Skills
- 0 workflows, 0 sub-skills, 1 standalone