email-campaigns

# 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 ```html <body style="margin:0; padding:0; background-color:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;"> <div style="display:...