Email HTML is one of the most unforgiving target formats on the web: every major client brings its own rendering quirks, from Outlook's VML backgrounds to Gmail's clipping limit. The Email Template works with the MJML 4.x framework, which hides these quirks behind a clean component language, and always delivers both files in the end: the editable .mjml source and the compiled, ready-to-send .html.
\nThe skill is built for welcome emails, promotional emails, order confirmations, and newsletters, anywhere an email needs to look reliable in real inboxes, not just in a design preview. Nine fixed technical rules, covering everything from structure to accessibility to dark mode support, plus a collection of known pitfalls per client, mean fewer surprises once the email reaches a real inbox.
\nThe honest limit: the skill compiles locally via Node.js and npx, a working Node environment version 14 or higher is required. It checks structure, validation, and the 102 KB clipping limit, not the actual dispatch through your email service, and not whether the content itself is compelling.
\n" }, { "id": "skill-text", "title": "Skill Text", "html": "This is an openly attributed external skill from Framix. Source: https://github.com/framix-team/skill-email-html-mjml
\nThis skill requires Node.js version 14 or higher and an environment with terminal and file access, since it compiles MJML locally via npx. Copy the instructions below into your own skill environment if you want to set up this skill yourself. As a file: email-html-mjml.en.json
\n" } ], "schritte": [ { "nr": 1, "titel": "Clarify requirements", "beschreibung": "Email type, brand colors, and content are named or derived from the conversation so far, and the layout is defined upfront.", "rolle": "mensch" }, { "nr": 2, "titel": "Load component references", "beschreibung": "The reference files matching the chosen layout are loaded before the MJML structure is written.", "rolle": "automatisch" }, { "nr": 3, "titel": "Build the MJML", "beschreibung": "A complete MJML document with a full head section is created, built from the matching components.", "rolle": "automatisch" }, { "nr": 4, "titel": "Compile and validate", "beschreibung": "The MJML is compiled to HTML with minification enabled and strict validation.", "rolle": "automatisch" }, { "nr": 5, "titel": "Deliver both files", "beschreibung": "The MJML source and the compiled, ready-to-send HTML are ready.", "rolle": "ergebnis" }, { "nr": 6, "titel": "Check the result", "beschreibung": "The compiled HTML file is checked in a preview or a real inbox before sending, especially in Outlook and with dark mode enabled.", "rolle": "freigabe" } ], "herausgeber": "Voyage Digital", "version": "2.0", "stand": "2026-07-26", "umsetzung": [ { "titel": "Provide a Node environment", "text": "The skill needs an environment with terminal and file access, plus a locally installed MJML version, with Node.js version 14 or higher." }, { "titel": "Start with a single email type", "text": "The best way in is a single, clearly scoped template, for example a welcome email, to get familiar with the layout and rules." }, { "titel": "Use it for recurring templates", "text": "The skill is particularly suited to email types that get refilled regularly, such as order confirmations or seasonal promotional emails." }, { "titel": "Use dark mode deliberately", "text": "The dark mode pattern is most worthwhile when a light background would otherwise result in a harsh forced inversion." }, { "titel": "Check the result in real inboxes", "text": "Before sending, it is worth a look in a preview or a real inbox, especially in Outlook and with dark mode enabled." } ], "zutaten": [ "Email type", "Brand colors", "Content", "Dark mode" ], "beispielSzenario": "A marketing team is planning a promotional email for a time-limited price offer that starts in a week. The email type, the two brand colors, the core content with a discount code and a deadline, and the request for dark mode support are provided, since part of the audience reads in dark mode. The Email Template builds the structure with a hero section, a button, and a fallback background color for Outlook, compiles the result with strict validation, and delivers the MJML source together with the finished HTML, which stays under Gmail's clipping limit and can be handed straight to the delivery service.", "eingaben": [ { "feld": "Email type, e.g. welcome email, promotional email, order confirmation, newsletter", "pflicht": true }, { "feld": "Brand colors and content, from context or stated directly", "pflicht": true }, { "feld": "Dark mode support wanted or not", "pflicht": false }, { "feld": "Existing MJML template, if an existing template is being edited", "pflicht": false } ], "ausgabe": "The MJML source file and the compiled, production-ready HTML file, checked against Outlook, Gmail, and mobile rendering pitfalls, with alt text and WCAG-compliant contrast.", "prompt": "# ROLE\nYou create valid, cross-client MJML 4.x templates and compile them to production-ready HTML. The top priority is compatibility: Outlook (2013 to 365), Gmail (web and app), Apple Mail, and the major mobile clients. Every output must compile with --config.validationLevel=strict and stay within Gmail's 102 KB clipping limit.\n\n# WORKFLOW\n1. Capture requirements: derive email type, brand colors, and content from the message and the conversation so far. Only ask about what is genuinely missing and blocking progress, for example missing colors for brand-bound sections. Never front-load a full questionnaire.\n2. Plan the layout: define and name the structure before writing code, for example single column, two-column grid, hero with content below.\n3. Load component references: before writing MJML, read the matching files from the component index.\n4. Generate MJML: complete MJML starting from