$npx -y skills add Varnan-Tech/opendirectory --skill email-newsletterDrafts 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",
| 1 | # Email Newsletter |
| 2 | |
| 3 | Draft 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. |
| 4 | |
| 5 | --- |
| 6 | |
| 7 | **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. |
| 8 | |
| 9 | --- |
| 10 | |
| 11 | ## Step 1: Brief Intake |
| 12 | |
| 13 | Need three things to start. If all three present in the message: skip to Step 2. |
| 14 | |
| 15 | If any missing, ask exactly: |
| 16 | |
| 17 | > "To get started, I need three things: |
| 18 | > 1. **Topic** -- what is this newsletter about? |
| 19 | > 2. **Audience** -- who is reading? (role, company size, how they know you) |
| 20 | > 3. **Primary CTA** -- what one action do you want readers to take?" |
| 21 | |
| 22 | Wait for all three before continuing. |
| 23 | |
| 24 | --- |
| 25 | |
| 26 | ## Step 2: Complete Intake |
| 27 | |
| 28 | Ask all questions in one message, grouped by category. User can skip any -- defaults apply. |
| 29 | |
| 30 | > "A few questions before I draft -- answer what you know, skip the rest: |
| 31 | > |
| 32 | > **Content** |
| 33 | > 1. **Length** -- brief (300 words, punchy) / standard (500-700) / deep dive (800+ words)? |
| 34 | > 2. **Format** -- editorial article / numbered breakdown / personal story / data report? |
| 35 | > 3. **Issue context** -- one-time send / part of weekly series / monthly digest? |
| 36 | > 4. **CTA URL** -- what's the actual link? (or I'll use a placeholder) |
| 37 | > |
| 38 | > **Brand** |
| 39 | > 5. **Company / brand name** -- for header and footer |
| 40 | > 6. **Tagline** -- one-line description (optional, for footer) |
| 41 | > 7. **City & country** -- for footer (e.g. "San Francisco, US") |
| 42 | > 8. **Primary brand color** -- hex? (e.g. #856FE6) |
| 43 | > 9. **Secondary accent** -- keep default yellow-green (#D8F90A) / use brand color / something else? |
| 44 | > |
| 45 | > **Design** |
| 46 | > 10. **Background** -- dark (editorial/SaaS) / light (clean/corporate) / custom hex? |
| 47 | > 11. **Display font** -- editorial serif (Instrument Serif) / clean modern sans / system fonts only? |
| 48 | > 12. **Button style** -- pill (very rounded) / softly rounded / sharp corners? |
| 49 | > 13. **Visual style** -- editorial / technical+data / warm+founder / bold+campaign? |
| 50 | > |
| 51 | > **Platform & Technical** |
| 52 | > 14. **Platform** -- Loops / Mailchimp / Beehiiv / Resend / other? |
| 53 | > 15. **Tone** -- educational / conversational / bold+direct / formal / playful? |
| 54 | > 16. **Personalization** -- none / first name / first name + company? |
| 55 | > 17. **Subject line** -- have one / want 3 options? |
| 56 | > 18. **Secondary sections** -- sponsor block / product callout / event / quick links / none? |
| 57 | > 19. **Plain-text version** -- yes (recommended) / no?" |
| 58 | |
| 59 | **Defaults if skipped:** |
| 60 | |
| 61 | | Question | Default | |
| 62 | |---|---| |
| 63 | | Length | standard (500-700 words) | |
| 64 | | Format | editorial article | |
| 65 | | Issue context | one-time send | |
| 66 | | CTA URL | `[CTA_URL]` placeholder | |
| 67 | | Company name | `[YOUR BRAND]` placeholder | |
| 68 | | Tagline | none | |
| 69 | | City & country | `[CITY, COUNTRY]` placeholder | |
| 70 | | Brand color | none (use `#D8F90A` for all accents) | |
| 71 | | Secondary accent | `#D8F90A` (yellow-green default) | |
| 72 | | Background | dark | |
| 73 | | Display font | Instrument Serif (editorial serif) | |
| 74 | | Button style | pill | |
| 75 | | Visual style | editorial | |
| 76 | | Platform | generic | |
| 77 | | Tone | conversational | |
| 78 | | Personalization | none | |
| 79 | | Subject line | generate 3 options | |
| 80 | | Secondary sections | none | |
| 81 | | Plain-text | yes | |
| 82 | |
| 83 | --- |
| 84 | |
| 85 | ## Step 2.5: Design Direction (internal -- not shown to user) |
| 86 | |
| 87 | From Step 2 answers, determine: |
| 88 | - Visual character (from question 13, or inferred from tone + format if skipped) |
| 89 | - ONE unmissable element -- identify before Step 3 |
| 90 | - Template path (see Step 5) |
| 91 | |
| 92 | Character defaults if question 13 skipped: |
| 93 | - Educational / formal tone: Editorial |
| 94 | - Metrics-heavy content (stats, benchmarks, reports): Technical/data-forward |
| 95 | - Product launches, events, campaigns: Bold/campaign |
| 96 | |
| 97 | Never ask the user for design direction separately -- derive it from their answers. |
| 98 | |
| 99 | --- |
| 100 | |
| 101 | ## Step 3: Structure Design |
| 102 | |
| 103 | Read `references/html-email-guide.md` for layout rules before choosing sections. |
| 104 | |
| 105 | Based on topic + audience + CTA + secondary sections requested, select sections from this library: |
| 106 | |
| 107 | | Section | Include when | |
| 108 | |---|---| |
| 109 | | header | Always -- logo placeholder + issue number or date | |
| 110 | | hero | Always -- big headline + 1-2 sentence hook | |
| 111 | | intro | Conversational or educational tone -- short personal note | |
| 112 | | main-content | Primary article or insight (text-heavy) | |
| 113 | | stat-callout | There is a compelling stat, quote, or data point | |
| 114 | | secondary-section | Secondary CTA w |