@opendirectory.dev/skills 0.1.51 → 0.1.52
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/registry.json +11 -0
- package/skills/email-newsletter/README.md +98 -0
- package/skills/email-newsletter/SKILL.md +395 -0
- package/skills/email-newsletter/evals/evals.json +35 -0
- package/skills/email-newsletter/references/design-system.md +390 -0
- package/skills/email-newsletter/references/html-email-guide.md +235 -0
- package/skills/email-newsletter/references/platform-compat.md +154 -0
- package/skills/email-newsletter/references/subject-line-formulas.md +207 -0
- package/skills/email-newsletter/templates/dark-newsletter.html +307 -0
- package/skills/email-newsletter/templates/light-newsletter.html +166 -0
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
7
|
+
<title>[SUBJECT]</title>
|
|
8
|
+
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
9
|
+
<!--[if mso]>
|
|
10
|
+
<noscript><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml></noscript>
|
|
11
|
+
<![endif]-->
|
|
12
|
+
<style>
|
|
13
|
+
@media only screen and (max-width: 600px) {
|
|
14
|
+
.container { width: 100% !important; }
|
|
15
|
+
.hero-h1 { font-size: 30px !important; }
|
|
16
|
+
.h2 { font-size: 28px !important; }
|
|
17
|
+
.pad { padding-left: 24px !important; padding-right: 24px !important; }
|
|
18
|
+
}
|
|
19
|
+
</style>
|
|
20
|
+
</head>
|
|
21
|
+
<body style="margin:0;padding:0;background-color:#F0F0EE;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
|
|
22
|
+
|
|
23
|
+
<!-- Preview text -->
|
|
24
|
+
<span style="display:none;max-height:0;overflow:hidden;opacity:0;font-size:1px;color:#F0F0EE;">[PREVIEW TEXT]</span>
|
|
25
|
+
|
|
26
|
+
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#F0F0EE;">
|
|
27
|
+
<tr>
|
|
28
|
+
<td align="center" style="padding:32px 16px;">
|
|
29
|
+
|
|
30
|
+
<table class="container" width="600" cellpadding="0" cellspacing="0" border="0" style="max-width:600px;width:100%;background-color:#FFFFFF;">
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
<!-- ══════════════════════════════════════════════════════
|
|
34
|
+
SECTION: HEADER
|
|
35
|
+
═══════════════════════════════════════════════════════ -->
|
|
36
|
+
<tr>
|
|
37
|
+
<td bgcolor="#1A1A1A" style="background-color:#1A1A1A;padding:20px 40px;">
|
|
38
|
+
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
|
39
|
+
<tr>
|
|
40
|
+
<td style="font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-size:20px;font-weight:400;color:#FFFFFF;letter-spacing:-0.01em;">[BRAND NAME]</td>
|
|
41
|
+
<td align="right" style="font-family:Inter,Arial,Helvetica,sans-serif;font-size:11px;font-weight:500;color:#888888;letter-spacing:0.14em;text-transform:uppercase;white-space:nowrap;">Issue #[N] | [DATE]</td>
|
|
42
|
+
</tr>
|
|
43
|
+
</table>
|
|
44
|
+
</td>
|
|
45
|
+
</tr>
|
|
46
|
+
|
|
47
|
+
<!-- Brand strip -->
|
|
48
|
+
<tr>
|
|
49
|
+
<td bgcolor="[BRAND_COLOR]" style="background-color:[BRAND_COLOR];height:3px;font-size:1px;line-height:1px;"> </td>
|
|
50
|
+
</tr>
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
<!-- ══════════════════════════════════════════════════════
|
|
54
|
+
SECTION: HERO (light — white bg)
|
|
55
|
+
═══════════════════════════════════════════════════════ -->
|
|
56
|
+
<tr>
|
|
57
|
+
<td class="pad" bgcolor="#FFFFFF" style="background-color:#FFFFFF;padding:56px 40px 48px;">
|
|
58
|
+
<p style="margin:0 0 16px 0;font-family:Inter,Arial,Helvetica,sans-serif;font-size:11px;font-weight:600;color:[BRAND_COLOR];letter-spacing:0.22em;text-transform:uppercase;">[CATEGORY LABEL]</p>
|
|
59
|
+
<h1 class="hero-h1" style="margin:0 0 20px 0;font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-size:46px;font-weight:400;line-height:1.05;color:#111111;letter-spacing:-0.02em;">[HERO HEADLINE]</h1>
|
|
60
|
+
<p style="margin:0 0 32px 0;font-family:Inter,Arial,Helvetica,sans-serif;font-size:17px;line-height:1.6;color:#666666;">[HERO HOOK]</p>
|
|
61
|
+
<table cellpadding="0" cellspacing="0" border="0">
|
|
62
|
+
<tr>
|
|
63
|
+
<td align="center" bgcolor="#111111" style="background-color:#111111;border-radius:8px;">
|
|
64
|
+
<a href="[CTA_URL]" target="_blank" style="display:inline-block;padding:14px 32px;font-family:Inter,Arial,Helvetica,sans-serif;font-size:15px;font-weight:600;color:#FFFFFF;text-decoration:none;letter-spacing:0.01em;">[CTA BUTTON TEXT] →</a>
|
|
65
|
+
</td>
|
|
66
|
+
</tr>
|
|
67
|
+
</table>
|
|
68
|
+
</td>
|
|
69
|
+
</tr>
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
<!-- ══════════════════════════════════════════════════════
|
|
73
|
+
SECTION: INTRO
|
|
74
|
+
═══════════════════════════════════════════════════════ -->
|
|
75
|
+
<tr>
|
|
76
|
+
<td class="pad" bgcolor="#FFFFFF" style="background-color:#FFFFFF;padding:32px 40px 0;">
|
|
77
|
+
<p style="margin:0;font-family:Inter,Arial,Helvetica,sans-serif;font-size:16px;line-height:1.7;color:#555555;">[INTRO TEXT]</p>
|
|
78
|
+
</td>
|
|
79
|
+
</tr>
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
<!-- DIVIDER -->
|
|
83
|
+
<tr>
|
|
84
|
+
<td bgcolor="#FFFFFF" style="background-color:#FFFFFF;padding:32px 40px 0;">
|
|
85
|
+
<hr style="border:none;border-top:1px solid #EEEEEE;margin:0;">
|
|
86
|
+
</td>
|
|
87
|
+
</tr>
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
<!-- ══════════════════════════════════════════════════════
|
|
91
|
+
SECTION: MAIN CONTENT
|
|
92
|
+
═══════════════════════════════════════════════════════ -->
|
|
93
|
+
<tr>
|
|
94
|
+
<td class="pad" bgcolor="#FFFFFF" style="background-color:#FFFFFF;padding:32px 40px 8px;">
|
|
95
|
+
<p style="margin:0 0 18px 0;font-family:Inter,Arial,Helvetica,sans-serif;font-size:15px;line-height:1.75;color:#444444;"><strong style="color:#111111;font-weight:700;">[BOLD CALLOUT]</strong> [paragraph]</p>
|
|
96
|
+
<p style="margin:0 0 18px 0;font-family:Inter,Arial,Helvetica,sans-serif;font-size:15px;line-height:1.75;color:#444444;"><strong style="color:#111111;font-weight:700;">[BOLD CALLOUT]</strong> [paragraph]</p>
|
|
97
|
+
<p style="margin:0;font-family:Inter,Arial,Helvetica,sans-serif;font-size:15px;line-height:1.75;color:#444444;"><strong style="color:#111111;font-weight:700;">[BOLD CALLOUT]</strong> [paragraph]</p>
|
|
98
|
+
</td>
|
|
99
|
+
</tr>
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
<!-- ══════════════════════════════════════════════════════
|
|
103
|
+
SECTION: STAT CALLOUT (light version)
|
|
104
|
+
═══════════════════════════════════════════════════════ -->
|
|
105
|
+
<tr>
|
|
106
|
+
<td class="pad" bgcolor="#FFFFFF" style="background-color:#FFFFFF;padding:24px 40px;">
|
|
107
|
+
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
|
108
|
+
<tr>
|
|
109
|
+
<td bgcolor="#F8F8F6" style="background-color:#F8F8F6;border-left:3px solid [BRAND_COLOR];padding:22px 24px;border-radius:0 6px 6px 0;">
|
|
110
|
+
<p style="margin:0 0 8px 0;font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-size:22px;font-weight:400;line-height:1.3;color:#111111;">"[STAT OR QUOTE]"</p>
|
|
111
|
+
<p style="margin:0;font-family:Inter,Arial,Helvetica,sans-serif;font-size:12px;color:#999999;">[SOURCE]</p>
|
|
112
|
+
</td>
|
|
113
|
+
</tr>
|
|
114
|
+
</table>
|
|
115
|
+
</td>
|
|
116
|
+
</tr>
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
<!-- ══════════════════════════════════════════════════════
|
|
120
|
+
SECTION: CTA CALLOUT CARD (light — dark card)
|
|
121
|
+
═══════════════════════════════════════════════════════ -->
|
|
122
|
+
<tr>
|
|
123
|
+
<td class="pad" bgcolor="#FFFFFF" style="background-color:#FFFFFF;padding:8px 32px 48px;">
|
|
124
|
+
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
|
125
|
+
<tr>
|
|
126
|
+
<td bgcolor="#111111" style="background-color:#111111;border-radius:12px;padding:48px 40px;text-align:center;">
|
|
127
|
+
<h2 style="margin:0 0 12px 0;font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-size:36px;font-weight:400;line-height:1.05;color:#F2F2F2;letter-spacing:-0.02em;">[CTA CALLOUT HEADLINE]</h2>
|
|
128
|
+
<p style="margin:0 0 28px 0;font-family:Inter,Arial,Helvetica,sans-serif;font-size:16px;line-height:1.55;color:#AAAAAA;">[CTA CALLOUT BODY]</p>
|
|
129
|
+
<table cellpadding="0" cellspacing="0" border="0" style="margin:0 auto;">
|
|
130
|
+
<tr>
|
|
131
|
+
<td align="center" bgcolor="[BRAND_COLOR]" style="background-color:[BRAND_COLOR];border-radius:8px;">
|
|
132
|
+
<a href="[CTA_URL]" target="_blank" style="display:inline-block;padding:14px 32px;font-family:Inter,Arial,Helvetica,sans-serif;font-size:15px;font-weight:700;color:#0A0A0A;text-decoration:none;">[CTA BUTTON TEXT]</a>
|
|
133
|
+
</td>
|
|
134
|
+
</tr>
|
|
135
|
+
</table>
|
|
136
|
+
</td>
|
|
137
|
+
</tr>
|
|
138
|
+
</table>
|
|
139
|
+
</td>
|
|
140
|
+
</tr>
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
<!-- ══════════════════════════════════════════════════════
|
|
144
|
+
SECTION: FOOTER (light)
|
|
145
|
+
═══════════════════════════════════════════════════════ -->
|
|
146
|
+
<tr>
|
|
147
|
+
<td bgcolor="#F8F8F6" style="background-color:#F8F8F6;border-top:1px solid #EEEEEE;padding:36px 40px 44px;">
|
|
148
|
+
<p style="margin:0 0 6px 0;font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-size:18px;font-weight:400;color:#111111;text-align:center;">[BRAND NAME]</p>
|
|
149
|
+
<p style="margin:0 0 24px 0;font-family:Inter,Arial,Helvetica,sans-serif;font-size:12px;line-height:1.5;color:#AAAAAA;text-align:center;">[COMPANY NAME] · [CITY, COUNTRY]</p>
|
|
150
|
+
<hr style="border:none;border-top:1px solid #E8E8E8;margin:0 auto 24px;width:96px;">
|
|
151
|
+
<p style="margin:0;font-family:Inter,Arial,Helvetica,sans-serif;font-size:12px;line-height:1.5;color:#BBBBBB;text-align:center;">
|
|
152
|
+
<a href="[UNSUBSCRIBE_URL]" style="color:#AAAAAA;text-decoration:underline;">Unsubscribe</a>
|
|
153
|
+
|
|
|
154
|
+
<a href="[PREFERENCES_URL]" style="color:#AAAAAA;text-decoration:underline;">Manage preferences</a>
|
|
155
|
+
</p>
|
|
156
|
+
</td>
|
|
157
|
+
</tr>
|
|
158
|
+
|
|
159
|
+
|
|
160
|
+
</table>
|
|
161
|
+
</td>
|
|
162
|
+
</tr>
|
|
163
|
+
</table>
|
|
164
|
+
|
|
165
|
+
</body>
|
|
166
|
+
</html>
|