MJML Responsive Email Template Generator
Generates cross-client responsive HTML email with MJML — Outlook-safe, Gmail-optimized, and WCAG 2.1 AA accessible.
The skill only performs local text generation and compilation: no network sending, no credential access; it explicitly avoids global installs, scope-restricts mj-include via directory allowlists, and asks for user confirmation before npm install; data flow is transparent. Deductions: unverified publisher, no full supply-chain audit visible in the repo, and npx/compile pulls third-party packages, so the risk surface is not fully closed.
Failure modes are documented in exceptional depth (silently dropped includes, stale output on failed recompile, CssSyntaxError, zero-height mj-hero), with clear error-recovery steps. However this is a static review with no executed reproduction, no committed test suite or CI evidence covering key paths, and the 'compiles clean' example claims are author assertions only, so high scores are withheld.
Trigger conditions are precise (create/generate email templates, compile MJML, cross-client rendering troubleshooting); non-fit ranges (no accordion/carousel, examples are placeholders) are explicit, and on-demand component loading is well designed. Deductions: core function depends on the Node/npm ecosystem (npx mjml, npm registry), whose reachability from mainland China is uncertain, and Chinese-language support is undeclared.
Information architecture is well layered (SKILL.md → compilation/reference → per-component files loaded on demand); MIT license, version 2.0.0, and install/verification steps are all present. Deductions: no CHANGELOG, maintenance responsibility and update path rest on a single metadata link, and the 2026 copyright year is unverified.
The claimed deliverable is a directly ESP-ready file pair (.mjml + .html), with high marginal value over hand-coding email HTML. Deductions: no 'directly usable' claim is reproduced in this static review, examples are placeholders requiring user replacement, and output still needs brand injection and rendering verification; the static ceiling of 7 applies.
Multiple claims are marked 'verified' (v4/v5 output differences, 5.4.0 behaviors), but these are author-reported execution results; the repo contains no independently reproducible CI/test evidence, cross-source corroboration is limited, so only 4 of the static ceiling of 5 is awarded.
- This review is a static source read only; no compilation or rendering was executed. Claims such as 'examples compile clean' are author assertions.
- First use pulls third-party MJML packages via npm/npx; audit dependency versions and supply chain in enterprise environments.
- The core workflow depends on the npm registry and npx, which may need mirror configuration on mainland-China networks; Chinese-language support is undeclared.
- Publisher Framix is not verified by the FollowSkills curated registry; treat identity as unknown.
- Templates should be validated in real email clients (Litmus-class tools) before production; the documented compatibility guarantees should not be treated as proven.
What does this skill do, and when should you use it?
This is a Claude Code skill that produces responsive HTML email rendering correctly in Outlook 2013–365, Gmail (web and app), and Apple Mail from a single conversation. It treats MJML 5.x as a structural reliability framework, compiling semantic XML into the deeply nested table HTML that email clients actually require, including Ghost Tables and VML background injection for Outlook. The skill ships nine engineering rules, an on-demand component reference library (loaded only when needed to save tokens), and four example templates that compile clean under strict validation. Every delivery is a pair: an editable .mjml source and a compiled, production-ready .html. It also encodes hard-won client gotchas, such as MJML 5's includes being disabled by default and the iOS/Android column stacking bug.
The skill follows a six-step workflow: infer email type, brand colors, and layout from conversation; announce the planned structure before coding; read only the component reference files needed; generate a complete MJML document with a full <mj-head>; compile via npx mjml with --config.minify=true and --config.validationLevel=strict; and deliver both .mjml and .html files. Generation enforces the Section→Column→Content hierarchy, alt text on every image, a set <mj-title>, heading ARIA roles via mj-html-attributes, 4.5:1 contrast ratios, <mj-raw> protection for Handlebars/Liquid/Jinja template tags, and an opt-in dark mode pattern. It can also troubleshoot cross-client rendering issues.
- A backend developer generating transactional order-confirmation emails with receipt tables, Handlebars variables, and a shared footer partial
- A marketing team using Claude Code to produce promotional emails (hero banners, navbar, social rows, non-stacking layouts) without hand-coding table HTML
- A content editor building newsletters with full dark-mode support and aria-level heading hierarchy
- A startup bootstrapping an email pipeline that needs welcome, promo, and order-confirmation templates ready to send through an ESP like SendGrid, AWS SES, or Postmark
- A developer debugging why an email stacks columns in Gmail app or loses background images in Outlook — the skill's gotcha list guides the diagnosis
What are this skill's strengths and limitations?
- Encodes extensively documented, real-world client gotchas (MJML 5 silently dropping includes, v5 minify no longer stripping whitespace causing stacking, Outlook ignoring pixel background positioning) with actionable mitigations
- Strict-validation plus minified compilation guarantees output stays under Gmail's 102KB clip threshold
- Accessibility is enforced at generation time: alt text, mj-title/aria-label, lang attribute, heading roles via mj-html-attributes, 4.5:1 contrast
- On-demand component loading keeps token usage low for simple templates; all four examples compile clean on MJML 5.4.0 strict
- MIT licensed — free to use, modify, redistribute, including commercially
- Requires Node.js ≥ 20 and per-project MJML installation; unusable without that environment
- mj-accordion and mj-carousel are explicitly discouraged, and JavaScript is blocked by every email client, so interactive emails are out of scope
- No automated test suite is mentioned; the cross-client claims rest on the author's documented experience rather than reproducible tests in the repo
- Outlook VML background images work only for <mj-section> and <mj-hero> — column-level backgrounds will not render in Outlook
- All example brands, images, and copy are placeholders requiring replacement; no documented migration path from other email build tools such as Maizzle or HEML
How do you install this skill?
Three options:
- Recommended: npx skills add framix-team/skill-email-html-mjml (requires the vercel-labs/skills CLI; installs into ~/.claude/skills/)
- git clone https://github.com/framix-team/skill-email-html-mjml, then cp -r skill-email-html-mjml/email-html-mjml ~/.claude/skills/
- Download the repo ZIP from GitHub, unzip, and copy the inner email-html-mjml/ folder to your skills directory.
Claude.ai: upload the zipped email-html-mjml/ folder via Settings → Capabilities → Skills → Upload skill.
Runtime requirements: Node.js ≥ 20, and per-project MJML via npm install -D mjml (never install globally).
How do you use this skill?
Once installed, simply describe the task — e.g., "Create a New Year promo email template with dark mode support" or "Compile this .mjml file to HTML" — and Claude invokes the skill automatically. It infers requirements, announces the layout, generates MJML, and compiles, delivering paired .mjml and .html files. Templates using <mj-include> need --config.allowIncludes true plus --config.includePath at compile time; grep the compiled output before delivery to confirm the include actually landed. The four bundled examples (basic-layout, order-confirmation, promo-sale, newsletter) serve as references; all copy and image URLs are placeholders that must be replaced before shipping.
How does this skill compare with similar options?
The source positions MJML as a reliability framework rather than a convenience layer, arguing that hand-writing Ghost Tables, VML injection, and CSS inlining is error-prone and nearly unmaintainable — the skill's core differentiation versus hand-coded HTML email. However, the source does not name comparable skills or competing tools (e.g., Maizzle, HEML), so no specific competitor comparison is offered.