email-html-mjml

Name: email-html-mjml
Author: framix-team

619installs7forks

How to install email-html-mjml?

framix-team/skill-email-html-mjml/email-html-mjml

$npx -y skills add framix-team/skill-email-html-mjml --skill email-html-mjml

Installs into the current project.

Summary

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

Files · 1

View on GitHub

SKILL.md

1	# email-html-mjml — Responsive Email Developer
2
3	Generate valid, cross-client MJML 4.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.
4
5	---
6
7	## Workflow
8
9	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.
10	2. Plan layout — Decide and announce the structure before writing code (single-column, 2-col grid, hero + content, etc.)
11	3. Load component references — Read the relevant file(s) from the Component Index below before writing any MJML
12	4. Generate MJML — Write complete, valid MJML starting from `<mjml>` with a full `<mj-head>`
13	5. Compile — Follow `compilation.md`. Run `npx mjml` with `--config.minify=true`
14	6. Deliver both files — Always output `.mjml` source AND compiled `.html`
15
16	---
17
18	## 9 Engineering Rules
19
20	1. Structural Integrity — All visual content MUST be in `<mj-column>` inside `<mj-section>`. Sections cannot be nested.
21	2. Responsive Defaults — Assume 600px width. Use `<mj-group>` to prevent mobile stacking for side-by-side elements (social bars, logo rows).
22	3. 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`.
23	4. Gmail Optimization — Use `inline="inline"` on `<mj-style>` for custom CSS. Prefer component attributes (`color`, `font-size`) over CSS classes for critical styles.
24	5. 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.
25	6. 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).
26	7. Styling Efficiency — Use `<mj-attributes>` with `<mj-all>`, component defaults, and `<mj-class>` to eliminate repetitive inline styles.
27	8. 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.
28	9. Templating Support — Wrap dynamic tags (Handlebars/Liquid) in `<mj-raw>` to protect them from the MJML parser.
29
30	---
31
32	## Critical Gotchas
33
34	Outlook:
35	- Background images: VML only generated for `<mj-section>` and `<mj-hero>` — nowhere else
36	- Background positioning: keyword values only (`top`, `center`, `bottom`) — pixel values ignored
37	- Always pair `background-repeat="no-repeat"` with explicit `background-size`
38	- Font fallback: `<mj-font>` hides `@font-face` from Outlook via MSO conditional comments
39
40	Gmail:
41	- Use component attributes for critical layout — CSS classes may be stripped
42	- 102KB clip: always compile with `--config.minify=true`
43
44	iOS / Android stacking:
45	- Always compile with `--config.minify=true` — removes whitespace between `inline-block` columns
46	- Whitespace between tags causes stacking even inside `<mj-group>`
47
48	Vertical-align bug:
49	- If any column in a section sets `vertical-align`, ALL columns in that section must explicitly set it
50
51	JavaScript:
52	- 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.
53
54	---
55
56	## Dark Mode Pattern
57
58	```xml
59	<mj-head>
60	<mj-raw>
61	<meta name="color-scheme" content="light dark">
62	<meta name="supported-color-schemes" content="light dark">
63	</mj-raw>
64
65	<!-- Light logo visible by default; dark logo hidden -->
66	<mj-style inline="inline">
67	.dark-logo { displa

People who liked this also viewed

6 picks

Type

email-html-mjml

619installs7forks

View on GitHub

How to install email-html-mjml?

framix-team/skill-email-html-mjml/email-html-mjml

$npx -y skills add framix-team/skill-email-html-mjml --skill email-html-mjml

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# email-html-mjml — Responsive Email Developer
2
3	Generate valid, cross-client MJML 4.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.
4
5	---
6
7	## Workflow
8
9	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.
10	2. Plan layout — Decide and announce the structure before writing code (single-column, 2-col grid, hero + content, etc.)
11	3. Load component references — Read the relevant file(s) from the Component Index below before writing any MJML
12	4. Generate MJML — Write complete, valid MJML starting from `<mjml>` with a full `<mj-head>`
13	5. Compile — Follow `compilation.md`. Run `npx mjml` with `--config.minify=true`
14	6. Deliver both files — Always output `.mjml` source AND compiled `.html`
15
16	---
17
18	## 9 Engineering Rules
19
20	1. Structural Integrity — All visual content MUST be in `<mj-column>` inside `<mj-section>`. Sections cannot be nested.
21	2. Responsive Defaults — Assume 600px width. Use `<mj-group>` to prevent mobile stacking for side-by-side elements (social bars, logo rows).
22	3. 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`.
23	4. Gmail Optimization — Use `inline="inline"` on `<mj-style>` for custom CSS. Prefer component attributes (`color`, `font-size`) over CSS classes for critical styles.
24	5. 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.
25	6. 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).
26	7. Styling Efficiency — Use `<mj-attributes>` with `<mj-all>`, component defaults, and `<mj-class>` to eliminate repetitive inline styles.
27	8. 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.
28	9. Templating Support — Wrap dynamic tags (Handlebars/Liquid) in `<mj-raw>` to protect them from the MJML parser.
29
30	---
31
32	## Critical Gotchas
33
34	Outlook:
35	- Background images: VML only generated for `<mj-section>` and `<mj-hero>` — nowhere else
36	- Background positioning: keyword values only (`top`, `center`, `bottom`) — pixel values ignored
37	- Always pair `background-repeat="no-repeat"` with explicit `background-size`
38	- Font fallback: `<mj-font>` hides `@font-face` from Outlook via MSO conditional comments
39
40	Gmail:
41	- Use component attributes for critical layout — CSS classes may be stripped
42	- 102KB clip: always compile with `--config.minify=true`
43
44	iOS / Android stacking:
45	- Always compile with `--config.minify=true` — removes whitespace between `inline-block` columns
46	- Whitespace between tags causes stacking even inside `<mj-group>`
47
48	Vertical-align bug:
49	- If any column in a section sets `vertical-align`, ALL columns in that section must explicitly set it
50
51	JavaScript:
52	- 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.
53
54	---
55
56	## Dark Mode Pattern
57
58	```xml
59	<mj-head>
60	<mj-raw>
61	<meta name="color-scheme" content="light dark">
62	<meta name="supported-color-schemes" content="light dark">
63	</mj-raw>
64
65	<!-- Light logo visible by default; dark logo hidden -->
66	<mj-style inline="inline">
67	.dark-logo { displa

People who liked this also viewed

6 picks

Type