email-marketing

Name: email-marketing
Author: mphinance

74installs3forks

How to install email-marketing?

mphinance/alpha-skills/email-marketing

$npx -y skills add mphinance/alpha-skills --skill email-marketing

Installs into the current project.

Summary

A brand product-launch email — masthead with wordmark, hero image block, headline lockup with skewed-italic accent, body copy, primary CTA, and a specifications grid. Pure HTML email layout (centered single column, table fallback). Use when the brief asks for an "email", "newslet

Files · 1

View on GitHub

SKILL.md

1	# Email Marketing Skill
2
3	Produce a single HTML email — centered, single column, no chrome around the
4	email body. Treat it like a marketing artifact: one big idea, one CTA.
5
6	## Workflow
7
8	1. Read the active DESIGN.md (injected above). Email leans on the display
9	font more than any other surface — pick the loudest type token in the DS
10	for the headline lockup.
11	2. Pick the brand + product from the brief. Generate a real wordmark, a
12	real product name, and one real benefit sentence — no placeholders.
13	3. Layout, in order, all centered inside a 600–680px column on a tinted
14	page background (so the email body looks like an email, not the page):
15	- Masthead — wordmark on the left + 3 short nav links (SHOP, JOURNAL,
16	MEMBERS) on the right. Thin underline.
17	- Hero block — a 16:9 product image placeholder. Use a DS-tinted
18	gradient or a stylized SVG silhouette of the product (shoe, bottle,
19	headphones, whatever the brief implies). Add a tiny brand stamp on the
20	top-left and a colorway tag on the bottom-left.
21	- Eyebrow — small caps, accent color, separated by `·` characters
22	(e.g. "NEW · MAX-CUSHION TRAINER · EMBER FLARE").
23	- Headline lockup — 2–3 line headline using the display font, all caps,
24	extra-tight tracking. Apply a slight skew (`transform: skew(-6deg)`) on
25	one accent word to give it a sporty parallelogram feel.
26	- Body — 2–3 sentence paragraph, left-aligned, body font.
27	- Primary CTA — solid pill or block button. One only.
28	- Specs grid — 2×2 grid of (big number + unit + label) callouts using
29	the display font for the numbers.
30	- Footer — wordmark, address line, unsubscribe + view-in-browser links.
31	4. Write a single HTML document:
32	- `<!doctype html>` through `</html>`, CSS inline.
33	- Center the column with `margin: 0 auto`. Set `body { background: <tint> }`
34	so the email-on-page metaphor reads.
35	- No external images — use inline SVG or DS-tinted gradient blocks for the
36	product photo.
37	- `data-od-id` on the masthead, hero, headline, CTA, specs.
38	5. Self-check:
39	- Email reads top to bottom in 8–10 seconds.
40	- One CTA. Accent appears at most twice (eyebrow + CTA, or headline word).
41	- Looks legible on a 480px window (column reflows, type drops one step).
42
43	## Output contract
44
45	Emit between `<artifact>` tags:
46
47	```
48	<artifact identifier="email-slug" type="text/html" title="Email — Subject Line">
49	<!doctype html>
50	<html>...</html>
51	</artifact>
52	```
53
54	One sentence before the artifact, nothing after.

People who liked this also viewed

6 picks

Type

email-marketing

74installs3forks

View on GitHub

How to install email-marketing?

mphinance/alpha-skills/email-marketing

$npx -y skills add mphinance/alpha-skills --skill email-marketing

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Email Marketing Skill
2
3	Produce a single HTML email — centered, single column, no chrome around the
4	email body. Treat it like a marketing artifact: one big idea, one CTA.
5
6	## Workflow
7
8	1. Read the active DESIGN.md (injected above). Email leans on the display
9	font more than any other surface — pick the loudest type token in the DS
10	for the headline lockup.
11	2. Pick the brand + product from the brief. Generate a real wordmark, a
12	real product name, and one real benefit sentence — no placeholders.
13	3. Layout, in order, all centered inside a 600–680px column on a tinted
14	page background (so the email body looks like an email, not the page):
15	- Masthead — wordmark on the left + 3 short nav links (SHOP, JOURNAL,
16	MEMBERS) on the right. Thin underline.
17	- Hero block — a 16:9 product image placeholder. Use a DS-tinted
18	gradient or a stylized SVG silhouette of the product (shoe, bottle,
19	headphones, whatever the brief implies). Add a tiny brand stamp on the
20	top-left and a colorway tag on the bottom-left.
21	- Eyebrow — small caps, accent color, separated by `·` characters
22	(e.g. "NEW · MAX-CUSHION TRAINER · EMBER FLARE").
23	- Headline lockup — 2–3 line headline using the display font, all caps,
24	extra-tight tracking. Apply a slight skew (`transform: skew(-6deg)`) on
25	one accent word to give it a sporty parallelogram feel.
26	- Body — 2–3 sentence paragraph, left-aligned, body font.
27	- Primary CTA — solid pill or block button. One only.
28	- Specs grid — 2×2 grid of (big number + unit + label) callouts using
29	the display font for the numbers.
30	- Footer — wordmark, address line, unsubscribe + view-in-browser links.
31	4. Write a single HTML document:
32	- `<!doctype html>` through `</html>`, CSS inline.
33	- Center the column with `margin: 0 auto`. Set `body { background: <tint> }`
34	so the email-on-page metaphor reads.
35	- No external images — use inline SVG or DS-tinted gradient blocks for the
36	product photo.
37	- `data-od-id` on the masthead, hero, headline, CTA, specs.
38	5. Self-check:
39	- Email reads top to bottom in 8–10 seconds.
40	- One CTA. Accent appears at most twice (eyebrow + CTA, or headline word).
41	- Looks legible on a 480px window (column reflows, type drops one step).
42
43	## Output contract
44
45	Emit between `<artifact>` tags:
46
47	```
48	<artifact identifier="email-slug" type="text/html" title="Email — Subject Line">
49	<!doctype html>
50	<html>...</html>
51	</artifact>
52	```
53
54	One sentence before the artifact, nothing after.

People who liked this also viewed

6 picks

Type