← Back to Skills

Responsive Email Designer

Design and build responsive HTML email templates that render consistently across all major email clients, with dark mode support, accessibility compliance, and modern tooling like MJML or Maizzle.

Gold
v1.0.00 activationsCopywritingContent Creationadvanced

SupaScore

83.25
Research Quality (15%)
8.5
Prompt Engineering (25%)
8.5
Practical Utility (15%)
8.5
Completeness (10%)
8.5
User Satisfaction (20%)
8
Decision Usefulness (15%)
8

Best for

  • Creating responsive newsletter templates for SaaS product updates across Outlook, Gmail, and Apple Mail
  • Building transactional email templates with dark mode support for user onboarding sequences
  • Developing HTML email templates for e-commerce campaigns with consistent rendering in mobile clients
  • Converting existing email designs to MJML or Maizzle for improved maintainability
  • Implementing accessibility-compliant email templates meeting WCAG 2.1 AA standards

What you'll get

  • Complete MJML codebase with component structure, inline CSS, and Outlook conditional comments for cross-client compatibility
  • Production-ready HTML email template with embedded media queries, accessibility attributes, and dark mode CSS variables
  • Maizzle project structure with Tailwind utility classes, automated CSS inlining, and client-specific rendering optimizations
Not designed for ↓
  • ×Email marketing strategy or campaign planning
  • ×Email deliverability optimization or sender reputation management
  • ×Email list building or subscriber acquisition tactics
  • ×A/B testing email content or subject lines
Expects

Email purpose, target client distribution, brand guidelines, content structure requirements, and accessibility/dark mode specifications.

Returns

Production-ready HTML email templates with inline CSS, media queries, accessibility markup, and client-specific compatibility code.

Evidence Policy

Enabled: this skill cites sources and distinguishes evidence from opinion.

html-emailresponsive-emailemail-templatemjmlmaizzledark-modeemail-accessibilityoutlook-compatibilityemail-designcss-inlineemail-testingdeliverability

Research Foundation: 7 sources (3 official docs, 2 industry frameworks, 1 academic, 1 books)

This skill was developed through independent research and synthesis. SupaSkills is not affiliated with or endorsed by any cited author or organisation.

Version History

v1.0.02/16/2026

Initial release

Prerequisites

Use these skills first for best results.

Works well with

Need more depth?

Specialist skills that go deeper in areas this skill touches.

Common Workflows

Email Campaign Development

Complete email campaign creation from copywriting through template development to automation setup

Email Copy Specialistresponsive-email-designerEmail Marketing Architect

Activate this skill in Claude Code

Sign up for free to access the full system prompt via REST API or MCP.

Start Free to Activate This Skill

© 2026 Kill The Dragon GmbH. This skill and its system prompt are protected by copyright. Unauthorised redistribution is prohibited. Terms of Service · Legal Notice