--- name: email-template-design description: Design and build professional HTML email templates with inline CSS for broad email client compatibility. Use this skill when the user asks to create, design, or build email templates, newsletters, transactional emails (order confirmations, receipts, shipping notifications, password resets), marketing emails, welcome series, onboarding emails, abandoned cart emails, drip campaigns, or any HTML email layout. Covers responsive design, dark mode support, and compatibility with Gmail, Outlook (desktop + web), Apple Mail, Yahoo, and mobile clients. --- # Email Template Design Design production-ready HTML email templates using table-based layouts and inline CSS for maximum email client compatibility. ## Workflow 1. **Clarify purpose** - Determine the email type (marketing, transactional, lifecycle) and brand context 2. **Select base template** - Start from an asset template in `assets/` or build from scratch using the patterns below 3. **Build structure** - Use table-based layout with the boilerplate from `assets/base.html` 4. **Style inline** - Apply all CSS as inline styles; use `

``` ## Essential Patterns ### CTA Buttons (Outlook-safe) ```html

Button Text

``` ### Two-Column Layout (responsive) ```html

``` ### Hero Image ```html ${{hero_alt}}$ ``` ## Design Rules 1. **600px max width** for the content container 2. **All critical styles inline** — `