{"slug":"html-email-compat-review","name":"HTML Email Compatibility Review","version":"1.0.0","updated_at":"2026-10-19T07:14:52.978Z","use_when":"Reviews ONE HTML email (the source of a newsletter, a receipt or a notice) for the four mistakes that make it fall apart in common mail clients, and lists only those, one line each with a fixed code, the place, which client breaks it and the fix - or exactly No findings. It catches flex or grid used to lay out columns, layout rules that exist only in a style block in the head, images with no alt attribute, and a CSS background image with no colour fallback behind the text. It leaves out the safe look-alikes, such as a style block used only for media queries and an empty alt on a decorative spacer. Use before an email goes to a sending tool, to audit a template someone else built, or to find out why a message looks broken in Outlook for Windows or in a webmail that strips styles.","not_for":"Sender records, spam scores, links, the copy, dark mode, the length of the whole message and the sending service. No size is given for the point where Gmail cuts a message, because Google names none. It reads one pasted source and judges only the markup.","languages":["en"],"tags":["html-email","email-templates","outlook","email-clients","accessibility","code-review"],"category":"code","category_url":"https://aiskills402.com/categories/code","keywords":["HTML email","Outlook for Windows","media queries","decorative spacer"],"faq":[{"q":"Would a head style block that only holds media queries be reported?","a":"No. Media queries only improve a layout that is already complete inline, so a head style block used for them, or for a hover rule, is left alone. The skill reports layout rules that exist only in the head."},{"q":"Does an empty alt on a spacer image count as a defect?","a":"No. For a picture that carries no meaning the empty form is the correct one. The skill reports only an img element that has no alt attribute at all."},{"q":"Which emails were used in the trial?","a":"An autumn-sale email using flex and a background image with no colour behind white text, a shipping notice with all structure in the head and a logo without alt, and a clean receipt. Claude Sonnet and Claude Haiku ran once each; both were right by hand."},{"q":"What is returned for an email that is fine?","a":"The sentence No findings. and nothing more. A problem arrives as a line with a code, the place, the client that breaks it and the fix."}],"examples":[{"lang":"en","model":"claude-sonnet-5-5","input_excerpt":"<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Your order has shipped</title>\n<style>\n.wrap { width: 600px; margin: 0 auto; padding: 24px; background: #ffffff; }\n.title { font: bold 24px Arial, sans-serif; color: #222222; text-align: center; }\n.body-text { font: 16px/1.5 Arial, sans-serif; color: #444444; }…","output_excerpt":"HEAD-ONLY-LAYOUT — the `style` block in the head holds `.wrap` (width, margin, padding, background), `.title`, `.body-text` and `.btn`, and none of the elements carry inline equivalents — webmail clients that do not support head `style` blocks (Gmail's mobile webmail, some European webmail services) and Gmail apps on non-Google mailboxes show an unstyled email with no 600px frame, no button…"}],"page_url":"https://aiskills402.com/skills/html-email-compat-review","markdown_url":"https://aiskills402.com/skills/html-email-compat-review.md","image_url":"https://cdn.aiskills402.com/og/skills/html-email-compat-review/9390f0cb.png","related_url":"https://api.aiskills402.com/v1/skills/html-email-compat-review/related","purchases_count":null,"tested":{"date":"2026-10-19","strong":{"model":"claude-sonnet-5-5 (Claude Code alias \"sonnet\")","verdict":"Right on all 3 cases, read by hand. On the autumn-sale email it gave the flex wrapper and the background image with no colour behind the white heading, and left out the media-query style block. On the shipping notice it gave the head-only layout and the logo without alt, and left out the spacer with an empty alt. On the clean receipt it answered exactly No findings. My first version of one check wrongly rejected its mention of a media query inside a fix; the check was relaxed and the recorded answer re-evaluated without a new call."},"weak":{"model":"claude-haiku-5-5 (Claude Code alias \"haiku\")","verdict":"Right on all 3 cases, read by hand. It gave the same two lines for the autumn-sale email and the shipping notice, indented by four spaces, which the format check allows, and answered exactly No findings on the clean receipt, including its background image that has a dark colour set beside it."},"note":"Light test: three cases (two planted, one clean), one run per model; no comparison without the skill. The three inputs were written by us; each planted one carries a safe look-alike and neither has a comment pointing at the defect. Facts come from the public pages named in the notes, read on 19 October 2026; there are no owner-measured facts.","report_url":null},"price_usd":"0.01","price_micro":10000,"size_bytes":7560,"sha256":"97d7478d161deaeff396c64c484c6759190b380af04804ae108b6809fa5aca75","outline":["The answer","What the clients do (a public support table for email clients, data of 16 September 2026)","The codes","How to read the email","Rules","Work in this order","Short example"],"license":{"summary":"Perpetual, non-exclusive; use and modify for yourself incl. paid work; no resale or republishing","holder":"Georgi Kalchev, aiskills402.com","url":"https://aiskills402.com/docs#license"},"buy_url":"https://api.aiskills402.com/v1/skills/html-email-compat-review/file","redownload_url_template":"https://api.aiskills402.com/v1/purchases/{token}","mcp_tool":null,"payment":{"protocol":"x402","scheme":"exact","asset":"USDC","selling":true,"network":"base","network_caip2":"eip155:8453","pay_to":"0x8e37022edcf0f21cf3c9f93fee9d4d32519f36f4","facilitator":"cdp"},"seo_title":"Email Template Client Compatibility","seo_description":"Reviews one HTML email for flex or grid layout, head-only styles, images without alt and background images with no colour fallback. Pay $0.01 once, in USDC.","versions":[{"version":"1.0.0","date":"2026-10-19","changelog":"# Changelog\n\n## 1.0.0 — 2026-10-19\n\nFirst release, written in the light-test batch of 19 October 2026 (three cases, price $0.01). The idea is ours; no foreign skill was opened, facts come from public pages (see notes/ideas.md). Output: one line per finding with a fixed code, or exactly `No findings.`\n\nTest: three cases written by hand (an email built with flex and a background image with no fallback colour, a shipping notice with layout only in the head and a logo without alt, and a clean receipt), one run on Claude Sonnet and one on Claude Haiku, no run without the skill, no iteration on the skill text after the runs. `test/control.mjs` shows that the checks pass on the ideal answers and fail on realistic wrong ones. See `test-summary.json` for the verdicts read by hand.\n"}]}