Email Html Mjml
Generate responsive, client-safe marketing and lifecycle email HTML using MJML components instead of hand-rolled tables.
Overview
email-html-mjml is an agent skill most often used in Build (also Grow lifecycle, Launch distribution) that authors responsive email layouts in MJML for solo builders.
Install
npx skills add https://github.com/framix-team/skill-email-html-mjml --skill email-html-mjmlWhat is this skill?
- MJML section/column layout for headers, hero images, and CTA buttons
- Patterns for background-image hero blocks with centered slogan and promotion button
- Styled body copy blocks with typography and color tokens inline-friendly for email clients
- Company header and repeatable section backgrounds for brand-consistent campaigns
- Output-oriented toward compilable MJML rather than one-off pasted HTML
Adoption & trust: 2 installs on skills.sh; 47 GitHub stars; 3/3 security scanners passed (skills.sh audits); trending (+200% hot-view momentum).
What problem does it solve?
You need branded campaign or lifecycle email HTML that survives real clients, but table layouts and inline CSS are tedious to write by hand.
Who is it for?
Indie SaaS founders, newsletter operators, and shop owners who want repeatable promo and onboarding templates without a design agency.
Skip if: Pure plain-text transactional mail with no layout needs, or teams standardized on React Email with no MJML in the stack.
When should I use this skill?
You need MJML for newsletters, onboarding, or promo sends and want agent-generated sections, heroes, and buttons consistent with email-client constraints.
What do I get? / Deliverables
You get MJML source with sections, heroes, and CTAs ready to compile into send-ready HTML for your ESP.
- MJML source files
- Compiled HTML ready for ESP upload
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Build/frontend because the deliverable is markup structure; the same templates power later Grow lifecycle sends. Email layout, sections, columns, and buttons are presentation work—frontend discipline even though output is HTML for inboxes.
Where it fits
Add a welcome email MJML file alongside your app before wiring Resend.
Draft a three-part drip with shared header and CTA styling.
Ship a launch promo block with hero image and single promotion button.
How it compares
Skill package for MJML markup—not an MCP server and not a deliverability or domain-authentication checklist.
Common Questions / FAQ
Who is email-html-mjml for?
Solo builders and small teams who send product, marketing, or lifecycle email and want agent help writing MJML instead of fragile hand-coded tables.
When should I use email-html-mjml?
Use it in Build (frontend) when adding email templates; in Grow (lifecycle) for drips and newsletters; and in Launch (distribution) for launch-day promo messages.
Is email-html-mjml safe to install?
It is a templating skill; review the Security Audits panel on this page and avoid embedding untrusted remote image URLs in production templates without your CDN policy.
SKILL.md
READMESKILL.md - Email Html Mjml
<mjml> <mj-body> <!-- Company Header --> <mj-section background-color="#f0f0f0"> <mj-column> <mj-text align="center" font-style="italic" font-size="20px" color="#626262" > My Company </mj-text> </mj-column> </mj-section> <!-- Image Header --> <mj-section background-url="https://1.bp.blogspot.com/-TPrfhxbYpDY/Uh3Refzk02I/AAAAAAAALw8/5sUJ0UUGYuw/s1600/New+York+in+The+1960's+-+70's+(2).jpg" background-size="cover" background-repeat="no-repeat" > <mj-column width="600px"> <mj-text align="center" color="#fff" font-size="40px" font-family="Helvetica Neue" > Slogan here </mj-text> <mj-button background-color="#F63A4D" href="#"> Promotion </mj-button> </mj-column> </mj-section> <!-- Introduction Text --> <mj-section background-color="#fafafa"> <mj-column width="400px"> <mj-text font-style="italic" font-size="20px" font-family="Helvetica Neue" color="#626262" > My Awesome Text </mj-text> <mj-text color="#525252"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus, sit amet suscipit nibh. Proin nec commodo purus. Sed eget nulla elit. Nulla aliquet mollis faucibus. </mj-text> <mj-button background-color="#F45E43" href="#">Learn more</mj-button> </mj-column> </mj-section> <!-- 2 Columns Section --> <mj-section background-color="white"> <!-- Left image --> <mj-column> <mj-image width="200px" src="https://designspell.files.wordpress.com/2012/01/sciolino-paris-bw.jpg" /> </mj-column> <!-- Right paragraph --> <mj-column> <mj-text font-style="italic" font-size="20px" font-family="Helvetica Neue" color="#626262" > Find amazing places </mj-text> <mj-text color="#525252"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus. </mj-text> </mj-column> </mj-section> <!-- Icons --> <mj-section background-color="#fbfbfb"> <mj-column> <mj-image padding="10px" width="100px" src="https://191n.mj.am/img/191n/3s/x0l.png" /> </mj-column> <mj-column> <mj-image padding="10px" width="100px" src="https://191n.mj.am/img/191n/3s/x01.png" /> </mj-column> <mj-column> <mj-image padding="10px" width="100px" src="https://191n.mj.am/img/191n/3s/x0s.png" /> </mj-column> </mj-section> <!-- Social icons --> <mj-section background-color="#e7e7e7"> <mj-column> <mj-social> <mj-social-element name="facebook">Share</mj-social-element> </mj-social> </mj-column> </mj-section> </mj-body> </mjml> # MJML Compilation Reference --- ## Hard Rules 1. **No global install** — Never run `npm install -g mjml`. If missing, suggest `npm install -D mjml`. 2. **Use npx or relative path** — `npx mjml` or `./node_modules/.bin/mjml`. Never assume global `$PATH`. 3. **Verify source first** — Check that the `.mjml` file exists and contains valid XML before compiling. --- ## Environment Check ```bash node -v # Must succeed — Node is required cat package.json # Look for "mjml" in dependencies or devDependencies ``` If `mjml` is not in `package.json`: