email-html-mjml

Solid

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.

Web & Frontend 65 stars 8 forks Updated 2 weeks ago MIT

Install

View on GitHub

Quality Score: 88/100

Stars 20%
61
Recency 20%
90
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# email-html-mjml — Responsive Email Developer Generate 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. --- ## Workflow 1. **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. 2. **Plan layout** — Decide and announce the structure before writing code (single-column, 2-col grid, hero + content, etc.) 3. **Load component references** — Read the relevant file(s) from the Component Index below before writing any MJML 4. **Generate MJML** — Write complete, valid MJML starting from `<mjml>` with a full `<mj-head>` 5. **Compile** — Follow `compilation.md`. Run `npx mjml` with `--config.minify=true` 6. **Deliver both files** — Always output `.mjml` source AND compiled `.html` --- ## 9 Engineering Rules 1. **Structural Integrity** — All visual content MUST be in `<mj-column>` inside `<mj-section>`. Sections cannot be nested. 2. **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...

Details

Author
framix-team
Repository
framix-team/skill-email-html-mjml
Created
6 months ago
Last Updated
2 weeks ago
Language
N/A
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

email-html-mjml

Responsive HTML email template generation using MJML 4.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 troubleshoot email rendering issues across clients.

0 Updated 1 weeks ago
bertbertov
Web & Frontend Listed

email-marketing-html-mjml

Design, write, personalize, compile, and quality-assure visually distinctive, brand-aligned HTML email systems using MJML, reusable HTML templates, and optional Emailcn registry components for React Email, MJML React, or JSX Email. Use for mailing-list campaigns, newsletters, product and blog promotion, discounts, launches, cold outreach, follow-ups, lifecycle sequences, announcements, transactional order/shipping/account updates, subject lines, preview text, Gmail Promotions annotations, Gmail Actions/Highlights markup, deliverability reviews, spam prevention, list hygiene, email compliance, testing, and campaign measurement. Also use to select or integrate Emailcn, edit email component source, or troubleshoot `.mjml` and compiled email HTML across Gmail, Outlook, Apple Mail, and mobile clients.

0 Updated 1 weeks ago
apnatvar
Web & Frontend Solid

design-email

Design and implement transactional and marketing email templates. Detects email framework (React Email, MJML, or plain HTML), mail provider (Resend, SendGrid, Postmark, AWS SES, Nodemailer), and delivery setup (SPF/DKIM/DMARC). Builds mobile-first templates with dark mode support, 600px max-width, inline styles for client compatibility, and accessible alt text. Reviews copy for natural, conversational tone — no jargon, no passive voice, no corporate formality. Checks deliverability config. Tests rendering across major email clients. Generic across any stack. Use when asked to "build an email template", "transactional email", "welcome email", "password reset email", "email design", "React Email", "MJML", "dark mode email", "deliverability", "SPF DKIM", "email copy review", or "why is my email in spam".

9 Updated 4 days ago
kensaurus