Design, build, and send beautiful HTML email campaigns via Resend.

MITAuto-check: notesMarketing & SEO

Install Email Campaigns

skills CLI
$ npx skills add irinabuht12-oss/email-campaigns-claude --skill email-campaigns -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install irinabuht12-oss/email-campaigns-claude email-campaigns --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
email-campaigns
GitHub stars
158
Token cost
~2.9k tokens
SKILL.md length
859 words
Files
5
Skills in repo
1
Repo updated
First seen
Licence
MIT

At a glance

Design, build, and send beautiful HTML email campaigns via Resend.

  • Works in 8 steps: Asset hosting — use your own site as a CDN → Design system — reusable blocks → GIF optimization workflow → …
  • Asked to create an email
  • SKILL.md covers 1. Asset hosting — use your…, 2. Design system — reusable…, 3. GIF optimization workflow and 4. Sending via Resend, plus 4 more sections
  • Calls ffmpeg, npm and node; needs RESEND_API_KEY

What it does

Email Campaigns is an agent skill from irinabuht12-oss/email-campaigns-claude. 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…

Its SKILL.md is about 2.9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files (for example `README.md`).

It sits in Marketing & SEO, covering Email marketing. It works with Resend and Model Context Protocol. The repository describes itself as: Claude Code skill for HTML email campaigns with Resend. Pull the numbers from your ads via the free Ryze MCP: claude mcp add ryze --transport http https://connector.get-ryze.ai/mcp. The licence is MIT.

When your agent uses it

  • Asked to create an email
  • Draft a marketing email
  • Send a campaign
  • Make an email sequence

Example prompts

  • “create an email”
  • “draft a marketing email”
  • “send a campaign”
  • “/email-campaigns”

Requirements

  • Node.js
  • A credential in RESEND_API_KEY
  • Pre-approved tools (allowed-tools): Bash, Read, Write, Edit, Grep, Glob

Workflow steps

8 steps, taken from the step headings in SKILL.md.

  1. Asset hosting — use your own site as a CDN
  2. Design system — reusable blocks
  3. GIF optimization workflow
  4. Sending via Resend
  5. Pre-send checklist
  6. Conversion best practices
  7. Template starter
  8. What NOT to do

What it can do on your machine

Read from SKILL.md and the folder at commit 7c30e5d. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Bash
    • Read
    • Write
    • Edit
    • Grep
    • Glob

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • ffmpeg
    • npm
    • node

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names these keys or tokens, usually read from environment variables:

    • RESEND_API_KEY

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Email Campaigns loads about 2.9k tokens when it runs. Until then it costs about 154 tokens; SKILL.md has 859 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~154
When it runs · the whole SKILL.md, loaded when a task matches
~2.9k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NoteContains a long base64 blobSKILL.md:62
    d-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0i
  • NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
    allowed-tools: Bash, Read, Write, Edit, Grep, Glob

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from irinabuht12-oss/email-campaigns-claude at commit 7c30e5d, republished under its MIT licence (© irinabuht12-oss). 859 words, ~2,900 tokens.

Download SKILL.mdSave it as .claude/skills/email-campaigns/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.
name
email-campaigns
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
version
1.0.0

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: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
html
<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:

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

Then:

html
<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:

html
<table width="100%"><tr><td align="center"
       style="border-radius:4px; background-color:#18181b;">
  <a href="LANDING-URL" style="display:block; padding:14px 24px;
                               font-size:14px; font-weight:600; color:#fff;
                               text-decoration:none;">
    <img src="LOGO" width="20" height="20"
         style="display:inline-block; vertical-align:middle;
                margin-right:8px; border-radius:3px;" alt="">
    <span style="vertical-align:middle;">Connect your accounts &rarr;</span>
  </a>
</td></tr></table>

Place one CTA immediately after the first proof video (highest conversion moment) and one at the bottom.

Typography scale
  • H1: 26px
  • Body/features/video titles: 15px
  • Section labels/footer: 13px
  • CTA button: 14px

Stick to this. No more than 3 sizes.

3. GIF optimization workflow

For each screen recording:

bash
# Convert MP4 → optimized GIF (720px, 15fps, 2x speed, trim to 8s)
ffmpeg -y -i source.mp4 -t 8 \
  -vf "setpts=0.5*PTS,fps=15,scale=720:-1:flags=lanczos,split[s0][s1];\
       [s0]palettegen=max_colors=256[p];\
       [s1][p]paletteuse=dither=sierra2_4a" \
  -loop 0 output.gif

# Check file size — should be under 1.5 MB
ls -lh output.gif

If too big:

  • Drop to 12fps
  • Reduce width to 600px
  • Trim to 5-6 seconds
  • Drop palette to 128 colors, use dither=bayer:bayer_scale=5

