email-render-builder

name	email-render-builder
slug	aaron-email-render-builder
displayName	Email Render Builder · 邮件HTML
summary	邮件HTML/响应式邮件/暗色模式渲染
description	Use when the user asks to "build the email HTML", "make this email responsive", "fix dark-mode rendering", or "QA the email across clients"; produces the coded HTML build — a responsive table layout, dark-mode + accessibility pass, a client-render matrix, image-block fallbacks, and a plain-text parity check. Not for writing the copy — use email-creative-builder; not for scoring the email or computing EQS — use email-quality-auditor. 邮件HTML/响应式邮件/暗色模式渲染
version	20.1.0
license	Apache-2.0
compatibility	Claude Code and compatible agent-skill hosts
homepage	https://github.com/aaron-he-zhu/aaron-marketing-skills
when_to_use	Use when coding or QA-ing the HTML build of an email that copy is already written for: converting approved creative into a responsive table-based layout, checking dark-mode color inversion, running an accessibility pass (alt text, semantic order, contrast, font-size), producing a client-render matrix (Gmail/Outlook/Apple Mail/mobile), specifying image-off fallbacks and bulletproof buttons, and verifying the plain-text alternate matches the HTML. Covers B2C promo, B2B, and newsletter builds. Not for authoring the words, and not for the EQS gate.
argument-hint	<email creative or HTML> [target clients] [mode: promo|cold|newsletter]
metadata	{"author":"aaron-he-zhu","version":"20.1.0","discipline":"email","phase":"engage","geo-relevance":"low","hermes":{"tags":["marketing","email","engage"],"category":"email"},"openclaw":{"emoji":"✉️","homepage":"https://github.com/aaron-he-zhu/aaron-marketing-skills"}}

Email Render Builder

Builds and QAs the coded HTML for a single email — a responsive table-based layout, a dark-mode + accessibility pass, a client-render matrix, image-block fallbacks with bulletproof CTAs, and a plain-text-parity check. This is the render half of SEND Engage: email-creative-builder writes the words, this skill turns them into a build that lands the same in Gmail, Outlook, Apple Mail, and on mobile. It does not write copy, and it does not score the email or run any veto — that is email-quality-auditor.

Scope guard: this skill produces the HTML build + render QA + plain-text parity only. It writes no subject-line or body copy (email-creative-builder owns that), scores no SEND dimension, runs no veto, and does not compute the profile-weighted EQS — email-quality-auditor owns all four vetoes (S1/S2/N1/D1) and the EQS rollup.

Quick Start

Build responsive HTML from this creative: [paste subject + body + CTA], destination [URL]

QA this email HTML across Gmail, Outlook, Apple Mail, and mobile: [paste HTML]. Flag dark-mode and image-off breakage.

This renders broken in Outlook and images-off — fix the layout and add fallbacks: [paste HTML]

Skill Contract

Expected output: one email HTML build plus a render-QA report — inline-styled table layout, dark-mode-safe colors, an accessibility checklist result, a client-render matrix (Gmail/Outlook desktop+web/Apple Mail/iOS+Android), image-off fallback notes with bulletproof CTA markup, and a plain-text-parity check against the creative — bound to the source creative version/hash and an exact html_hash / plain_text_hash, with the standard handoff summary for memory/email/email-render-builder/.

• Reads: the approved email creative (subject/preheader/body/CTA and its plain-text alternate) or raw HTML to QA; the destination URL; the mode (promo/cold/newsletter); target client list and any brand color/font/logo constraints; the message-match map from email-creative-builder when present.
• Writes: a user-facing HTML build (the rendered E/D unit) plus the render-QA report and a reusable handoff summary.
• Promotes: confirmed render blockers (a client that breaks the layout, an image-only block with no fallback, a dark-mode contrast failure) to and ; propose durable build decisions (approved template skeleton, brand-safe dark-mode palette) as pending-decision items — never write directly.