/email-campaigns-claude

name: email-campaigns
version: 1.0.0
description: |
  Design, build, and send beautiful HTML email campaigns via Resend. Handles asset hosting (images + GIFs on your own CDN), the pre-built email HTML component library (frost-glass cards, hero image, video blocks with blurred backgrounds, CTA buttons, footer), GIF optimization from MP4 source video, and sending via the Resend API. Use when asked to "create an email", "draft a marketing email", "send a campaign", "make an email sequence", or "build an email with Resend".
  Proactively suggest when the user mentions sending marketing emails, launching a feature via email, or designing a newsletter.
allowed-tools:
  - Bash
  - Read
  - Write
  - Edit
  - Grep
  - Glob

Email Campaigns

Build modern, on-brand marketing emails and send them via Resend. This skill encodes a complete pattern: asset hosting, reusable HTML components, GIF tooling, and the Resend send pipeline.

1. Asset hosting — use your own site as a CDN

**Setup once.** In a Next.js or any static-hosted project, create a folder served at the site root:

<project>/public/email-assets/
  <campaign-name>/
    hero.png
    demo.gif

Anything in `public/` is served at `https://yourdomain.com/email-assets/...`. Commit + push = instant CDN. No Cloudinary, no S3.

**Rules for email-safe assets:**

• Naming: lowercase, dashes only (`hero-image.jpg` ✅, `Hero Image.jpg` ❌)
• Images: JPG/PNG, ≤ 1 MB, max 600px wide
• GIFs: ≤ 1.5 MB, max 720px wide, 12-15 fps, keep under 8 seconds
• Video: MP4 in same folder, but NEVER embed `<video>` — always use GIF thumbnail linking to MP4
• Version filenames instead of overwriting (`hero-v2.jpg`) — email clients cache aggressively

**Before sending:** swap all local paths to absolute URLs (`https://yourdomain.com/email-assets/...`). Relative paths work in browser preview but break in recipients' inboxes.

2. Design system — reusable blocks

Use this building-block inventory. Copy from a previous campaign, don't redesign from scratch.

Outer shell

<body style="margin:0; padding:0; background-color:#ffffff;
             font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;">
  <div style="display:none; max-height:0; overflow:hidden; font-size:1px; line-height:1px; color:#fff;">
    [PREHEADER — 1 sentence, shown in inbox preview]
  </div>
  <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#ffffff;">
    <tr><td align="center" style="padding:32px 16px;">
      <table width="560" cellpadding="0" cellspacing="0" border="0"
             style="max-width:560px; width:100%;">
        <!-- MAIN CARD -->
        <tr><td>
          <table width="100%" cellpadding="0" cellspacing="0" border="0"
                 style="background-color:#f7fbfe;
                        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC44NSIgbnVtT2N0YXZlcz0iMiIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNuKSIgb3BhY2l0eT0iMC4wNiIvPjwvc3ZnPg=='),
                                         linear-gradient(90deg, #edf6fd 0%, #f6fbfe 50%, #fcfdfe 100%);
                        border-radius:4px;
                        box-shadow: 0 2px 8px rgba(24,24,27,0.06), 0 8px 24px rgba(24,24,27,0.04);
                        overflow:hidden;">
            <!-- sections go here -->
          </table>
        </td></tr>
      </table>
    </td></tr>
  </table>
</body>

Key tokens:

• **Card bg:** light sky gradient + 6% SVG noise texture for depth (subtle grain). Gradient direction `90deg` = left→right.
• **Card shadow:** layered soft shadow, no border
• **Card radius:** 4px (tight corners feel modern)

Header image

Full-width image flush with card top. Crop the top 3/4 of a wide image (1376×576 cropped from 1376×768) for hero; use the bottom 1/3 (256px) as a footer image inside the card.

Logo cards (frost-glass)

Five logos distributed across full card width via `width="20%"` columns. Each card 72×72, light fill (#f4f4f7 gradient), soft shadow, 3px radius.

Hero title + body

<h1 style="font-size:26px; font-weight:700; color:#18181b; letter-spacing:-0.5px;">...</h1>
<p style="font-size:15px; line-height:1.65; color:#3f3f46;">...</p>

Feature list with black bullets (not green checks)

Keep bullets black `&bull;` in a 20px cell, text 15px. Avoid green check pills — they look dated.

Video block (frost-glass with blurred bg)

Pre-blur your brand hero image with ffmpeg to use as a colorful bed behind videos:

ffmpeg -y -i header.png -vf "boxblur=luma_radius=30:luma_power=3" header_blur.png

Then:

<a href="LANDING-URL">
  <p>Video title</p>
  <table width="100%">
    <tr><td style="background-image:url('https://yourdomain.com/email-assets/header_blur.png');
                   background-size:cover; border-radius:3px; padding:14px;
                   box-shadow:0 4px 14px rgba(24,24,27,0.1);">
      <table width="100%">
        <tr><td style="background-color:rgba(255,255,255,0.55);
                       backdrop-filter:blur(12px);
                       -webkit-backdrop-filter:blur(12px);
                       border:1px solid rgba(255,255,255,0.6);
                       border-radius:3px; padding:10px;
                       box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);">
          <img src="GIF-URL" width="475" style="display:block; width:100%;
                                                max-width:475px; border-radius:3px;">
        </td></tr>
      </table>
    </td></tr>
  </table>
</a>

In Apple Mail/iOS: `backdrop-filter` renders real glass. In Gmail/Outlook: the pre-blurred image underneath sells the effect on its own.

CTA button

Black pill, 4px radius, 14px 24px padding, optional small logo inline