skills.rest
andersoncollab
andersoncollabCOMMUNITY
Explore all skills by this author →
GitHub

email-design

Generate production-ready HTML email templates with Outlook-safe tables and inline CSS.

Updated Aug 23, 2026
Search Tags:#dark mode#template design#unsubscribe compliance#email HTML#Outlook rendering#bulletproof CTA#responsive email
One-click install
npx skills add https://github.com/andersoncollab/design-agent --skill email-design-andersoncollab
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: email-design
Source: https://github.com/andersoncollab/design-agent/tree/main/skills/email-design
Command: npx skills add https://github.com/andersoncollab/design-agent --skill email-design-andersoncollab

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill prevents broken email layouts and inconsistent rendering by teaching inbox-specific HTML constraints, including Outlook’s Word-based renderer, inline-CSS requirements, responsive table patterns, dark-mode handling, and image-blocking fallbacks.

Core Features & Use Cases

  • Outlook-safe HTML templates: Produces table-based email structures using MSO conditionals and Outlook-compatible styling approaches.
  • Bulletproof components: Provides reliable header, hero, content (two-column to stacked), CTA button, and footer patterns designed for client stripping of stylesheets.
  • Rendering and compliance strategy: Covers dark mode overrides, alt text and non-image critical content, and CAN-SPAM/GDPR-required unsubscribe and preference links.
  • Template blueprints: Supports welcome emails, newsletters, transactional receipts, and abandoned cart flows with practical layout blocks.

Quick Start

Use the email-design skill to generate a complete 600px max-width welcome email HTML that includes an Outlook-safe bulletproof CTA button, a responsive two-column benefits section that stacks on mobile, and a footer with an unsubscribe link placeholder.

Frequently Asked Questions about email-design

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

FAQPage Schema
How do I build HTML email templates that render correctly in Outlook and Gmail?▼

To build HTML email templates that render correctly across Outlook and Gmail, use table-based layouts with inline CSS and MSO conditionals. This ensures structural compatibility when email clients strip external stylesheets or apply Word-based rendering constraints.

What is the best way to make a responsive email layout stack on mobile?▼

The best way to make a responsive email layout stack on mobile is using a 600px max-width table structure with media query fallbacks. This pattern allows multi-column sections to collapse into single columns for smaller screens.

Why does my email CTA button break in Outlook and how can I fix it?▼

Your email CTA button breaks in Outlook because its Word-based renderer strips unsupported CSS properties. Fix this by using a bulletproof CTA button built with VML and table cells, ensuring the design displays reliably without relying on modern CSS.

How do I design emails for dark mode compatibility?▼

Design emails for dark mode compatibility by applying specific dark mode overrides and color strategies. Ensure your template includes alt-text and non-image critical content so text remains readable when dark mode inverts background colors.

Do I need an unsubscribe link in my transactional email HTML?▼

You need an unsubscribe link in transactional and campaign email HTML to satisfy CAN-SPAM and GDPR compliance. Include a legally compliant footer with unsubscribe and preference center link placeholders in every template.

How to handle email image blocking and missing alt text?▼

Handle email image blocking by ensuring all critical content is non-image text and including descriptive alt text for images. This resilience strategy guarantees your message remains understandable when recipients have images disabled.

Related Skills

Explore More Content & Communication Skills→
Pixel-Process-UGPixel-Process-UG
1

content-creator

Generate marketing copy and social media content from brand attributes and audience personas.

Official
Intermediate
lmiguelvargasflmiguelvargasf

react-email

Create and send HTML emails from React components.

Community
Intermediate
autosendhqautosendhq
16

content

Craft email content with inline CSS, alt text, and CAN-SPAM compliant footers.

Official
Intermediate
NicholasSutinNicholasSutin

react-email

Create responsive HTML email templates with React components and Tailwind CSS.

Community
Intermediate