HTML Email Playbook
Osama Hassouna · Docs
Source for docs.osamahassouna.com — an engineering reference hub I keep open while building. Currently one guide is live, with more landing as I write them.
Live now
HTML Email Playbook
A working reference for hand-building HTML email templates that render reliably across Outlook (Windows desktop, 2007 through 365), Gmail web + mobile, Apple Mail, Yahoo Mail, and the long tail of clients that haven't moved past 2007.
Covers:
Structure — doctype, head boilerplate, body container, header / body / footer organization
Components — bulletproof CTA buttons (with Outlook VML fallback), spacing patterns, images, inline icons, background images, text
Compatibility — Outlook MSO conditional comments, RTL languages, hybrid responsive layouts
Production — Gmail 102KB clipping, dark mode, preheader text
AI Generation — rules and patterns for AI tools that generate playbook-compliant email HTML
Read it: docs.osamahassouna.com/email-playbook/
There's also a Playground at /email-playbook/playground/ with a live editor, instant preview, and a "From Image" tab that converts a design screenshot into playbook-compliant HTML.
Related MCP server: Email MCP Server
Use the playbook in your AI workflow
The playbook is published as an MCP server + terminal CLI so AI clients (Claude Desktop, Cursor, Cline, etc.) can pull rules and component patterns directly into their reasoning. The model calls structured tools to fetch the exact patterns from the playbook instead of guessing from training data.
npm install -g email-playbook-mcpSetup, tool reference, and Claude Desktop / Cursor config snippets:
docs.osamahassouna.com/email-playbook/mcp/
There's also a hosted JSON-RPC endpoint at docs.osamahassouna.com/api/mcp if you'd rather not install anything.
License
MIT. Playbook content © Osama Hassouna · osamahassouna.com
Available Tools
4 toolsget_componentAInspect
Return the full record for a single component: title, description, narrative body, the primary HTML pattern, list of slots (placeholders the model should fill), VML/responsive flags, and all code examples. Use after list_components to fetch the actual HTML pattern to paste into an email.
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | Component name. Get the list from list_components first. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description must convey behavioral traits. It gives detailed transparency into the return payload, but it does not explicitly state that this is a read-only operation or mention any potential side effects, permissions, or limitations. The 'get' verb implies non-mutating behavior, but the description leaves the safety profile implicit.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two sentences long and front-loaded: the first sentence lists all return fields in a structured way, and the second places the tool in a workflow. There is no redundant or filler content.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple single-parameter get operation with no output schema, the description fully enumerates the expected return fields and provides a clear usage scenario. It gives an agent enough information to know exactly what will be returned and when to call the tool, making it complete for its complexity.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema already provides 100% coverage for the single parameter 'name' with an enum and explicit guidance to 'Get the list from list_components first.' The description repeats this workflow cue but adds no new semantic detail about the parameter. With full schema coverage, a baseline of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's function with a specific verb ('Return') and resource ('full record for a single component'), and enumerates the contents (title, description, narrative body, HTML pattern, slots, VML/responsive flags, code examples). It distinguishes from sibling tools by focusing on single-component lookup and explicitly referencing list_components.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides clear usage context: 'Use after list_components' to fetch the actual HTML pattern for an email, which indicates the immediate preceding step. However, it does not explicitly state when not to use this tool or name alternatives, so it stops short of full criterion for a 5.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_playbook_rulesAInspect
Return the full rule pages for a given category. Each rule includes the title, description, markdown body explaining the rule, and any HTML/CSS code examples from the playbook. Use this to teach a model the exact patterns for a specific concern (e.g., responsive layout).
| Name | Required | Description | Default |
|---|---|---|---|
| category | Yes | Which rule category to fetch. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the burden of behavioral disclosure. It explains the return content but does not explicitly state that it is read-only, idempotent, or mention potential errors or permissions. The description adds useful context about the rule structure but lacks a full behavioral profile.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two sentences, front-loaded with the purpose and followed by a concrete use case. Every sentence adds value, and there is no redundancy or fluff.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple one-parameter tool with no output schema or annotations, the description adequately communicates what is returned and when to use it. It could go further by listing the enum values or clarifying error behavior, but the schema covers the category choices.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema already provides full coverage for the 'category' parameter with an enum and description. The description adds an example ('responsive layout') but does not materially enhance the schema's parameter semantics. Baseline 3 is appropriate given schema coverage is 100%.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool 'Return the full rule pages for a given category' and specifies the content of each rule. It distinguishes itself from siblings like get_component by focusing on rule pages with markdown and code examples for teaching.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides a clear use case: 'Use this to teach a model the exact patterns for a specific concern'. It does not explicitly exclude alternatives or name sibling tools, but the intended context is evident.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_categoriesAInspect
List all rule categories in the Email Playbook with a one-line description and page count. Categories are: structure (head/body container/header/body/footer), compatibility (Outlook MSO, RTL, responsive), production (Gmail clipping, dark mode, preheader, bulletproof buttons), ai-generation (constraints for AI emitters). For reusable components, use list_components instead — they live in a separate dimension and are not returned by get_playbook_rules.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden. It discloses the output shape ('one-line description and page count') and enumerates the category contents, which is useful behavioral context. However, it does not explicitly state that the operation is read-only or mention any potential edge cases, though 'List' clearly implies a safe read. The lack of explicit safety disclosure is a minor gap.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two sentences, front-loaded with the main action, and every sentence adds value. It avoids fluff and efficiently covers purpose, content, and sibling differentiation.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple tool with no parameters, no annotations, and no output schema, the description is remarkably complete. It explains what is returned, enumerates the categories, and clarifies the boundary with sibling tools. There is no ambiguity about when to invoke it.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema is empty (no parameters), so parameter semantics are trivially satisfied. The description adds no parameter details, but none are needed. Baseline for 0 params is 4, and the description does not need to compensate for any schema gaps.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's action: 'List all rule categories in the Email Playbook with a one-line description and page count.' It also enumerates the specific categories (structure, compatibility, production, ai-generation), giving concrete scope. It distinguishes from sibling tools by directly naming list_components as handling a separate dimension.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Explicit guidance is provided: 'For reusable components, use list_components instead — they live in a separate dimension and are not returned by get_playbook_rules.' This tells the agent when to use an alternative and clarifies the relationship with get_playbook_rules, which does not return categories.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_componentsAInspect
List all reusable email components in the playbook with their metadata: name, subcategory (layout/media/interactive/text), description, whether they require Outlook VML, and whether they are responsive. Use this first to discover what components exist before calling get_component.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of disclosing behavior. It explains the tool lists all components and returns specific metadata fields, making the safety profile clear as a read-only discovery operation. It does not mention pagination or edge cases, but for a simple listing tool, the description provides adequate transparency.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two sentences with no redundant information. The first sentence front-loads the core purpose and return fields; the second provides usage guidance. Every word earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool has no parameters, no output schema, and no annotations, the description is remarkably complete. It specifies exactly what the output contains (the metadata fields), the scope ('all'), and its role in the workflow. There is no missing information that would prevent an agent from using it correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema is an empty object with zero parameters, so the baseline is 4. The description adds no parameter-specific semantics (there are none), but it enriches understanding by explaining what the tool returns and its purpose, which is valuable context.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's function: 'List all reusable email components in the playbook with their metadata.' It specifies the resource (email components), the action (list), and the scope (all), which distinguishes it from sibling tools like get_component that retrieves a single component. The metadata fields are enumerated, leaving no ambiguity.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides an explicit usage directive: 'Use this first to discover what components exist before calling get_component.' This clearly indicates when to use this tool versus the primary sibling, get_component. It does not mention other siblings like list_categories, but the guidance for the main alternative is sufficient.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
4 tool updates
v0.6.2- First observed
get_component - First observed
get_playbook_rules - First observed
list_categories - First observed
list_components
TDQS
Scored across 4 tools
Each tool serves a distinct, well-defined purpose: listing categories, listing components, fetching component details, and fetching rule pages. No two tools overlap in functionality.
All tools follow a consistent verb_noun pattern using snake_case: 'list' for enumeration and 'get' for retrieval. The naming is predictable and easily distinguishable.
With only 4 tools, the server is tightly scoped to browsing and retrieving email playbook content. This count is ideal for the domain—neither too few nor excessive.
The tools cover listing and retrieval of both components and rule categories. A minor gap is the lack of a tool to list all individual rules without specifying a category, but the existing tools enable complete navigation of the playbook.
Maintenance
Related MCP Connectors
Audit and build email signatures that survive Gmail, Outlook desktop and Apple Mail.
Analyze, audit, fix and diff HTML, MJML, Maizzle and React Email across 21 email clients.
Build responsive HTML email campaigns from any brand website: design, QA, export.
Visual email & layout builder that turns AI assistants into a Temway authoring studio.
Related MCP Servers
- FlicenseAqualityDmaintenanceEnables creation and management of professional email templates using MJML markup language. Provides compilation to responsive HTML, template generation, validation, and component documentation for building email campaigns.42-
- AlicenseNot gradedqualityDmaintenanceEnables AI to send, read, search, delete and reply to emails through SMTP or Gmail API, supporting common email services like QQ, 163, Gmail and Outlook with HTML/text formats and attachments.201ISC
- FlicenseNot gradedqualityDmaintenanceProvides SMTP integration for sending HTML emails and specialized prompts for intent detection and client information extraction. It enables LLMs to automate personalized email workflows and structure user communication data.-

Temway MCP Serverofficial
AlicenseNot gradedqualityCmaintenanceLet your AI assistant design beautiful emails & layouts — in your Temway workspace. It turns Claude, ChatGPT, Cursor and friends into a visual email & layout authoring studio.1MIT