Building Email Template Builder

We built this so you don't have to wrestle with HTML tables, broken Outlook rendering, and the endless cycle of manually inlining CSS. If you are an engineer tasked with shipping email templates, you know the reality: email is not the web. Media queries get stripped, head tags get ignored, and your carefully crafted responsive layout collapses into a single column of unreadable text in Gmail or Outlook.

We created the Building Email Template Builder skill to solve this at the infrastructure level. This is not a drag-and-drop builder for marketers. This is a programmatic pipeline for developers who need to generate responsive, cross-client compatible emails with dynamic content injection, validated against a strict schema, and rendered deterministically via MJML and Handlebars.

If you are already using the Building Landing Page Generator for your web assets, you know the value of a standardized template engine. Email requires the same rigor, but the constraints are far more brutal. This skill installs a production-grade system that treats email templates as code, not design artifacts.

The Cross-Client Rendering Nightmare

The core problem is that email clients are a fragmented zoo of rendering engines. You write a standard HTML email with CSS in the , and Gmail strips it out. You add media queries for mobile responsiveness, and Outlook for Windows ignores them entirely. You try to fix it with mso-conditional hacks, and your codebase becomes unmaintainable spaghetti.

Most teams try to solve this by hand-writing hybrid HTML. This means using table-based layouts for structure, inline styles for presentation, and fluid images for responsiveness. It works until you need dynamic content. Injecting user names, product lists, or conditional blocks into hand-coded hybrid HTML is error-prone. You end up with escaped HTML entities, broken table structures, or XSS vulnerabilities if you aren't careful with sanitization.

We see engineers spending hours debugging why a button is misaligned in Apple Mail or why a background image isn't tiling in Outlook. This is a waste of senior engineering time. The industry standard for solving this is a semantic markup language that compiles down to the messy hybrid HTML clients expect. MJML is the framework that does this ^[1]. It uses a semantic syntax that is easy to read and write, and it automatically handles the inlining, table structures, and client-specific quirks for you.

But simply using MJML isn't enough. You need a pipeline. You need validation. You need dynamic data injection that is safe and predictable. Without a system, you are still manually testing every variation. You need a tool that enforces structure and automates the rendering.

Why Manual CSS Inlining is a Time Sink

The cost of ignoring this problem is measured in hours, dollars, and lost conversions. Every hour you spend debugging a template in Litmus is an hour you aren't shipping features. If you are shipping transactional emails, a broken template can look unprofessional and erode user trust. If you are shipping marketing campaigns, a broken layout means lost clicks and revenue.

Testing is the biggest time sink. You cannot rely on sending emails to your own inbox to verify rendering. You need to test across 90+ combinations of browsers, devices, and email clients to ensure they appear correctly ^[6]. Tools like Litmus or Email on Acid are essential, but they are expensive and slow. The faster you catch a rendering issue, the cheaper it is to fix. Catching a broken template in CI/CD is free. Catching it after deployment costs you reputation and engineering time.

Responsive design best practices are non-negotiable. Emails with two or more columns require significantly more testing and often break on mobile devices ^[4]. A single-column layout is safer and more reliable. But even a single-column layout can break if the CSS isn't inlined correctly or if the table structure is malformed. You need a system that enforces these best practices by default.

Hybrid design is the only way to create a mobile-friendly experience across more environments ^[2]. This means combining fluid grids with fixed widths, using media queries for mobile overrides, and relying on table-based structures for Outlook. Building a hybrid system from scratch is complex. It requires deep knowledge of CSS hacks and email client quirks. You shouldn't have to be an email specialist to ship a good email. You should have a tool that encapsulates this complexity.

If you are managing a high volume of emails, you also need to consider deliverability and sending infrastructure. The Implementing Email Sending Pipeline skill covers the SMTP and validation loops for delivery, but it doesn't solve the template rendering problem. You need both. A robust sending pipeline is useless if your templates render as broken HTML.

