Synthèse automatique

Conçoit et envoie des e-mails marketing HTML avec hébergement des visuels, bibliothèque de composants réutilisables, conversion de GIF et envoi via l'API Resend.

Points forts

Donne des règles précises pour des assets compatibles e-mail (poids, largeur, fps, nommage versionné).
Fournit une bibliothèque de blocs HTML réutilisables (hero, cartes frost-glass, CTA, footer) en structure de tables.
Couvre toute la chaîne, de la conversion MP4 vers GIF jusqu'à l'envoi via Resend.
Signale les pièges classiques : chemins relatifs, préheader, cache agressif des clients mail.

Limites

Très lié à Resend et à un dossier public/ d'hébergement statique, donc peu transposable à un autre ESP ou stack.
N'aborde ni la délivrabilité, ni la segmentation d'audience, ni les tests A/B.
La description des composants reste partielle : il faut souvent repartir d'une campagne précédente.

Quand l'utiliser

À utiliser dès qu'il faut rédiger, mettre en page ou envoyer une campagne e-mail marketing avec visuels hébergés et la bibliothèque de composants fournie.

Quand l'éviter

À éviter pour des e-mails transactionnels, des automatisations complexes ou un envoi via un fournisseur autre que Resend.

Analyse de sécurité

Prudence

Score qualité84/100

The skill is a straightforward email-design and delivery workflow. It uses Bash, file writes, and network sends, but all for legitimate purposes: ffmpeg blur/GIF conversion, committing static assets, and posting campaigns through Resend. There is no destructive command, no exfiltration of secrets, and the only base64 blob decodes to a harmless SVG noise texture. Because it invokes shell and external API calls, it merits 'caution' rather than 'safe'.

Points d'attention

•Uses Bash with network access (ffmpeg installs, Resend API sends) for legitimate asset processing and email delivery
•Sends email via third-party Resend API, which requires handling an API key; skill does not instruct leaking it but does not warn about secret handling either
•Contains a base64 data-URI SVG in inline styles — benign (a noise texture), not an obfuscated payload, but worth noting for reviewers
•Encourages writing files into project public/ directories served as a CDN, which could inadvertently publish non-email assets if paths are misused

Comment cette analyse est faite

Exemples

Launch campaign email

Create a launch email for our new analytics dashboard — hero image at the top, a GIF demo of the feature, and a CTA button linking to the blog post.

Multi-email announcement

Draft a 3-email sequence announcing our winter release, host the images in public/email-assets/winter-launch/, and send it via Resend.

Optimize a demo GIF

Convert demo.mp4 into a GIF under 1.5 MB at 720px wide and 12 fps, then embed it in the email as a thumbnail linking to the MP4.

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

Name: Campagnes email
Author: Skills Guide Bot

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

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

# 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)

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

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

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.

Sequences / drip campaigns

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

// 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.

Du fichier au premier essai

Le téléchargement contient exactement le contenu affiché sur cette fiche. Cette copie peut différer de la dernière version du dépôt source.

Consulter la source et ses fichiers annexes

Ce téléchargement contient uniquement SKILL.md. Les scripts, références, modèles et dépendances éventuels ne sont pas inclus. Récupérez les fichiers nécessaires depuis la source en conservant leur arborescence avant de poursuivre.

1. Télécharger le fichier

Télécharger SKILL.md

Depuis la racine d’un projet de test, enregistrez le fichier sous .skill-downloads/email-campaigns-ms47vogz/SKILL.md, ou utilisez la commande suivante. Ce dossier sert à examiner la skill avant son installation.

Commande pour macOS/Linux ou WSL : un shell POSIX et curl sont nécessaires. Sous Windows sans WSL, utilisez le bouton de téléchargement et créez le dossier manuellement.

mkdir -p '.skill-downloads/email-campaigns-ms47vogz' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/email-campaigns-ms47vogz/download' --output '.skill-downloads/email-campaigns-ms47vogz/SKILL.md.part' && mv '.skill-downloads/email-campaigns-ms47vogz/SKILL.md.part' '.skill-downloads/email-campaigns-ms47vogz/SKILL.md'

2. Vérifier les prérequis

Lisez SKILL.md avant de l’utiliser. Si le fichier cite des scripts ou services externes, examinez-les et préparez les accès nécessaires dans votre environnement de test.

