Skip to content
UXClaim
Design Systems

Email HTML MJML

Generate production-ready HTML emails from conversation using MJML. Outlook-safe, Gmail-optimized, WCAG 2.1 AA accessible.

View source More in Design Systems

What It Does

This Claude Code skill generates responsive, cross-client HTML emails directly from conversation. You describe your email, and it returns both editable MJML source and compiled production-ready HTML — guaranteed to render correctly in Outlook 2013–365, Gmail (web and app), and Apple Mail without manual table coding or VML hand-authoring.

How It Works

The skill uses MJML 4.x as a structural reliability framework. MJML compiles semantic XML into the deeply nested, client-specific table HTML that email clients actually need. It automatically handles:

  • Ghost Tables (MSO conditional comments) for Outlook’s Word engine
  • VML injection for background images where Outlook supports them
  • Hybrid-fluid column math — fluid widths for modern clients, fixed widths for Outlook
  • Minification to prevent Gmail clipping (102KB threshold) and iOS/Android column stacking bugs
  • Font fallback protection via MSO conditional comments
  • Dark mode resilience with color-scheme meta tags and media query overrides
  • WCAG 2.1 AA accessibility — enforced alt text, ARIA roles, heading semantics, language tags

Use Cases

  • Marketing campaigns that must render identically across all client versions
  • Transactional emails (order confirmations, password resets) requiring absolute stability
  • Newsletter templates with complex layouts (multi-column grids, hero sections, social bars)
  • Accessible emails serving diverse audiences across outdated and modern clients
  • Version-controlled email templates for development teams

Who Benefits

Email designers tired of manual troubleshooting, product teams shipping transactional email at scale, agencies managing client email systems, and anyone who’s debugged rendering differences between Outlook and Gmail.

Frequently asked questions

How do I use this skill to create an email?
Describe your email in conversation — mention the type (marketing, transactional, newsletter), key sections, brand colors, and content. The skill gathers requirements, announces the layout structure, and generates a complete MJML template. It then compiles the source into minified production HTML. You receive both the .mjml source (editable, version-controllable) and .html output (ready to send via your ESP).
Why use MJML instead of writing HTML tables by hand?
Email HTML requires deep knowledge of VML injection, Ghost Tables, CSS inlining, and client-specific quirks. MJML makes the correct output the default. You write semantic XML; MJML emits the client-specific table structures automatically. This eliminates the error-prone manual work and makes templates maintainable and version-controllable.
What email clients does this support?
The skill generates emails compatible with Outlook 2013–2021 (Word rendering engine), Outlook 365 on Mac, Gmail (web and app), Apple Mail, iOS Mail, Android Gmail, and most other modern email clients. Absolute rendering parity across all clients is impossible due to client fragmentation, but this skill handles the most common breakage patterns.
How does it prevent Gmail from clipping my email?
Every template is compiled with minification enabled (--config.minify=true), which removes whitespace between inline-block elements. This keeps compiled HTML under Gmail's 102KB clip threshold. As a bonus, it eliminates the iOS/Android column stacking bug caused by whitespace between columns.
Can I use dynamic template tags (Handlebars, Liquid, Jinja)?
Yes. Dynamic template tags are wrapped in <mj-raw> to protect them from the MJML parser. The compiled HTML preserves the tags intact for injection by your ESP (SendGrid, AWS SES, Postmark, etc.).
How do I add dark mode support to my email?
The skill implements the full dark mode pattern: <meta name="color-scheme" content="light dark"> via <mj-raw>, logo swapping with inline style hiding, and @media (prefers-color-scheme: dark) overrides in non-inlined <mj-style>. Safe neutrals (#121212, #F1F1F1) replace pure black/white to prevent forced inversions in Apple Mail.
Are generated emails accessible?
Yes, to WCAG 2.1 AA. Every image requires alt text (enforced at generation), titles populate <title> and aria-label, lang attributes flow through the document, and heading ARIA roles are applied via CSS targeting. The skill validates accessibility at compile time with strict validation.
Can I edit the generated MJML source?
Absolutely. The .mjml file is the editable artifact — version-controllable, maintainable, and safe to modify. Recompile with `npx mjml template.mjml -o dist/template.html --config.minify=true --config.validationLevel=strict` to regenerate production HTML after edits.

Glossary

MJML
Markup language (MJML 4.x) that compiles semantic XML into cross-client-compatible HTML email. Handles Outlook quirks, VML, Ghost Tables, and CSS inlining automatically.
Ghost Tables
Nested HTML tables wrapped in MSO conditional comments. Used to constrain layout for Outlook's Word rendering engine while remaining invisible to modern email clients.
VML (Vector Markup Language)
Microsoft proprietary format for rendering vector graphics. Email clients like Outlook support VML for background images in specific contexts (mj-section, mj-hero) but not elsewhere.
Hybrid-Fluid Layout
Design strategy where modern clients receive fluid percentage-based widths that respond to viewport, while Outlook receives fixed-width Ghost Tables — both generated from the same MJML source.
CSS Inlining
Process of converting <style> tag CSS into inline style attributes. Required for Gmail compatibility because Gmail strips <head> CSS. MJML handles this automatically with inline="inline" directive.

More in Design Systems

All →
Design Systems

Arcade Prototyper

Build interactive HTML prototypes using DevRev's production design system and Arcade components in Claude Code.

asundiev-devrev
Design Systems

Awesome Design Skill

Access 54+ brand design systems (Linear, Apple, Stripe, Vercel) for Claude Code UI development with complete design specifications.