How a Fintech Team Slashed Template Dev Time

Imagine a team at a fintech company that needs to ship transactional emails for account verification, password resets, and weekly digest reports. They have a design system for their web app, and they want their emails to match. They need dynamic content: user names, verification links, and lists of recent transactions.

Before this skill, their process was manual. A designer would create a static HTML template. A developer would then inject Handlebars or Mustache syntax. They would manually inline CSS using a tool like Premailer. They would test in Litmus. If a bug was found, they would fix the HTML, re-inline, and re-test. This cycle took days for a single template.

After installing this skill, their process changed. They started with an MJML template. The MJML syntax is semantic and clean. They used mj-section and mj-column for the layout, mj-image for the logo, and mj-button for the call-to-action. They injected dynamic content using Handlebars syntax: {{user.name}}, {{#each transactions}}, and {{#if is_premium}}.

The render-email.mjs script compiled the MJML to HTML, applied the Handlebars context, and validated the output. The mjml-schema.json validator ensured that the template structure was correct: required mj-body tags, valid mj-image src attributes, and proper nesting of sections and columns. If the schema validation failed, the script exited with a non-zero status, blocking the build.

The result was a pipeline that caught errors before they reached Litmus. The team reduced template development time from days to hours. They shipped consistent, responsive emails across all clients. They could focus on the content and the user experience, not the CSS hacks.

This approach aligns with the best practices for responsive email templates in 2025, which emphasize testing and regular updates to ensure compatibility ^[7]. By automating the rendering and validation, the team ensured that every email met these standards without manual effort.

If you are also building marketing campaigns, the Email Marketing Automation Pack provides the strategy and segmentation logic, but this skill provides the template rendering engine. They are complementary. You need a solid template system to make your automation effective.

One Pipeline for Every Campaign

Once you install this skill, you have a complete system for generating responsive email templates. The pipeline is deterministic, validated, and ready for production.

MJML + Handlebars Pipeline

The core of the skill is the skill.md orchestrator, which defines the MJML and Handlebars pipeline. It references all templates, scripts, validators, and references. It instructs the agent on cross-client compatibility rules and dynamic content injection. You write MJML with Handlebars placeholders. The pipeline compiles, renders, and validates.

Production-Grade Templates

The templates/base.mjml file provides a production-grade MJML skeleton. It uses mj-head for fonts and attributes, mj-hero for banners, mj-section and mj-column for grids, and mj-social and mj-text for footers. It is fully compliant with Context7 MJML docs. The templates/components.mjml file provides a reusable component library: product grid, header, and footer blocks. It demonstrates mj-image fluid-on-mobile, mj-button styling, and mj-divider usage per authoritative docs.

Executable Rendering Script

The scripts/render-email.mjs script is a Node.js executable. It compiles MJML to HTML using mjml-core. It applies the Handlebars context with SafeString helpers to prevent XSS. It validates the output structure and writes the final HTML. It handles whitespace control and dynamic lookup. You can run this script in your CI/CD pipeline to generate emails from data payloads.

Schema Validation

The validators/mjml-schema.json file is a JSON Schema that validates template structure. It enforces required mj-body tags, valid mj-image src attributes, proper nesting of mj-section and mj-column, and the presence of mj-preview. It exits non-zero on schema mismatch. This ensures that broken templates never make it to production.

Bash Validator

The tests/validate-email.sh script is a Bash validator. It runs schema validation against base.mjml, checks for unescaped Handlebars syntax, and verifies that MJML compilation succeeds. It exits 1 on any failure to block broken templates. This is your safety net.

Canonical References

The references/cross-client-compatibility.md file contains canonical knowledge on hybrid vs. responsive design, inline CSS necessity, Outlook table-based rendering quirks, Gmail stripping head CSS, and MJML's automatic inlining strategy. It contains direct excerpts from authoritative sources. The references/handlebars-dynamic-content.md file contains canonical knowledge on {{#if}}/{{#unless}} conditionals, {{#each}} iteration, {{lookup}} dynamic property access, Handlebars.SafeString for safe HTML injection, and escapeExpression for XSS prevention. It contains direct excerpts from docs.

Examples and Payloads

The examples/payload.json file provides a sample data payload for Handlebars rendering. It includes user profile, product array, dynamic links, and conditional flags. It matches the structure expected by base.mjml and components.mjml. The examples/expected-output.html file provides a sanitized expected HTML output snippet for validation comparison. It demonstrates correct table structure, inline styles, and resolved Handlebars placeholders per MJML compilation standards.

This skill integrates with your existing workflow. If you are building invoices, the Building Invoice Generator uses Jinja2 for PDF generation, but this skill handles HTML email rendering. If you are building a waitlist page, the Building Waitlist Page captures emails, but this skill generates the confirmation email. If you need general email productivity, the Email Productivity Pack covers inbox zero and response templates, but this skill covers the technical rendering of complex templates.

The File Manifest

Here is exactly what you get when you install the skill. Every file is included, documented, and ready to use.

• skill.md — Orchestrator: defines the MJML+Handlebars email pipeline, references all templates, scripts, validators, and references. Instructs the agent on cross-client compatibility rules and dynamic content injection.
• templates/base.mjml — Production-grade MJML skeleton with Handlebars dynamic placeholders. Uses mj-head for fonts/attributes, mj-hero for banners, mj-section/mj-column for grids, and mj-social/mj-text for footers. Fully compliant with Context7 MJML docs.
• templates/components.mjml — Reusable MJML component library: product grid, header, and footer blocks. Demonstrates mj-image fluid-on-mobile, mj-button styling, and mj-divider usage per authoritative docs.
• scripts/render-email.mjs — Executable Node.js script: compiles MJML to HTML using mjml-core, applies Handlebars context with SafeString helpers, validates output structure, and writes final HTML. Handles whitespace control and dynamic lookup.
• validators/mjml-schema.json — JSON Schema validating template structure: enforces required mj-body, valid mj-image src attributes, proper nesting of mj-section/mj-column, and presence of mj-preview. Exits non-zero on schema mismatch.
• tests/validate-email.sh — Bash validator: runs schema validation against base.mjml, checks for unescaped Handlebars syntax, and verifies mjml compilation succeeds. Exits 1 on any failure to block broken templates.
• references/cross-client-compatibility.md — Canonical knowledge: hybrid vs responsive design, inline CSS necessity, Outlook table-based rendering quirks, Gmail stripping head CSS, and MJML's automatic inlining strategy. Direct excerpts from authoritative sources.
• references/handlebars-dynamic-content.md — Canonical knowledge: {{#if}}/{{#unless}} conditionals, {{#each}} iteration, {{lookup}} dynamic property access, Handlebars.SafeString for safe HTML injection, and escapeExpression for XSS prevention. Direct excerpts from docs.
• examples/payload.json — Sample data payload for Handlebars rendering: includes user profile, product array, dynamic links, and conditional flags. Matches the structure expected by base.mjml and components.mjml.
• examples/expected-output.html — Sanitized expected HTML output snippet for validation comparison. Demonstrates correct table structure, inline styles, and resolved Handlebars placeholders per MJML compilation standards.

Ship Consistent Emails Today

Stop wasting engineering time on HTML email hacks. Stop debugging broken layouts in Outlook. Stop manually inlining CSS.

Upgrade to Pro to install the Building Email Template Builder skill. This is the system you need to generate responsive, cross-client compatible emails with dynamic content. It is the pipeline that turns email templates from a liability into a reliable, automated part of your product.

The install command is provided below. Run it in your project directory to get the full manifest.

Once installed, review the references folder to understand the cross-client constraints. Run the tests/validate-email.sh script to verify your setup. Use the examples folder to understand the data structure. Then start building.

Your users expect professional, responsive emails. Your team deserves a tool that makes that easy. Get the skill. Ship the email.