If too low quality:

  • Bump to 720-900px
  • 256 colors with sierra2_4a dither
  • Accept 1.5-2 MB ceiling

4. Sending via Resend

Setup (once per project)
bash
npm install resend

Env var: RESEND_API_KEY=re_... (get from resend.com dashboard)

From domain: verify your sending domain in Resend settings first (DNS records take ~15 min to propagate). Use hello@yourdomain.com, not a free provider.

Send a single test email
js
// send.mjs
import { Resend } from 'resend';
import fs from 'fs';

const resend = new Resend(process.env.RESEND_API_KEY);
const html = fs.readFileSync('./email.html', 'utf-8');

const { data, error } = await resend.emails.send({
  from: 'Ira <hello@get-ryze.ai>',
  to: 'you@example.com',
  subject: 'Claude Connector for Google/Meta Ads is live',
  html,
  // Optional plain-text fallback
  text: 'We released the Claude connector. Connect in 1 click: https://...',
});

console.log(error ?? data);

Run: node send.mjs. Always send to yourself first.

Send to a list (batches)

Resend rate-limits at 10 req/sec (free) or 100 req/sec (paid). For larger lists use their batch API:

js
await resend.batch.send(
  recipients.map(email => ({
    from: 'Ira <hello@get-ryze.ai>',
    to: email,
    subject: '...',
    html,
  }))
);

Up to 100 emails per batch call. Chunk your list accordingly.

Show full SKILL.md (350 more words)Show less
Sequences / drip campaigns

For a 3-email sequence (day 0, day 3, day 7), use a cron + a sent-state table in Postgres/Supabase:

js
// Pseudo
const dueToday = await db.campaigns.findMany({
  where: { scheduled_date: today, status: 'pending' }
});
for (const c of dueToday) {
  await resend.emails.send({ ...c });
  await db.campaigns.update({ where: { id: c.id }, data: { status: 'sent' } });
}

Resend has webhooks for email.delivered, email.opened, email.clicked — use them to trigger the next email in the sequence rather than fixed timers.

5. Pre-send checklist

