How does this skill prevent emails from breaking in different mail clients like Outlook or Gmail?

This skill automates the generation of MJML and React Email code, ensuring your designs are responsive and stay under the 102kb Gmail clipping limit while maintaining compatibility across legacy clients like Outlook.

What specific file formats or code outputs will I receive?

The skill produces production-ready MJML, React Email, or JSX Email source code, along with minified HTML that you can copy directly into any Email Service Provider (ESP) like SendGrid, Mailchimp, or Braze.

Why should I use this skill instead of just asking a standard AI to write email HTML?

Unlike generic prompts, this skill enforces a strict MJML hierarchy and includes automated deliverability gates for SPF/DKIM compliance and Gmail Promotions annotations that standard AI models often overlook.

Can I customize the generated templates to match my existing brand design system?

Yes, you can input your specific brand design tokens—such as hex codes, typography, and spacing scales—to ensure every generated template aligns with your visual identity.

Does this skill handle the actual sending of the emails to my subscribers?

This skill focuses on code generation and compliance auditing; you will still need an external ESP to send the emails and a verified domain to ensure high inbox placement.

email marketing html mjml

Example session with this skill installed

Generate an MJML template for a 'Welcome' sequence. Include a hero section, a 2-column feature layout, and a primary CTA. Use a blue #0052FF primary button and brand-safe sans-serif fonts.

Read your context and instructions
Compiled the email marketing html

The welcome campaign MJML source and compiled HTML have been generated. The structure follows a single-column mobile-first reading path with a 2-column desktop layout for feature highlights.

Welcome Sequence Template

<mjml>
  <mj-head>
    <mj-title>Welcome to the Platform</mj-title>
    <mj-preview>We're glad you're here. Let's get started.</mj-preview>
    <mj-attributes>
      <mj-all font-family="Helvetica, Arial, sans-serif" color="#1A1A1A" />
      <mj-button background-color="#0052FF" color="#FFFFFF" border-radius="4px" font-weight="bold" />
      <mj-text font-size="16px" line-height="24px" />
    </mj-attributes>
  </mj-head>
  <mj-body background-color="#F4F4F4">
    <mj-section background-color="#FFFFFF" padding-bottom="0">
      <mj-column width="100%">
        <mj-image src="https://assets.example.com/logo.png" width="120px" alt="Logo" />
      </mj-column>
    </mj-section>
    <mj-section background-color="#FFFFFF">
      <mj-column width="100%">
        <mj-text font-size="24px" font-weight="bold">Welcome, {{first_name|default('there')}}!</mj-text>
        <mj-text>We are excited to help you build better systems. Explore your new dashboard below.</mj-text>
        <mj-button href="{{dashboard_url}}">Get Started Now</mj-button>
      </mj-column>
    </mj-section>
    <mj-section background-color="#FFFFFF">
      <mj-column>
        <mj-text font-weight="bold">Feature One</mj-text>
        <mj-text font-size="14px">Automate your entire workflow with our new API integration.</mj-text>
      </mj-column>
      <mj-column>
        <mj-text font-weight="bold">Feature Two</mj-text>
        <mj-text font-size="14px">Real-time analytics visible directly in your browser.</mj-text>
      </mj-column>
    </mj-section>
    <mj-section>
      <mj-column width="100%">
        <mj-text font-size="12px" color="#888888" align="center">
          © 2024 Brand Inc. | 123 Main St, Anytown | <a href="{{unsubscribe_url}}">Unsubscribe</a>
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Next steps

Replace {{dashboard_url}} and logo source with live production assets.
Run the compiled HTML through an inbox preview tool to verify Outlook VML rendering.
Validate that your ESP supports the {{first_name|default('there')}} syntax for fallbacks.

Connects securely to your tools. The creator never sees your data.

About this skill

Developing emails that look consistent across Gmail, Outlook, and mobile is a fragmented, manual process. This skill automates the creation of high-quality email systems using MJML and React-based frameworks to ensure deliverability and visual fidelity. It eliminates the trial-and-error of table-based layouts by utilizing a structured, component-driven approach.

What it does

Source generation creates raw MJML, React Email, or JSX Email source code tailored to specific brand design tokens.
Message classification categorizes content into transactional, lifecycle, or marketing streams to ensure proper consent and deliverability settings.
Personalization mapping defines placeholder dictionaries with strict fallback rules for first names, URLs, and custom attributes.
Compliance auditing checks for SPF/DKIM/DMARC alignment, one-click unsubscribe headers, and physical address requirements.
Client optimization implements Gmail Promotions annotations, dark mode support, and VML-capable backgrounds for Outlook.

How it works

Define the message class and gather brand assets, site files, and campaign objectives.
Draft the copy and brief including subject line hypotheses, preheaders, and primary calls to action.
Configure the design system by setting typography, spacing, and mobile-responsive column behaviors.
Compile and validate the source code into minified, production-ready HTML that stays under the Gmail clipping limit.

Frameworks & tools

Built for MJML, React Email, and JSX Email. It optionally integrates with Emailcn for registry-based components. Supports Python-based rendering for local previews and export.

Why this beats prompting it yourself

Generic prompts often produce bloated HTML that triggers spam filters or breaks in Outlook. This skill enforces a strict MJML hierarchy and mandatory deliverability gates, ensuring your code is accessible, minified, and compliant with modern inbox standards.

Use cases

Generating responsive monthly newsletters with dynamic blog content.
Building secure transactional templates for password resets and order confirmations.
Creating re-engagement lifecycle sequences with personalized discount codes.
Troubleshooting CSS rendering issues in specific mobile mail clients.

Known limitations

Does not support JavaScript within emails. Requires an external ESP for actual delivery. Cannot bypass inbox placement restrictions caused by poor sender reputation or unauthenticated domains.

How to use

Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.

Reviews

No reviews yet

Be one of the first to try it. Every listed skill passes our trust checks below.

Security scanned

Passed our 8-point scan before listing

Fresh listing

Recently published to Agensi

Free forever

No account required to browse

email marketing html mjml