# Email Newsletter Builder
> Generate professional HTML email newsletters compatible with Gmail and Outlook. Creates table-based layouts with inline CSS for reliable rendering. Use it when asked to "build a newsletter," "create an email template," or draft a marketing, internal, or digest email.
- Skill: `serejaris/email-newsletter-builder` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add serejaris/email-newsletter-builder`
- Raw SKILL.md: https://api.skillmd.com/api/skills/serejaris/email-newsletter-builder/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- License: MIT
- Author: serejaris (https://skillmd.com/u/serejaris)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/serejaris/email-newsletter-builder
---
# Email Newsletter Builder
Generate professional HTML email newsletters fully compatible with Gmail, Outlook, Apple Mail, and other major email clients. Uses table-based layout with inline CSS to ensure consistent rendering across all clients.
## Use Cases
- Company internal weekly/monthly reports
- Product update announcements
- Marketing and promotional emails
- Event invitations
- Content digests and article roundups
## Layout Types (Semantic Tags)
The `layout` field is a semantic tag indicating the intended purpose of the email, helping you choose the right combination of sections. The actual email structure is determined by the module types in the `sections` array.
| Layout Tag | Recommended Sections | Best For |
|----------|---------------------|----------|
| `single-column` | `hero_banner` + `text` + `cta` | General newsletters, announcements |
| `two-column` | `two_column` + `image_text` | Product comparisons, side-by-side image/text |
| `hero` | `hero_banner` + `text` + `cta` | Marketing emails, event invitations |
| `digest` | Multiple `article_card` | Content digests, article roundups |
## Supported Content Modules
| Module Type | Description |
|----------|------|
| `hero_banner` | Full-width banner image with optional overlay title text |
| `text` | Plain text paragraph with optional heading |
| `image_text` | Image and text side by side |
| `cta` | Call-to-action button |
| `divider` | Horizontal separator line |
| `quote` | Blockquote |
| `article_card` | Article card (image + title + excerpt + link) |
| `two_column` | Two-column content area |
## Workflow
### Step 1: Gather User Requirements
Collect the following information from the user:
1. **Email purpose**: Weekly report? Announcement? Marketing? (Determines layout recommendation)
2. **Content structure**: What modules are needed? (Headings, body text, images, buttons, etc.)
3. **Brand style**: Primary color, logo, company name
4. **Specific content**: Text, image URLs, and button links for each module
### Step 2: Generate Configuration File
Based on user requirements, create a JSON configuration file. The format is as follows:
```json
{
"layout": "single-column",
"theme": {
"primary_color": "#2563EB",
"secondary_color": "#1E40AF",
"accent_color": "#F59E0B",
"bg_color": "#F3F4F6",
"content_bg_color": "#FFFFFF",
"text_color": "#1F2937",
"muted_text_color": "#6B7280",
"font_family": "Arial, Helvetica, sans-serif",
"max_width": 600
},
"header": {
"logo_url": "",
"logo_alt": "Company",
"title": "Newsletter Title",
"subtitle": ""
},
"preheader": "Preview text shown in the inbox list",
"sections": [
{
"type": "text",
"title": "Section Title",
"body": "Section content in HTML or plain text."
}
],
"footer": {
"company": "Company Name",
"address": "Company Address",
"unsubscribe_url": "#",
"extra_links": [
{"text": "Website", "url": "#"}
]
}
}
```
### Step 3: Generate HTML
Write the configuration to a temporary JSON file, then run the generation script:
```bash
python scripts/generate_newsletter.py --input config.json --output newsletter.html
```
### Step 4: Review and Deliver
1. Provide the generated HTML file path to the user
2. Explain how to preview it in a browser
3. Remind the user to replace any placeholder images and links
## Module Configuration Details
### hero_banner
```json
{
"type": "hero_banner",
"image_url": "https://example.com/hero.jpg",
"title": "Welcome to Our Newsletter",
"subtitle": "Monthly updates and insights",
"overlay_color": "rgba(0,0,0,0.4)"
}
```
### text
```json
{
"type": "text",
"title": "Section Heading",
"body": "Paragraph content. Supports bold, italic, links."
}
```
### image_text
```json
{
"type": "image_text",
"image_url": "https://example.com/photo.jpg",
"image_alt": "Description",
"image_position": "left",
"title": "Feature Title",
"body": "Feature description text.",
"cta_text": "Learn More",
"cta_url": "#"
}
```
### cta
```json
{
"type": "cta",
"text": "Get Started Now",
"url": "#",
"align": "center"
}
```
### divider
```json
{
"type": "divider",
"color": "#E5E7EB",
"spacing": 20
}
```
### quote
```json
{
"type": "quote",
"text": "This is a quoted text block.",
"author": "Author Name"
}
```
### article_card
```json
{
"type": "article_card",
"image_url": "https://example.com/thumb.jpg",
"title": "Article Title",
"excerpt": "Brief summary of the article...",
"url": "#",
"cta_text": "Read More"
}
```
### two_column
```json
{
"type": "two_column",
"left": {
"title": "Left Column",
"body": "Left content"
},
"right": {
"title": "Right Column",
"body": "Right content"
}
}
```
## Email Compatibility Notes
The generated HTML follows these email compatibility best practices:
- **Table layout**: All structure uses `` instead of `` for Outlook compatibility
- **Inline CSS**: All styles are applied via `style` attributes to prevent `