Aucune section de prérequis reconnue dans ce fichier. Cela ne signifie pas qu’il est autonome : les bibliothèques, outils et accès peuvent être cités ailleurs dans le contenu ou dans le dépôt source.

Les plateformes de la fiche sont des indications du catalogue. Les chemins ci-dessous suivent la documentation des outils ; ils ne prouvent pas que cette skill y a été exécutée. Aucune version minimale de ces outils n’est attestée pour cette fiche.

3. Charger la skill

Après vérification, copiez le dossier complet dans le projet avec l’une des commandes ci-dessous, puis ouvrez une nouvelle session de l’outil. La commande s’arrête si un dossier du même nom existe déjà : comparez les fichiers avant de le remplacer.

Claude Code

test -f '.skill-downloads/email-campaigns-ms47vogz/SKILL.md' && test -s '.skill-downloads/email-campaigns-ms47vogz/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/email-campaigns' && cp -R '.skill-downloads/email-campaigns-ms47vogz' '.claude/skills/email-campaigns'

OpenSkills

OpenSkills doit déjà être installé. La procédure locale install/read est contrôlée avec OpenSkills 1.5.0, qui exige Node.js ≥ 20.6.0. Aucun slug du catalogue n’est résolu automatiquement.

Installation officielle d’OpenSkills

openskills install './.skill-downloads/email-campaigns-ms47vogz'

openskills read 'email-campaigns-ms47vogz'

La lecture doit afficher le contenu du fichier installé et son dossier de base. Elle ne lance ni la skill ni ses dépendances.

Pour un agent qui lit AGENTS.md, synchronisez ensuite l’index. Cette commande modifie AGENTS.md : relisez le diff avant de l’utiliser.

openskills sync

Mode manuel ou autre outil : joignez SKILL.md à une conversation, ou ouvrez-le dans un agent capable de lire les fichiers. Ajoutez les ressources annexes nécessaires. Il n’existe pas de dossier universel reconnu par tous les outils.

4. Faire un premier essai

Utilisez une entrée courte et fictive : un endpoint d’API, un petit document ou un brief d’interface. Dans une nouvelle conversation, joignez le fichier ou donnez son chemin à l’agent, puis adaptez cette demande :

Lis .skill-downloads/email-campaigns-ms47vogz/SKILL.md et applique ses instructions à cet exemple : [décrire une entrée de test]. Indique les fichiers, dépendances ou accès qui manquent. Produis le résultat demandé par la skill sans inventer de données ni exécuter de script non examiné.

Résultat attendu : une sortie correspondant aux instructions de la skill, ou une liste précise des prérequis manquants. Une simple confirmation de lecture ne valide pas le premier usage. Si une ressource externe est indisponible, ce parcours reste à tester.

Skills similaires

Fragments d'écriture

Contenu

Extrayez des fragments d'écriture bruts via un entretien intensif, sans imposer de structure. Capturez idées, citations et mots porteurs pour une utilisation ultérieure.

Claude CodebeginnerSûr 240,316

Skills Guide Bot

Rédaction UI et audit

Contenu

Rédigez ou auditez les textes d'interface (boutons, erreurs, états vides, infobulles) dans le monorepo, en suivant la source de vérité du design system.

Claude CodeCursorbeginnerSûr 108,623

Skills Guide Bot

Extraction MIDI/score

Contenu

Extrait le MIDI ou la partition d'une production musicale existante via l'outil MCP CogMusic et confirme la disponibilité du fichier.

Claude CodebeginnerSûr 69,866

Skills Guide Bot

Campagnes email

Recommandé pour

Synthèse automatique

Points forts

Limites

Analyse de sécurité

Exemples

Email Campaigns

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

2. Design system — reusable blocks

Outer shell

Header image

Logo cards (frost-glass)

Hero title + body

Feature list with black bullets (not green checks)

Video block (frost-glass with blurred bg)

CTA button

Typography scale

3. GIF optimization workflow

4. Sending via Resend

Setup (once per project)

Send a single test email

Send to a list (batches)

Sequences / drip campaigns

5. Pre-send checklist

6. Conversion best practices

7. Template starter

8. What NOT to do

Du fichier au premier essai

1. Télécharger le fichier

2. Vérifier les prérequis

3. Charger la skill

4. Faire un premier essai

Fragments d'écriture

Rédaction UI et audit

Extraction MIDI/score