Output format·Email·v2.0.0

email-html-mjml

Responsive HTML email template generation using the MJML 5.x framework: welcome emails, promotional blasts, transactional templates, and…

You say
Buy it · $99 Read it before you buy $99 Written by framix-team · unverified publisher
Context cost
13.2k tokensestimated from the bundle, loaded when it triggers
Bundle
8 files · 52.7 kBtext throughout, nothing executable
Licence
MITpaid listing
Last change
v2.0.0
Servers it uses
Noneruns standalone

What it does

Responsive HTML email template generation using MJML 5.x framework. Use when the user asks to create, generate, design, or build an email template — including welcome emails, promotional blasts, transactional templates, newsletters, or any responsive email. Also use when the user asks to compile MJML to HTML, work with or edit existing MJML templates or `.mjml` files, or troubleshoot email rendering issues across clients.

Installed, it changes the agent in these ways.

What this skill changes about the agent is not written down here yet. The listing was collected from its source, and the description is in its own SKILL.md.

Output format

Produces one artefact, exactly shaped.

emailmjmltemplateshtml-email
Filed under

Email

The skill itself

This is the whole product. A skill is instructions the model reads, so there is nothing behind the listing you cannot see first — the front matter loads with every session, and the body below it loads when the skill triggers.

SKILL.md10.9 kB · 180 lines
--- name: email-html-mjml description: Responsive HTML email template generation using MJML 5.x framework. Use when the user asks to create, generate, design, or build an email template — including welcome emails, promotional blasts, transactional templates, newsletters, or any responsive email. Also use when the user asks to compile MJML to HTML, work with or edit existing MJML templates or `.mjml` files, or troubleshoot email rendering issues across clients. license: MIT compatibility: Requires Node.js 20 or later (LTS 20/22/24) for npx mjml compilation. Install MJML per project (npm install -D mjml). Works with Claude Code and Claude.ai. metadata: author: Framix version: 2.0.0 documentation: https://github.com/framix-team/skill-email-html-mjml ---
12# email-html-mjml — Responsive Email Developer
13
14Generate valid, cross-client MJML 5.x templates and compile them to production-ready HTML. The primary goal is compatibility: Outlook (2013–365), Gmail (web/app), Apple Mail, and major mobile clients. Every output must be compilable with --config.validationLevel=strict and survive Gmail's 102KB clip limit.
15
16---
17
18## Workflow
19
201. **Gather requirements** — Infer email type, brand colors, and content from the user's message and conversation context. Ask only for what is genuinely missing and blocking progress (e.g., no colors provided and the layout has branded sections). Never front-load a questionnaire.
212. **Plan layout** — Decide and announce the structure before writing code (single-column, 2-col grid, hero + content, etc.)
223. **Load component references** — Read the relevant file(s) from the Component Index below before writing any MJML
234. **Generate MJML** — Write complete, valid MJML starting from <mjml> with a full <mj-head>
245. **Compile** — Follow compilation.md. Run npx mjml with --config.minify=true
256. **Deliver both files** — Always output .mjml source AND compiled .html
26
27---
28
29## 9 Engineering Rules
30
311. **Structural Integrity** — All visual content MUST be in <mj-column> inside <mj-section>. Sections cannot be nested.
322. **Responsive Defaults** — Assume 600px width. Use <mj-group> to prevent mobile stacking for side-by-side elements (social bars, logo rows). Use <mj-section gutter="..."> for equal spacing between columns instead of padding tricks.
333. **Outlook Compatibility** — Use <mj-font> for web fonts (prevents Times New Roman fallback). Always provide a fallback stack (Arial, sans-serif). For <mj-section> background images, always set both background-size and a fallback background-color.
344. **Gmail Optimization** — Use inline="inline" on <mj-style> for custom CSS. Prefer component attributes (color, font-size) over CSS classes for critical styles.
355. **Dark Mode** — Include dark mode support when explicitly requested or when the email has a light background that would cause harsh forced-inversion. See the Dark Mode Pattern below.
366. **Accessibility** — Every <mj-image> MUST have alt. Always set <mj-title> (populates aria-label). Maintain WCAG 2.1 AA 4.5:1 contrast. For heading roles, use mj-html-attributes — direct role/aria-level attributes on mj-text are illegal under strict validation (see Accessibility Checklist below).
377. **Styling Efficiency** — Use <mj-attributes> with <mj-all>, component defaults, and <mj-class> to eliminate repetitive inline styles.
388. **Hero Sections** — Use <mj-hero> for full-bleed hero banners; it falls back to a regular section in unsupported clients. Avoid <mj-accordion> and <mj-carousel> — client support is too poor to be useful.
399. **Templating Support** — Plain interpolations ({{firstName}}) need no wrapping — they pass through text, attributes, mj-title and mj-preview untouched. Only block tags containing < or > ({% if x < 5 %}, {{#if a<b}}) need <!-- htmlmin:ignore --> protection, or minify silently corrupts them. An <mj-raw> between content components inside a column emits its content *between* </tr> and <tr> — invalid markup; put mj-raw between sections, and keep templating tags out of <mj-style> (see compilation.md).
40
41---
42
43## Critical Gotchas
44
45**MJML 5 mj-include is disabled by default:**
46- <mj-include> tags are silently ignored unless includes are explicitly enabled — a deliberate security change from MJML 4
47- CLI: add --config.allowIncludes true. Node API: pass ignoreIncludes: false
48- Scope allowed directories with --config.includePath (CLI) or includePath (Node) — only MJML, HTML, and CSS includes are supported
49- A partial outside the template's own directory is denied unless its directory is allowlisted
50- **--config.validationLevel=strict does not catch this** — a dropped include still exits 0 and still writes the .html. A clean compile is NOT proof the include landed; grep the output for known partial content before delivering
51- If a compiled template is missing content you expected from an include, check for this first
52
53**Outlook:**
54- Background images: VML only generated for <mj-section> and <mj-hero> — nowhere else
55- Background positioning: keyword values only (top, center, bottom) — pixel values ignored
56- Always pair background-repeat="no-repeat" with explicit background-size
57- Font fallback: <mj-font> hides @font-face from Outlook via MSO conditional comments
58
59**Gmail:**
60- Use component attributes for critical layout — CSS classes may be stripped
61- 102KB clip: always compile with --config.minify=true
62
63**iOS / Android stacking:**
64- **MJML 5's minify no longer strips whitespace between tags** — htmlnano collapses runs to a single space where html-minifier removed them (verified: v4 emits <![endif]--><div class="mj-column-per-50", v5 emits <![endif]--> <div ...). The anti-stacking defence that still works is the font-size:0px MJML puts on the parent <td>, which is emitted in both versions
65- To restore v4 whitespace stripping: --config.minifyOptions '{"collapseWhitespace":"all"}' (JSON string form required)
66- Whitespace between tags causes stacking even inside <mj-group>
67
68**Vertical-align bug:**
69- If any column in a section sets vertical-align, ALL columns in that section must explicitly set it
70
71**JavaScript:**
72- JS is completely blocked in all email clients (Gmail, Outlook, Apple Mail, iOS Mail). No onclick, no clipboard API, no interactivity of any kind. Interactive-looking elements (copy buttons, toggles) are purely decorative.
73
74---
75
76## Dark Mode Pattern
77
78```xml
79<mj-head>
80 <mj-raw>
81 <meta name="color-scheme" content="light dark">
82 <meta name="supported-color-schemes" content="light dark">
83 </mj-raw>
84
85 <!-- Light logo visible by default; dark logo hidden -->
86 <mj-style inline="inline">
87 .dark-logo { display: none !important; }
88 </mj-style>
89
90 <!-- Dark mode overrides -->
91 <mj-style>
92 @media (prefers-color-scheme: dark) {
93 .light-logo { display: none !important; }
94 .dark-logo { display: block !important; }
95 }
96 </mj-style>
97</mj-head>
98```
99
100Safe neutrals: #121212 (not #000000) and #F1F1F1 (not #FFFFFF) — prevents jarring forced inversions.
101
102---
103
104## Accessibility Checklist
105
106- <mj-title> is set (screen reader email label + aria-label)
107- lang attribute on root <mjml> tag
108- alt on every <mj-image> and <mj-social-element>
109- Heading role set via mj-html-attributes (NOT as a direct attribute on mj-text):
110 ```xml
111 <!-- In mj-head -->
112 <mj-html-attributes>
113 <mj-selector path=".email-heading div">
114 <mj-html-attribute name="role">heading</mj-html-attribute>
115 <mj-html-attribute name="aria-level">1</mj-html-attribute>
116 </mj-selector>
117 </mj-html-attributes>
118 <!-- On the component -->
119 <mj-text css-class="email-heading" ...>Heading text</mj-text>
120 ```
121- 4.5:1 contrast ratio on all text/background pairs
122- No text baked into images — always use live <mj-text> blocks
123
124---
125
126## Component Index
127
128Before writing any MJML, read the component file(s) for the components you'll use.
129
130| Group | Components | Load when | File |
131|-------|-----------|-----------|------|
132| Head | mj-attributes, mj-font, mj-style, mj-preview, mj-breakpoint, mj-html-attributes | Setting up head, global styles | components/head.md |
133| Layout | mj-body, mj-section, mj-column, mj-group, mj-wrapper | Building structure / grid | components/layout.md |
134| Content | mj-text, mj-image, mj-button, mj-divider, mj-spacer, mj-table | Adding content blocks | components/content.md |
135| Interactive | mj-accordion, mj-carousel, mj-social, mj-navbar | Interactive or social elements | components/interactive.md |
136| Advanced | mj-hero, mj-raw, mj-include | Hero banners, template tags, partials | components/advanced.md |
137
138General reference (hierarchy, ending tags, validation, width math, Gmail clip): mjml-reference.md
139
140---
141
142## Compilation
143
144Read compilation.md for the full workflow. Key command:
145
146```bash
147npx mjml template.mjml -o dist/template.html --config.minify=true --config.validationLevel=strict
148```
149
150Hard rules:
151- Never npm install -g mjml
152- Always use npx or ./node_modules/.bin/mjml
153- If mjml not in package.json, suggest npm install -D mjml
154
155---
156
157## Examples
158
159All four compile clean under --config.validationLevel=strict --config.minify=true on MJML 5.4.0.
160
161| File | Use as a reference for |
162|------|------------------------|
163| assets/examples/basic-layout.mjml | Structure only. MJML docs example: 6-section layout (header, image hero + button, intro, 2-col image+text, 3-col icons, social row). Intentionally bare-bones — no mj-head, no dark mode, placeholder copy. Not a production template. |
164| assets/examples/order-confirmation.mjml | Transactional. Full mj-head (mj-attributes + mj-class + mj-font + mj-html-attributes), receipt mj-table with scope="col" headers, Handlebars in mj-raw with htmlmin:ignore, conditional block, and mj-include of partials/footer.mjml. **Requires --config.allowIncludes true.** |
165| assets/examples/promo-sale.mjml | Promotional. mj-hero and mj-section background images (VML generated), mj-navbar, mj-group non-stacking row, mj-social, mj-breakpoint, plus the MJML 5 gutter / border / inner-padding attributes. |
166| assets/examples/newsletter.mjml | Editorial + **dark mode**. The full dark-mode pattern from above, mj-wrapper, mj-html-attributes for aria-level 1 and 2, and vertical-align set on every column in each section. |
167
168All copy, image URLs, and brands in these files are placeholders — replace them; do not ship them as-is.
169
170---
171
172## Output
173
174Always deliver:
175
1761. **<name>.mjml** — complete MJML source (editable, version-controllable)
1772. **<name>.html** — compiled output (production-ready, send via ESP)
178
179Name files after the email type: welcome.mjml, promo-sale.mjml, order-confirmation.mjml
180
In the file
SKILL.md1,426 words
Files8
LicenceMIT
Why you can read it

Nothing in a skill executes. The client loads the text and the model follows it, so a skill can be audited the way a runbook is — by reading it.

What it costs in context

Skills are not billed by the call. They are paid for in context: every token the instructions occupy is a token your code, your diff and your conversation cannot use. Here is what this one takes and when it takes it.

≈190
always loaded
The name and description, so the model knows the skill exists and when to reach for it.
12,985
on trigger
The instruction body and 7 supporting files, read only when the skill fires.
6.6%
of a 200k window
Ten skills this size would take about 66% of the window before you open a file.
050k100k150k200k context window

13.2k tokens, estimated from the bundle at four bytes to the token, held for the rest of the session once it triggers. Heavy. Teams tend to install this one per project rather than globally, and load it only when the job comes up.

Servers bill, skills cost

A server charges by the month. A skill charges once per session, in context, and then keeps charging it for as long as the session lives.

Before and after

The same question, put to the same model twice: once as it comes, and once with these instructions loaded.

No worked example has been published for this skill yet.

Adoption
Installsnone yet
Ratingno reviews yet

The procedure it runs

The procedure has not been published here. It is in the skill’s own SKILL.md, which its author has not sent to the marketplace yet.

Prose, not code

These steps are written for a model to follow, not executed by a runtime. It can still be told to skip one, and it will say so when it does.

Servers it uses

None. This skill calls no MCP servers at all.

Everything it needs is in the instructions, so it works in a project with nothing connected — the model reads the file and changes how it works with what it can already reach.

It writes no files and reaches no network. All it changes is how the model reasons and writes.

What it asks for
Writes filesno
Network accessno

Read from the allowed-tools line of this skill’s own SKILL.md. A skill grants no permissions of its own — it can only ask for tools your client already has.

What it will not do

Every skill is narrow, and the useful ones say where they stop. These are the jobs this one is the wrong tool for.

What this skill is not for has not been published here. Nothing is implied by that: it is a section the author has not filled in.

If this is not it

13 other skills in Email

What is in the bundle

8 files, 52.7 kB on disk. A bundle is text throughout: the instructions the model reads, plus the templates it fills in.

  • SKILL.md10.9 kB
  • compilation.md5.4 kB
  • mjml-reference.md8.7 kB
  • components/advanced.md6.1 kB
  • components/content.md5.2 kB
  • components/head.md3.3 kB
  • components/interactive.md8.2 kB
  • components/layout.md4.9 kB
What is not in it

No dependencies and nothing executable: a skill is text the agent reads, so the bundle is 8 files you can review in full before installing. The MIT licence covers the templates and examples as well as the instructions.

Install

Installing copies the bundle into your project. Nothing runs at install time — the files sit on disk until the model reads them.

$99 once
email-html-mjml · MIT · framix-team
one-time
Price$99 once
LicenceMIT — the author’s, unchanged by this purchase
Paid throughStripe, once, on the card you add at the checkout
Keeps workingfor good — the files are yours once they are on disk
Updatesevery release of 2.x through this account

You can read the whole bundle before paying — the SKILL.md above is the product, not a preview of it. What the money buys is the delivery: the folder packaged and handed to your machine by key, every update its author ships, and our support if it does not do what this listing says. The terms of use are MIT, set by the author and unchanged by buying it here.

Payment runs through Stripe, on a page like this one rather than a redirect. Once there is an account it joins the same mcprush invoice as everything else you run, so there is never a second card to enter.

Which clients pick it up on their own

A skill is a folder of text. A client with a skills folder reads it without being told; everywhere else the same text works, it is just handed to the model rather than found.

Claude Code.claude/skills/
Claude Desktop
ChatGPT
Cursor.cursor/skills/
VS Code.github/skills/
Codex CLI.agents/skills/
Gemini CLI.gemini/skills/
Grok.grok/skills/
Zed.agents/skills/
Windsurf.windsurf/skills/
Agent SDK.claude/skills/
HTTP / API
This release
Version2.0.0
Publishedno release date on file
Price$99
Referenceframix-team/email-html-mjml

Versions

v2.0.0 is what is on the shelf; no release here carries a date. Instructions change more often than APIs do — a skill can be rewritten entirely without anything it depends on moving.

v2.0.0
  • No earlier releases have been published to the marketplace.
Pinning

Put framix-team/email-html-mjml@2.0.0 in the install command to hold this exact version. Without the suffix you get whatever is current the day you install, and nothing moves under you afterwards.

Reviews

no reviews yet · no installs yet

Nobody has reviewed this skill yet. The rating is the mean of the reviews written here, so there is none until somebody writes the first.

Who can post

Only accounts that have had the skill installed for fourteen days, so a review is written after living with it rather than after reading it. Publishers may reply once.

Who wrote it

FR
framix-team

Publishes on mcprush.

0 servers listed1 skill listednot claimed
Profile
Publisher
Servers0