AI SummaryBuild 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. Anything in is served at . Commit + push = instant CDN. No Cloudinary, no S3. Use this building-block inventor
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to install the "email-campaigns" skill in my project. Please run this command in my terminal: # Install skill into your project mkdir -p .claude/skills/email-campaigns-claude && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/email-campaigns-claude/SKILL.md "https://raw.githubusercontent.com/irinabuht12-oss/email-campaigns-claude/main/SKILL.md" Then restart Claude Code (or reload the window in Cursor) so the skill is picked up.
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.
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)
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster