Responsive HTML Email Coder
Generate production-ready, responsive HTML emails from brand tokens with Outlook VML and Gmail inlining.
- Generate Outlook-safe VML buttons and hero backgrounds automatically.
- Sync email styles with brand design tokens without manual HEX copying.
- Build accessible, mobile-first newsletter layouts with responsive grids.
$5
· or 25 creditsSecure checkout via Stripe
Included in download
- Generate Outlook-safe VML buttons and hero backgrounds automatically.
- Sync email styles with brand design tokens without manual HEX copying.
- file_write, file_read automation included
- Ready for Mac)
See it in action
You say
Read ./tokens/tokens.css and generate a responsive transactional password reset email. Include a logo, a primary CTA button, and a footer with an unsubscribe link.
Your agent does
I've generated the password reset template. I resolved --color-primary to #3B82F6 and --font-sans to Arial. The output includes a VML-backed 'Reset Password' button for Outlook and inlined styles for Gmail. File saved to ./emails/transactional-password-reset.html.
Responsive HTML Email Coder
Generate production-ready, responsive HTML emails from brand tokens with Outlook VML and Gmail inlining.
$5
· or 25 creditsSecure checkout via Stripe
Included in download
- Generate Outlook-safe VML buttons and hero backgrounds automatically.
- Sync email styles with brand design tokens without manual HEX copying.
- file_write, file_read automation included
- Ready for Mac)
- Instant install
See it in action
You say
Read ./tokens/tokens.css and generate a responsive transactional password reset email. Include a logo, a primary CTA button, and a footer with an unsubscribe link.
Your agent does
I've generated the password reset template. I resolved --color-primary to #3B82F6 and --font-sans to Arial. The output includes a VML-backed 'Reset Password' button for Outlook and inlined styles for Gmail. File saved to ./emails/transactional-password-reset.html.
About This Skill
The problem
Hand-coding HTML emails is a nightmare of 1990s table layouts, Outlook-specific VML bugs, and inconsistent Gmail CSS support. Maintaining brand consistency while ensuring layouts don't break across dozens of devices and dark mode settings takes hours of manual testing.
What it does
- Generates four distinct template types: Transactional, Marketing, Newsletter, and Confirmation.
- Injects Outlook-safe VML code for bulletproof buttons and background images.
- Automatically inlines CSS styles to ensure compatibility with the Gmail web interface.
- Resolves CSS design tokens into hardcoded HEX values to bypass lack of
var()support in email clients. - Implements dark mode overrides using
prefers-color-schemeand Gmail-specific attribute selectors.
Frameworks & tools
Produces standalone HTML compatible with SendGrid, Mailchimp, AWS SES, Postmark, Resend, and any platform supporting custom HTML uploads.
Why this beats prompting it yourself
Generic LLM prompts often produce code that breaks in Outlook or uses modern CSS variables that email clients ignore. This skill follows a rigorous component library that handles MSO conditional comments, accessibility roles, and Gmail clipping limits out of the box.
Use cases
- Convert brand CSS design tokens into a consistent transactional email system.
- Refactor an existing welcome email to support dark mode and mobile responsiveness.
- Bootstrap a newsletter template with article cards and social links that stack on mobile.
- Create an automated order confirmation table that renders correctly in legacy desktop clients.
Known limitations
Outlook for Windows does not support border-radius on containers; these will render with square corners. Gmail may clip emails exceeding 102KB.
Use Cases
- Generate Outlook-safe VML buttons and hero backgrounds automatically.
- Sync email styles with brand design tokens without manual HEX copying.
- Build accessible, mobile-first newsletter layouts with responsive grids.
- Standardize transactional templates across disparate sending platforms.
Known Limitations
CSS custom properties unsupported in email clients (tokens must resolve to literal hex/rgb before output); Outlook Desktop ignores border-radius on containers (VML solves this for CTAs); Gmail clips emails past ~102KB; animated GIFs show only first frame in Outlook; dark mode is best-effort across fragmented client support; currently no AMP email
How to Install
mkdir -p ~/.claude/skills && curl -sL https://www.agensi.io/api/install/responsive-html-email-coder -o /tmp/responsive-html-email-coder.zip && unzip -o /tmp/responsive-html-email-coder.zip -d ~/.claude/skills && rm /tmp/responsive-html-email-coder.zipFree skills install directly. Paid skills require purchase - use the download button above after buying.
Reviews
No reviews yet - be the first to share your experience.
Only users who have downloaded or purchased this skill can leave a review.
Early access skill
Be the first to review this skill.
Only users who have downloaded or purchased this skill can leave a review.
Security Scanned
Passed automated security review
Permissions
Allowed Hosts
File Scopes
Tested rendering strategies for: Outlook (Windows/Mac), Gmail (Web/App), Apple Mail, Yahoo Mail, AOL, Hey, ProtonMail. Generated templates are standalone HTML files with no framework dependencies. Compatible with all major email sending platforms. Pairs with the Design Token System Generator for consistent brand identity across web and email.
Frequently Asked Questions
Learn More About AI Agent Skills
More Premium Skills
World-Class Site & App Design
Every AI-built UI looks generic and templated. This skill teaches your agent to actually match the design to the project, the industry, and the audience.
cinematic-sites
Turn any basic business URL into a high-end cinematic landing page with AI-generated 4K assets and GSAP animations.
keyword-research
Transform URLs or product lists into SEO keyword research packs with Google Ads data and intent-based clustering.
local-seo-audit
Automated local SEO auditing and keyword generation for agencies and small businesses.