{"id":"f9e81044-f2b8-4c06-922d-54b0d00c4019","shortId":"k6BeWS","kind":"skill","title":"email-newsletter","tagline":"Drafts and designs a complete HTML email newsletter from a topic or content brief. Outputs paste-ready HTML for Loops, Mailchimp, Beehiiv, Resend, or any standard email platform. Includes subject line options and plain-text fallback. Trigger when a user says \"write a newsletter\",","description":"# Email Newsletter\n\nDraft and design a complete HTML email newsletter from a topic or content brief. Output is paste-ready for Loops, Mailchimp, Beehiiv, Resend, or any standard email platform.\n\n---\n\n**Critical rule:** Table-based HTML with inline styles only. No CSS classes, no flexbox, no grid, no `<style>` blocks. Every element gets `style=\"\"` directly. This is not optional -- email clients strip everything else.\n\n---\n\n## Step 1: Brief Intake\n\nNeed three things to start. If all three present in the message: skip to Step 2.\n\nIf any missing, ask exactly:\n\n> \"To get started, I need three things:\n> 1. **Topic** -- what is this newsletter about?\n> 2. **Audience** -- who is reading? (role, company size, how they know you)\n> 3. **Primary CTA** -- what one action do you want readers to take?\"\n\nWait for all three before continuing.\n\n---\n\n## Step 2: Complete Intake\n\nAsk all questions in one message, grouped by category. User can skip any -- defaults apply.\n\n> \"A few questions before I draft -- answer what you know, skip the rest:\n>\n> **Content**\n> 1. **Length** -- brief (300 words, punchy) / standard (500-700) / deep dive (800+ words)?\n> 2. **Format** -- editorial article / numbered breakdown / personal story / data report?\n> 3. **Issue context** -- one-time send / part of weekly series / monthly digest?\n> 4. **CTA URL** -- what's the actual link? (or I'll use a placeholder)\n>\n> **Brand**\n> 5. **Company / brand name** -- for header and footer\n> 6. **Tagline** -- one-line description (optional, for footer)\n> 7. **City & country** -- for footer (e.g. \"San Francisco, US\")\n> 8. **Primary brand color** -- hex? (e.g. #856FE6)\n> 9. **Secondary accent** -- keep default yellow-green (#D8F90A) / use brand color / something else?\n>\n> **Design**\n> 10. **Background** -- dark (editorial/SaaS) / light (clean/corporate) / custom hex?\n> 11. **Display font** -- editorial serif (Instrument Serif) / clean modern sans / system fonts only?\n> 12. **Button style** -- pill (very rounded) / softly rounded / sharp corners?\n> 13. **Visual style** -- editorial / technical+data / warm+founder / bold+campaign?\n>\n> **Platform & Technical**\n> 14. **Platform** -- Loops / Mailchimp / Beehiiv / Resend / other?\n> 15. **Tone** -- educational / conversational / bold+direct / formal / playful?\n> 16. **Personalization** -- none / first name / first name + company?\n> 17. **Subject line** -- have one / want 3 options?\n> 18. **Secondary sections** -- sponsor block / product callout / event / quick links / none?\n> 19. **Plain-text version** -- yes (recommended) / no?\"\n\n**Defaults if skipped:**\n\n| Question | Default |\n|---|---|\n| Length | standard (500-700 words) |\n| Format | editorial article |\n| Issue context | one-time send |\n| CTA URL | `[CTA_URL]` placeholder |\n| Company name | `[YOUR BRAND]` placeholder |\n| Tagline | none |\n| City & country | `[CITY, COUNTRY]` placeholder |\n| Brand color | none (use `#D8F90A` for all accents) |\n| Secondary accent | `#D8F90A` (yellow-green default) |\n| Background | dark |\n| Display font | Instrument Serif (editorial serif) |\n| Button style | pill |\n| Visual style | editorial |\n| Platform | generic |\n| Tone | conversational |\n| Personalization | none |\n| Subject line | generate 3 options |\n| Secondary sections | none |\n| Plain-text | yes |\n\n---\n\n## Step 2.5: Design Direction (internal -- not shown to user)\n\nFrom Step 2 answers, determine:\n- Visual character (from question 13, or inferred from tone + format if skipped)\n- ONE unmissable element -- identify before Step 3\n- Template path (see Step 5)\n\nCharacter defaults if question 13 skipped:\n- Educational / formal tone: Editorial\n- Metrics-heavy content (stats, benchmarks, reports): Technical/data-forward\n- Product launches, events, campaigns: Bold/campaign\n\nNever ask the user for design direction separately -- derive it from their answers.\n\n---\n\n## Step 3: Structure Design\n\nRead `references/html-email-guide.md` for layout rules before choosing sections.\n\nBased on topic + audience + CTA + secondary sections requested, select sections from this library:\n\n| Section | Include when |\n|---|---|\n| header | Always -- logo placeholder + issue number or date |\n| hero | Always -- big headline + 1-2 sentence hook |\n| intro | Conversational or educational tone -- short personal note |\n| main-content | Primary article or insight (text-heavy) |\n| stat-callout | There is a compelling stat, quote, or data point |\n| secondary-section | Secondary CTA was requested |\n| product-cta | Brand context present and soft product plug fits |\n| sponsor-block | Sponsor section was requested |\n| quick-links | Curated links section was requested |\n| footer | Always -- unsubscribe link + company name |\n\nOutput the chosen structure as a numbered list with one-line purpose per section:\n\n```\nProposed structure:\n1. Header -- logo + Issue #1 / [date]\n2. Hero -- headline + hook paragraph\n3. Intro -- short personal framing\n4. Main Content -- [topic] breakdown\n5. Stat Callout -- key data point from the story\n6. CTA -- [cta text]\n7. Footer -- unsubscribe + company\n\nDoes this structure work, or should I adjust any sections?\n```\n\nWait for confirmation before Step 4.\n\n---\n\n## Step 4: Content Draft\n\nWrite copy for each section in sequence. No HTML yet -- clean prose only.\n\n**Rules per section:**\n- **Header**: Issue number + date. No copy needed.\n- **Hero headline**: 8 words max, outcome-focused, no starting with \"I/We/Our\"\n- **Hero hook**: 1-2 sentences, problem or curiosity gap, pulls reader in\n- **Intro**: 2-3 sentences, personal or contextual, not corporate-speak, contractions OK\n- **Main content**: 250-400 words, scannable -- use **bold phrases** for key points, short paragraphs (1-3 lines), no walls of text, no bullet overload\n- **Stat callout**: One stat or quote, 20 words max, punchy\n- **Product CTA**: 2-3 sentences, value-forward, not \"Check out our product\" -- tell them what changes for them\n- **CTA button text**: 3-5 words, action verb + benefit (\"Read the full breakdown\", \"Save my seat\", \"Get the guide\")\n- **Footer**: Unsubscribe link placeholder + company name\n\nRead `references/subject-line-formulas.md` then write 3 subject line options (if subject line not provided by user):\n- Option A: Curiosity gap formula\n- Option B: Direct benefit formula\n- Option C: Number/list formula\n\nDo not use em dashes. Do not use: \"powerful\", \"seamless\", \"game-changing\", \"leverage\", \"innovative\", \"unlock\", \"transform\", \"elevate\", \"cutting-edge\", \"robust\".\n\n---\n\n## Step 5: HTML Generation\n\nRead `references/design-system.md` and `references/html-email-guide.md` before generating HTML.\n\n**Template or custom -- decide based on Step 2 answers:**\n\n**Use `templates/dark-newsletter.html` as base when ALL of:**\n- background = dark (or not specified)\n- display font = Instrument Serif (or not specified)\n- no custom background hex provided\n\n**Use `templates/light-newsletter.html` as base when ALL of:**\n- background = light OR tone = formal\n- display font = Instrument Serif (or not specified)\n- no custom background hex provided\n\n**Generate custom HTML from scratch when ANY of:**\n- custom background hex provided (not dark, not white)\n- display font = modern sans or system fonts only\n- combination of answers produces a design neither template serves\n\nFor custom generation: use `references/design-system.md` Custom Generation Guide as the full token spec. Apply user's background/font/button/accent choices throughout.\n\n**Then (for template path):**\n1. Select only the sections needed from the template (based on Step 3 structure)\n2. Fill in all `[PLACEHOLDER]` values with content from Step 4\n3. Apply brand color substitution (see below)\n4. Verify all `[UNSUBSCRIBE_URL]` placeholders are still present (platform tuning happens in Step 6)\n\n**Brand color substitution rules:**\n\nIf `brand_color` is provided:\n- Replace brand strip `bgcolor` (`#D8F90A` in the `height:2px` row) with brand_color\n- Replace stat callout left border color with brand_color\n- Replace category label color with brand_color\n- If brand_color luminance is high (yellows, greens, oranges -- most neons): replace step badge `#D8F90A` with brand_color too\n- If brand_color luminance is low (dark navy, forest, charcoal): keep step badges and CTA button as `#D8F90A`, only use brand_color for strip + stat border\n\nIf `brand_color` is NOT provided: keep all `#D8F90A` values as-is.\n\n**Content substitution rules (from Step 2 answers):**\n- If `company_name` provided: replace all `[YOUR BRAND]` and `[COMPANY NAME]` placeholders\n- If `city_country` provided: replace `[CITY, COUNTRY]` placeholder\n- If `tagline` provided: add as subtitle line in footer after company name\n- If `cta_url` provided: replace all `[CTA_URL]` placeholders with actual URL\n- If `personalization = first_name`: add platform-appropriate first name variable to hero greeting -- e.g. `Hey %%first_name%%,` on Beehiiv, `Hey {{first_name}},` on Loops, `Hey *|FNAME|*,` on Mailchimp\n- If `personalization = first_name + company`: add both variables where contextually appropriate\n\n**Brand color visual tension check (on dark email):**\n\nDoes the brand color visually pop on `#111111`? Test mentally: would it be visible as a 2px strip?\n- High-saturation colors (purples, blues, teals, pinks, yellows, oranges, greens): YES -- use for strip + stat border + category label\n- Low-saturation / near-neutral (warm greys, beige, off-white): strip only; category label reverts to `#555555`\n- Near-black (very dark navy, forest, charcoal below ~`#2A2A2A`): skip brand_color for ALL accent uses, fall back to `#D8F90A` for every element\n\n**Accent discipline rule:** brand_color appears in AT MOST 3 places: brand strip, stat border, category label. Never in body copy, headlines, button backgrounds, or section backgrounds. Over-branding kills the premium feel.\n\n**CTA button text color:**\n- On `#D8F90A` button background: always use `#0A0A0A` text (it's a light color)\n- On `#111111` button background (inside yellow callout card): always use `#F2F2F2` text\n- On brand_color button: use `#0A0A0A` if brand is light, `#FFFFFF` if brand is dark\n\n**Required on every `<td>` with a background color:**\nBoth the `bgcolor=` HTML attribute AND the inline `background-color:` style. Example:\n```html\n<td bgcolor=\"#D8F90A\" style=\"background-color:#D8F90A;\">\n```\nThe attribute handles Outlook. The style handles everything else. Never use just one.\n\n**Design excellence (frontend-design principles, email-adapted):**\n\nEmail's table constraints don't limit design ambition. Push within them:\n\n- **Typography to its extreme**: 4-5 word headlines = 60px, `-0.04em` tracking. 6-7 word headlines = 56px, `-0.03em`. 8 words = 48px. Never size down for safety -- the headline is a poster, not a label. Instrument Serif italic on stat quotes adds literary weight no other element can match.\n\n- **Density contrast as craft signal**: Hero = maximum open space (64px top). Body paragraphs = tight and dense. CTA callout card = maximum open space again (64px). Open → tight → open is the rhythm that reads as intentional design, not template output.\n\n- **Background depth via section alternation** (all email-safe):\n  - Header: `#0A0A0A`\n  - Hero: `#111111`\n  - Stat callout outer: `#111111`, inner elevated card: `#1A1A1A`\n  - Body paragraphs: `#161616` (subtle elevation creates depth without color)\n  - Step cards: `#111111` (contrast with body)\n  - CTA callout card: `#D8F90A` (the ONLY bright element -- never dilute)\n  - Footer: `#080808`\n\n- **Accent scarcity = luxury**: One yellow callout card in a sea of dark reads premium. Yellow appearing in six places reads cheap. The CTA card's power comes entirely from being the single bright element in a dark email.\n\n- **Unforgettable test**: Before saving, state in one sentence what a reader would describe to a colleague 3 hours later. If it's vague (\"it was dark and clean\") -- the visual anchor isn't strong enough. Make it specific (\"the yellow card with the big serif headline\").\n\n- **Stat callout as editorial pull quote**: 4px left border (not 3px). 26px italic Instrument Serif on the quote text. 32px inner padding. This is the closest an email gets to a magazine pull quote. Treat it like one.\n\n---\n\n## Step 6: Platform Tuning\n\nRead `references/platform-compat.md` and apply platform-specific adjustments:\n\n| Platform | Action |\n|---|---|\n| Loops | Replace `[UNSUBSCRIBE_URL]` with `{{unsubscribe_url}}`. Replace `[FIRST_NAME]` refs with `{{first_name}}` |\n| Mailchimp | Replace `[UNSUBSCRIBE_URL]` with `*\\|UNSUB\\|*`. Add `mc:edit=\"[section-name]\"` to editable `<td>` blocks |\n| Beehiiv | Replace `[UNSUBSCRIBE_URL]` with `%%unsubscribe_url%%`. Replace `[FIRST_NAME]` with `%%first_name%%` |\n| Resend | Replace `[UNSUBSCRIBE_URL]` with `{unsubscribeUrl}`. Note: React Email `.tsx` output available on request |\n| Generic/Other | Keep `[UNSUBSCRIBE_URL]` as placeholder with comment: `<!-- Replace with your unsubscribe link -->` |\n\n---\n\n## Step 7: Self-QA\n\nCheck the generated HTML before output. Fix every issue found -- do not skip.\n\n**Rendering checks:**\n- [ ] All styles inline -- no `<style>` blocks, no `class=` attributes anywhere\n- [ ] All `<table>` have `cellpadding=\"0\" cellspacing=\"0\" border=\"0\"`\n- [ ] Images (if any) have `alt=\"\"`, `border=\"0\"`, `display:block` in style\n- [ ] Max-width 600px enforced on container table\n- [ ] CTA button uses `<table>` + `<td>` structure with `bgcolor=` attribute, not just `<a>` with `display:block`\n- [ ] No `flexbox`, `grid`, `position:`, `float:`, CSS variables (`--var`), `min-height`, `max-height` in any inline style\n- [ ] `border-radius` on `<td>` only -- not on `<table>` or `<a>` (Outlook renders `<td>` radius)\n- [ ] Footer has unsubscribe link with platform-correct variable\n\n**Content checks:**\n- [ ] Hero headline is 8 words or fewer\n- [ ] CTA button text is 3-5 words\n- [ ] No em dashes (-- is fine, not --)\n- [ ] No banned words: \"powerful\", \"seamless\", \"game-changing\", \"leverage\", \"innovative\", \"unlock\", \"transform\", \"elevate\", \"cutting-edge\", \"robust\"\n- [ ] Plain-text version strips all HTML cleanly (if requested)\n\n**Design quality checks:**\n- [ ] ONE unmissable element from Step 2.5 is visually dominant -- not buried between equal-weight sections\n- [ ] Typography hierarchy clear: H1 >> H2 >> body -- size contrast at least 2:1 between each level\n- [ ] All spacing values from valid rhythm only: 8 / 16 / 20 / 24 / 32 / 40 / 52 / 64px -- no arbitrary values (18px, 22px, 30px, 45px, etc.)\n- [ ] Brand color appears in 3 or fewer places -- count instances; if more, remove from lowest-priority element\n- [ ] No email slop patterns -- check against the slop list in `references/design-system.md`\n\nIf any check fails: fix inline, then re-run the checklist mentally.\n\n---\n\n## Step 8: Subject Line Presentation\n\nIf 3 subject line options were generated, present them with a recommendation:\n\n```\n**Subject Line Options**\n\nA. [subject] -- [formula used, best for what audience/context]\nB. [subject] -- [formula used]\nC. [subject] -- [formula used]\n\nRecommendation: [A/B/C] -- [one sentence reason based on audience and tone]\n```\n\nIf user provided their own subject line, skip this step.\n\n---\n\n## Step 9: Save Files + Present Summary\n\n**Save the HTML to a file first -- do not dump it in the chat.**\n\n```bash\nmkdir -p docs/newsletters\n```\n\nWrite the full HTML to:\n`docs/newsletters/[topic-slug]-[YYYY-MM-DD].html`\n\nWhere `[topic-slug]` is the topic lowercased with spaces replaced by hyphens (e.g. \"AI B2B Sales\" → `ai-b2b-sales`).\n\nIf a plain-text version was requested, also write it to:\n`docs/newsletters/[topic-slug]-[YYYY-MM-DD].txt`\n\n**Then present this summary in the chat (no HTML code fence):**\n\n```\n## Newsletter: [topic slug]\nDate: [today's date] | Platform: [platform] | Tone: [tone]\n\nSaved to: docs/newsletters/[topic-slug]-[YYYY-MM-DD].html\n\n---\n\n### Subject Lines\nA. [subject A] -- [formula]\nB. [subject B] -- [formula]\nC. [subject C] -- [formula]\nRecommended: [letter] -- [one-sentence reason]\n\n---\n\n### Send Checklist\n- [ ] Replace [CTA_URL] with your actual link\n- [ ] Replace [COMPANY NAME] and [CITY, COUNTRY] in footer\n- [ ] Replace [YOUR BRAND] in header with your brand name (or swap in a logo image)\n- [ ] Verify unsubscribe variable works in [platform]\n- [ ] Send a test email to yourself before launching\n```\n\nDo not print the HTML in the chat. The file path tells the user where to find it.\n\n---\n\n## Section Reference\n\n| Section | Purpose |\n|---|---|\n| header | Logo + issue number or date |\n| hero | Big headline + 1-2 sentence hook |\n| intro | Short personal note or context |\n| main-content | Primary article or insight (text-heavy) |\n| image-block | Full-width image + caption |\n| stat-callout | Highlighted stat or quote in a box |\n| secondary-section | Second story or feature |\n| product-cta | Soft product plug or feature highlight |\n| sponsor-block | Sponsored content (clearly labeled) |\n| quick-links | Curated links section (3-5 items) |\n| footer | Unsubscribe link, company info, legal |\n\n## Output Formats (on request)\n\n- **Standard HTML** (default): inline-styled, table-based, works everywhere\n- **React Email**: `.tsx` component output -- request explicitly, good for Resend + dev teams\n- **Plain text**: stripped fallback always included unless user opts out","tags":["email","newsletter","opendirectory","varnan-tech","agent-skills","gtm","hermes-agent","marketing-skills","openclaw-skills","skill-pack","skills","technical-seo"],"capabilities":["skill","source-varnan-tech","skill-email-newsletter","topic-agent-skills","topic-gtm","topic-hermes-agent","topic-marketing-skills","topic-openclaw-skills","topic-skill-pack","topic-skills","topic-technical-seo"],"categories":["opendirectory"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/Varnan-Tech/opendirectory/email-newsletter","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add Varnan-Tech/opendirectory","source_repo":"https://github.com/Varnan-Tech/opendirectory","install_from":"skills.sh"}},"qualityScore":"0.593","qualityRationale":"deterministic score 0.59 from registry signals: · indexed on github topic:agent-skills · 286 github stars · SKILL.md body (17,241 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T18:54:40.701Z","embedding":null,"createdAt":"2026-04-30T12:56:11.412Z","updatedAt":"2026-05-18T18:54:40.701Z","lastSeenAt":"2026-05-18T18:54:40.701Z","tsv":"'base':85 'beehiiv':26,74 'brief':17,65 'class':93 'complet':8,56 'content':16,64 'critic':81 'css':92 'design':6,54 'draft':4,52 'email':2,10,31,50,58,79 'email-newslett':1 'fallback':41 'flexbox':95 'grid':97 'html':9,22,57,86 'includ':33 'inlin':88 'line':35 'loop':24,72 'mailchimp':25,73 'newslett':3,11,49,51,59 'option':36 'output':18,66 'past':20,69 'paste-readi':19,68 'plain':39 'plain-text':38 'platform':32,80 'readi':21,70 'resend':27,75 'rule':82 'say':46 'skill' 'skill-email-newsletter' 'source-varnan-tech' 'standard':30,78 'style':89 'subject':34 'tabl':84 'table-bas':83 'text':40 'topic':14,62 'topic-agent-skills' 'topic-gtm' 'topic-hermes-agent' 'topic-marketing-skills' 'topic-openclaw-skills' 'topic-skill-pack' 'topic-skills' 'topic-technical-seo' 'trigger':42 'user':45 'write':47","prices":[{"id":"0ee5f5bd-7896-4f64-b557-df934a1ff9f3","listingId":"f9e81044-f2b8-4c06-922d-54b0d00c4019","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"Varnan-Tech","category":"opendirectory","install_from":"skills.sh"},"createdAt":"2026-04-30T12:56:11.412Z"}],"sources":[{"listingId":"f9e81044-f2b8-4c06-922d-54b0d00c4019","source":"github","sourceId":"Varnan-Tech/opendirectory/email-newsletter","sourceUrl":"https://github.com/Varnan-Tech/opendirectory/tree/main/skills/email-newsletter","isPrimary":false,"firstSeenAt":"2026-04-30T12:56:11.412Z","lastSeenAt":"2026-05-18T18:54:40.701Z"}],"details":{"listingId":"f9e81044-f2b8-4c06-922d-54b0d00c4019","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"Varnan-Tech","slug":"email-newsletter","github":{"repo":"Varnan-Tech/opendirectory","stars":286,"topics":["agent-skills","gtm","hermes-agent","marketing-skills","openclaw-skills","skill-pack","skills","technical-seo"],"license":"mit","html_url":"https://github.com/Varnan-Tech/opendirectory","pushed_at":"2026-05-18T18:27:10Z","description":" AI Agent Skills built for Founders who hate Marketing","skill_md_sha":"4f254672162206d194896e31f8a607dd4586b87e","skill_md_path":"skills/email-newsletter/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/Varnan-Tech/opendirectory/tree/main/skills/email-newsletter"},"layout":"multi","source":"github","category":"opendirectory","frontmatter":{"name":"email-newsletter","description":"Drafts and designs a complete HTML email newsletter from a topic or content brief. Outputs paste-ready HTML for Loops, Mailchimp, Beehiiv, Resend, or any standard email platform. Includes subject line options and plain-text fallback. Trigger when a user says \"write a newsletter\", \"draft an email newsletter\", \"create an HTML email\", \"design an email for my subscribers\", or \"write a newsletter about [topic]\".","compatibility":"[claude-code, gemini-cli, github-copilot]"},"skills_sh_url":"https://skills.sh/Varnan-Tech/opendirectory/email-newsletter"},"updatedAt":"2026-05-18T18:54:40.701Z"}}