mcpField
E
email-html-mjml

email-html-mjml

github.com/podo设计与 UI29223 次安装4 天前更新
代码仓库

关于 email-html-mjml

email-html-mjml 是一项使用 MJML 5.x 编写和排查 HTML 邮件的技能，面向需要生成响应式邮件的开发者。它提供 MJML 源文件和编译后的 HTML，并检查严格模式与 Gmail 剪裁限制。

主要功能

  1. 01使用 MJML 编写响应式邮件
  2. 02编译为表格布局 HTML
  3. 03严格模式验证
  4. 04检查 Gmail 剪裁限制
  5. 05遵循无障碍标记要求

适用场景

  1. 01制作新闻通讯或订单确认邮件
  2. 02将 MJML 编译为 HTML 邮件
  3. 03排查现有 HTML 邮件

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/podo/design-agent-skills --skill email-html-mjml

安装后在 Claude Code 中输入/email-html-mjml确认已加载。

附带文件stub.yaml

详细介绍

email-html-mjml

目录占位条目 — 完整技能：framix-team/skill-email-html-mjml

决策树

  1. 是否已安装完整技能？

    • 全局：f=~/.agents/skills/email-html-mjml/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • 项目：f=.agents/skills/email-html-mjml/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → 技能已安装为 email-html-mjml，调用它并继续
    • pointer → 转到第 2 步

  2. 检测作用范围，然后安装：

    [ -e ~/.agents/skills/email-html-mjml ] && echo "global" || echo "project"

    全局：

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

    项目：

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

    Claude Code： 发送以 ! 开头的命令作为聊天消息，即可在不离开对话的情况下运行它。

注意事项

  • 要求： Node.js 20 或更高版本；MJML 必须按项目安装（npm install -D mjml），不得全局安装
  • 许可证： MIT

安装后调用

  • 技能名称：email-html-mjml
  • 触发短语：“MJML”、“HTML 邮件”、“邮件模板”、“适用于 Outlook 的邮件”

功能

使用 MJML 5.x 作为编写层，生成可用于生产环境的 HTML 邮件。MJML 的响应式组件会编译为基于表格的 HTML，兼容 Outlook 2013 至 365、Gmail 网页版和移动版、Apple Mail 及其他主流客户端。此技能提供组件参考、示例模板（简报、订单确认、促销、基础布局）和编译说明；始终同时交付 .mjml 源文件和编译后的 .html，并使用 MJML 严格模式进行验证，检查内容是否超过 Gmail 的 102 KB 截断限制。输出遵循无障碍规则（替代文本、标题、对比度）。当用户要求创建、编译或排查任何 HTML 邮件时，此技能会自动启用。

它使用 npx mjml 进行编译，因此需要 Node.js 20 或更高版本，并且必须按项目安装 MJML（npm install -D mjml）。

不适用场景

  • 营销网页 HTML — 请改用 design-html
  • 动画网页内容或交互式落地页
  • 跨客户端测试邮件渲染效果（请使用 Litmus 等专用邮件测试服务）

评论

支持 Markdown