Before you hit send on a real list:

  • All asset URLs are absolute (https://...), not relative (/email-assets/...)
  • Preheader text set (first hidden div) — this is the inbox preview line
  • Subject line tested for deliverability (no ALL CAPS, no exclamation spam)
  • Every image has meaningful alt text
  • Every link has target="_blank"
  • GIFs under 2 MB each, total email under 5 MB
  • Tested in at least: Gmail web, Gmail mobile, Apple Mail, Outlook
  • Unsubscribe link in footer (required by CAN-SPAM / GDPR)
  • Sent one test to yourself — clicked every link
  • from address is on a verified domain in Resend

6. Conversion best practices

  • One primary CTA — repeated twice (mid-email + bottom). Don't dilute with secondary actions.
  • Video first, text second — a 3-second GIF shows product faster than 3 paragraphs.
  • Specificity wins — "Connect in 1 click" > "Get started". "30-second setup" > "Easy to install".
  • Claim + proof — every claim near a visual (GIF, screenshot, or logo strip showing integrations).
  • Low-friction reply CTA — "Reply 'Guide' and I'll send you X" is high-intent and cheap to fulfill.
  • Send Tuesday-Thursday, 9-11am recipient-local. Avoid Monday (full inboxes) and weekends (low open).

7. Template starter

To bootstrap a new campaign, copy the most recent working HTML from your repo (e.g. public/email-assets/preview/claude-connector.html) and edit in place. Keep the preview file checked in alongside the campaign folder:

public/email-assets/2026-05-launch/
  hero.png
  demo.gif
  preview.html

Preview locally at http://localhost:3000/email-assets/2026-05-launch/preview.html.

8. What NOT to do

  • ❌ Don't use <video> tags — blocked in Gmail/Outlook
  • ❌ Don't use CSS grid or flexbox — broken in Outlook. Use nested <table>s.
  • ❌ Don't use web fonts — most clients strip them. Stick to system font stack.
  • ❌ Don't use background images on the <body> if you need them on mobile Gmail — it ignores body bg. Put color inside the main card.
  • ❌ Don't embed MP4 directly — always GIF preview → link to external MP4.
  • ❌ Don't send without testing — render one in Litmus/Mailtrap or just send to yourself on 3 clients.

© irinabuht12-oss, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 4 other files in the repository root of irinabuht12-oss/email-campaigns-claude.

  • SKILL.md
  • LICENSE
  • README.md
  • demo.gif
  • examples/claude-connector.html

Open the folder on GitHubat commit 7c30e5d

Compare with similar skills

Email Campaigns next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Email Campaigns compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Email Campaigns this skillirinabuht12-oss/email-campaigns-claude158—~2.9kAutomated safety check: NotesMIT
Pre Send QAcognyai/claude-code-marketing-skills104—~2.2kAutomated safety check: NotesNone
Klaviyoasgeirtj/system_prompts_leaks69k—~1.1kAutomated safety check: PassCC0-1.0
Subject Line Labcognyai/claude-code-marketing-skills104—~2kAutomated safety check: NotesNone
Email Marketing BibleCosmoBlk/email-marketing-bible330—~4.3kAutomated safety check: PassMIT
Klaviyo Analystthatrebeccarae/claude-marketing161—~5kAutomated safety check: NotesMIT

Similar skills

  • Pre Send QA

    cognyai/claude-code-marketing-skills

    Pre-flight QA for an email campaign — merge tags, broken links, spam triggers, compliance, mobile rendering — before you hit send

    104 GitHub stars~2.2k tokensUpdated 3 mo ago
    Marketing & SEOAuto-check: notes
  • Klaviyo

    asgeirtj/system_prompts_leaks

    Read and manage the user's Klaviyo email and SMS marketing campaigns, newsletters, flows, subscriber lists, and audience segments.

    69k GitHub stars~1.1k tokensUpdated yesterday
    Marketing & SEOAuto-check passed
  • Subject Line Lab

    cognyai/claude-code-marketing-skills

    Mine your actual subject-line history from Klaviyo / Mailchimp / Rule / Get a Newsletter, find the patterns that work for YOUR list, and generate tuned candidates

    104 GitHub stars~2k tokensUpdated 3 mo ago
    Marketing & SEOAuto-check: notes
  • Email Marketing Bible

    CosmoBlk/email-marketing-bible

    Email marketing operating manual for AI agents, with hard send-safety gates.

    330 GitHub stars~4.3k tokensUpdated 2 days ago
    Marketing & SEOAuto-check passed
  • Klaviyo Analyst

    thatrebeccarae/claude-marketing

    Klaviyo marketing operations and analyst expertise. An agent skill from thatrebeccarae/claude-marketing.

    161 GitHub stars~5k tokensUpdated 4 mo ago
    Marketing & SEOAuto-check: notes
  • Email

    AgriciDaniel/claude-email

    Comprehensive email management and marketing for any business type.

    130 GitHub stars~2k tokensUpdated 4 mo ago
    Marketing & SEOAuto-check: notes

Questions about Email Campaigns

What does Email Campaigns do?

Design, build, and send beautiful HTML email campaigns via Resend. Email Campaigns is an agent skill from irinabuht12-oss/email-campaigns-claude. Design, build, and send beautiful HTML email campaigns via Resend.

When should I use Email Campaigns?

Email Campaigns fits situations like: asked to create an email; draft a marketing email; send a campaign; make an email sequence.

How do I install Email Campaigns in Claude Code?

Run `npx skills add irinabuht12-oss/email-campaigns-claude --skill email-campaigns -a claude-code`. Or copy the skill folder (the irinabuht12-oss/email-campaigns-claude repository) into .claude/skills/email-campaigns in your project. Claude Code loads it when a task matches its description.

How do I install Email Campaigns in Codex?

Run `npx skills add irinabuht12-oss/email-campaigns-claude --skill email-campaigns -a codex`. Or copy the skill folder (the irinabuht12-oss/email-campaigns-claude repository) into .agents/skills/email-campaigns in your project. Codex loads it when a task matches its description.

Can I use Email Campaigns in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add irinabuht12-oss/email-campaigns-claude --skill email-campaigns -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/email-campaigns, .gemini/skills/email-campaigns, .github/skills/email-campaigns and .opencode/skills/email-campaigns in your project.

What does Email Campaigns need to run?

Going by SKILL.md and its folder, Email Campaigns needs the command-line tools its instructions call (ffmpeg, npm and node) and credentials named RESEND_API_KEY. Our summary lists: Node.js; A credential in RESEND_API_KEY. Its frontmatter pre-approves these tools: Bash, Read, Write, Edit, Grep, Glob.

Does Email Campaigns access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Email Campaigns safe to install?

Our automated static check of SKILL.md found notes only (contains a long base64 blob; pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Email Campaigns use?

Email Campaigns is published under the MIT licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Email Campaigns use?

About 2.9k tokens (SKILL.md is roughly 12k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Email Campaigns?

Skills that share tags, products or a category with Email Campaigns: Pre Send QA (cognyai/claude-code-marketing-skills, 104 stars), Klaviyo (asgeirtj/system_prompts_leaks, 69k stars), Subject Line Lab (cognyai/claude-code-marketing-skills, 104 stars) and Email Marketing Bible (CosmoBlk/email-marketing-bible, 330 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Email Campaigns?

irinabuht12-oss (a GitHub user) maintains it in irinabuht12-oss/email-campaigns-claude, which has 158 GitHub stars. The repository was last updated on September 8, 2026.

Source: irinabuht12-oss/email-campaigns-claude on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.