skills.rest
aaron-he-zhu
aaron-he-zhuCOMMUNITY
Explore all skills by this author →
𝕏@zhuheGitHub

email-render-builder

Construct and validate responsive, accessible HTML email builds with dark-mode compatibility.

2.5k|345|Updated Dec 18, 2025
Search Tags:#accessibility#HTML#QA#build#email
One-click install
npx skills add https://github.com/aaron-he-zhu/aaron-marketing-skills --skill email-render-builder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: email-render-builder
Source: https://github.com/aaron-he-zhu/aaron-marketing-skills/tree/main/email/engage/email-render-builder
Command: npx skills add https://github.com/aaron-he-zhu/aaron-marketing-skills --skill email-render-builder

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the need for building and QA-ing HTML for emails that are responsive, compatible with dark mode, and accessible, ensuring a seamless experience across various platforms and devices.

Core Features & Use Cases

  • Responsive HTML Building: Converts approved creative into a responsive table-based layout.
  • Dark-Mode Compatibility: Checks for color contrast in light and dark modes.
  • Accessibility: Ensures semantic reading order and meaningful alt text.
  • Client-Render Matrix: Provides a matrix for each target client to verify rendering.
  • Fallbacks and Parity: Specifies image-off fallbacks and verifies plain-text parity with HTML.
  • Use Case: When you need to build the HTML for an email campaign, this skill can generate a responsive and accessible HTML build that works across different email clients.

Quick Start

Use the email-render-builder skill to build HTML for the email: 'email-creative.md', target clients: 'Gmail, Outlook', mode: 'promo'.

Frequently Asked Questions about email-render-builder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build responsive HTML emails that support dark mode?▼

Build responsive HTML emails for dark mode by converting approved creative into a table-based layout and checking color contrast for light and dark mode compatibility across target clients.

What is the best way to ensure email HTML accessibility across different email clients?▼

Ensure email HTML accessibility by verifying semantic reading order, adding meaningful alt text, and using a client-render matrix to validate rendering behavior across target clients like Gmail and Outlook.

How do I add image-off fallbacks when building HTML for email campaigns?▼

Add image-off fallbacks during the HTML email build process to specify text alternatives, ensuring plain-text parity with the HTML content when images fail to load.

Does this HTML email builder require specific inputs for QA and compatibility checks?▼

Yes, the HTML email builder requires user input for the email creative file, target clients, and mode, such as 'promo', to construct and validate the responsive layout accurately.

Why does my email HTML break rendering in Outlook and Gmail?▼

Email HTML breaks rendering in clients like Outlook and Gmail due to inconsistent CSS support; using a table-based layout and a client-render matrix verifies compatibility and fixes rendering issues.

Related Skills

Explore More Marketing & Sales Skills→
cklxxcklxx
11

email-drafting

Generate complete email drafts and replies in English or Chinese.

Community
Basic
omerakbenomerakben
1

react-email

Build and render cross-client HTML emails from React components.

Community
Intermediate
etewiahetewiah
635

theme-evaluation

Evaluate theme palettes for WCAG contrast and accessibility compliance.

Community
Advanced
seb1nseb1n
147

Frontend Design

Generate responsive HTML, CSS, and React, Vue, or Svelte components with WCAG accessibility and dark mode.

Community
Advanced