edm-new-project

New EDM Project — Structured Intake

The kickoff flow for any new email project in the Shadowtek email-components system. Run this before touching MJML. The email-components directory is bundled inside this plugin at email-components/. Set <EMAIL_COMPONENTS_PATH> to the full path of that directory on your machine — e.g. ~/Developer/GitHub/shadowtek-claude-plugin/plugins/shadowtek-edm/email-components.

What this skill does

When invoked, walks the user through questions to scope the project, then:

1. Generates a scoping document at <EMAIL_COMPONENTS_PATH>/intake/<brand>-<sequence>-<date>.md
2. Creates the directory structure under templates/<brand>/<sequence-type>/
3. If it's a new brand, scaffolds brand-kits/<brand>.json and runs the site inspector
4. If it's an existing brand, uses the existing brand kit
5. Drops template skeleton files for each email — pre-wired with view-in-browser, header, footer, and a basic hero structure ready to be customised
6. Runs an initial preflight to confirm the skeletons render cleanly at all viewports
7. Reports back with file paths + live preview URL once deployed

Run the intake — ask these questions in order

Use AskUserQuestion if available. If not, ask one at a time as plain questions. Always show options.

Q1. Brand

"Which brand is this project for?"

Options:

• Existing: SiteLaunch (sitelaunch.com.au) — tradie websites, Shadowtek × Lead Laundry JV
• Existing: Shadowtek (shadowtek.com.au / shadowtek.ai) — agency brand
• Existing: Londyloans (londyloans.com.au) — vehicle finance
• Existing: OPO (ourpacificoffice.com) — Pacific workforce outsourcing
• Existing: CXN (con-x-ion.com) — workforce connection
• New brand (will trigger site-inspector + new brand-kit creation)

If "New brand", ask follow-ups:

• Brand short code (3-10 chars, lowercase, used as the directory name)
• Live website URL — required for site inspection
• Brand guidelines doc path (optional — HTML, PDF, or skip)

Brand kits on disk: <EMAIL_COMPONENTS_PATH>/brand-kits/ — check here before treating a brand as "new". If a .json exists, it's an existing brand.

Q2. Sequence type

"What kind of email sequence is this?"

Options:

• Welcome / Onboarding (typically 3-7 emails, post-signup or post-purchase)
• Sales Nurture (3-6 emails, post-discovery-call follow-up)
• Monthly Newsletter (single email, recurring)
• Promotional EDM (one-off, image-heavy)
• Re-engagement / Win-back (3-4 emails for lapsed contacts)
• Transactional (welcome, password reset, receipt — usually 1-2 emails)
• Custom — describe in 1 sentence

Directory name mapping: welcome-nurture, sales-nurture, monthly-newsletter, promo-<name>, winback, transactional, custom-<name>.

Q3. Number of emails

"How many emails in the sequence?"

Options: 1, 2, 3, 4, 5, 6, 7, 8+ (if 8+, ask for exact count)

Q4. Email purposes (loop for N emails)

For each email in the sequence, ask:

"Email N — what's its job?"

Options:

• Welcome / Lead magnet delivery (deliver promised asset + set expectations)
• Brand story / About us (founder story, why we exist)
• Education / Strategy (teach a concept that frames your offer)
• Showcase / Portfolio (visual proof — past work, designs, results)
• Features & benefits (what they get, with bento card grid)
• Case study / Social proof (one customer's story with outcomes)
• Offer / Pricing / Guarantee (the conversion email — price, terms, guarantee)
• Book a call / Consultation invite (founder-led close)
• Newsletter / Monthly update (mixed-content recap)
• Re-engagement ("We miss you" / "Still interested?")
• Transactional (receipt, password reset, account update)
• Custom — describe in 1 sentence

These purposes map to known template patterns from the reference repo:

Purpose	Reference template
Welcome / Lead magnet	opo/welcome-nurture/01-lead-magnet-delivery or sitelaunch/onboarding/01-welcome
Brand story	opo/welcome-nurture/02-brand-story
Education / Strategy	opo/welcome-nurture/03-diversified-location-strategy
Showcase / Portfolio	sitelaunch/onboarding/02-design-showcase
Features & benefits	sitelaunch/onboarding/03-features-benefits
Case study / Social proof	opo/welcome-nurture/05-client-results
Offer / Pricing	sitelaunch/onboarding/04-offer-guarantee
Book a call	opo/welcome-nurture/06-book-call
Newsletter	(build from scratch with bento card patterns)
Re-engagement	(build from scratch)
Transactional	(build minimal)

Q5. Hero imagery source

"Where will hero imagery come from?"

Options:

• Live brand site (auto-extract real photography via site inspector — best brand match)
• Brand-provided assets (path to a folder of images the client will provide)
• AI-generated via nano-banana (Shadowtek's Gemini image gen — good for product/scene shots)
• Unsplash placeholders (free, generic — good for first draft, swap later)
• None / text-only (clean text-led templates, no hero photography)

Q6. Deployment target

"Where should the compiled HTML go after build?"

Options:

• Cloudflare Pages — email previews (default — shareable client review URL)
• Don't deploy yet (build locally only — useful for early iteration)

Q7. Send platform (optional — for merge-field transforms)

"Which platform will these emails ultimately be sent from?"

Options:

• GoHighLevel / GHL ({{contact.first_name}}) — most common for Shadowtek clients
• MailerLite ({$name})
• HubSpot ({{ contact.firstname }})
• Mailchimp (*|FNAME|*)
• Klaviyo ({{ first_name|default:'there' }})
• Standard / SendGrid (keep {{first_name}} as-is)
• Not deciding yet (default to Standard)

After all questions answered — generate the scoping doc

Write to <EMAIL_COMPONENTS_PATH>/intake/<brand>-<sequence>-YYYY-MM-DD.md:

# EDM Intake: <Brand> · <Sequence Name>

**Date:** YYYY-MM-DD
**Brand:** <name> (<short_code>)
**Sequence type:** <type>
**Email count:** N
**Hero source:** <source>
**Deploy target:** <target>
**Send platform:** <platform>

## Emails

| # | Purpose | Reference template | Status |
| --- | --- | --- | --- |
| 01 | <purpose> | <ref> | skeleton |
| 02 | ... | ... | skeleton |

## Build plan

1. <For new brand:> Run `node scripts/inspect-<brand>-site.mjs` to capture brand DNA
2. <For new brand:> Create `brand-kits/<brand>.json`
3. <For new brand:> Process logo + imagery via `process-<brand>-assets.py`
4. Build N skeleton MJML files at `templates/<brand>/<sequence>/<NN>-<purpose>.mjml`
5. `npm run build` to verify clean compile
6. `npm run preflight:fast` to confirm no layout issues
7. <If deploying:> `npm run deploy` → live URLs

## Acceptance criteria

- [ ] All N emails compile cleanly (no MJML warnings)
- [ ] Preflight passes all checks at 4 viewports
- [ ] Mobile rendering verified visually
- [ ] Compliance footer (unsubscribe + sender info) on every email
- [ ] View-in-browser link in every email header
- [ ] Hero imagery licensed/sourced

After scoping doc — execute the build plan

1. New brand path:

   • Copy scripts/inspect-opo-site.mjs → scripts/inspect-<brand>-site.mjs, edit URL
   • Run it — captures screenshots + computed styles to refs/<brand>-site/
   • Critical: read the screenshots — they reveal layout patterns that CSS extraction misses (alternating section bands, headline phrase-highlights, card styles)
   • Create brand-kits/<brand>.json based on real tokens
   • Pull real imagery from the live site (logo, founder portraits if any, hero photography)
   • Generate brand-coloured icon set if the brand uses iconography

2. Existing brand path:

   • Skip site inspection
   • Use existing brand-kits/<brand>.json and assets

3. Both paths — create template skeletons:

   • For each email in the sequence, create templates/<brand>/<sequence>/<NN>-<slug>.mjml
   • Start from the reference template in the table above (copy from reference brand, adapt tokens)
   • Pre-wire: <mj-include path="../../../components/view-in-browser.mjml" />, brand header, hero section with placeholder copy, brand footer
   • Mark each section with a comment indicating what copy/imagery needs filling in

4. Compile + preflight:

   • cd <EMAIL_COMPONENTS_PATH> && npm run build
   • npm run preflight:fast
   • Open preview at http://localhost:8765/ (run cd build && python3 -m http.server 8765 & if needed)

5. Deploy if requested:

   • npm run deploy
   • Report back the live preview URLs

Common patterns to apply

• Header: single mj-column containing raw HTML <table> with two <td> cells. CSS media query at <=480px flips TDs to display: block for mobile stacking. Never try to stack two mj-column siblings via @media — MJML's table-row layout overrides it.
• 4-up stat row: single mj-column with raw HTML <table> containing 4 <td> cells at width="25%". CSS media query at <=480px makes TDs display: inline-block; width: 50% for 2×2 mobile grid.
• 3-up bento cards: plain mj-column width="33%" with css-class="bento-card bento-equal stack-on-mobile". The bento-equal class forces equal heights via height: 280px on the inner td.
• Image-text splits: 2× mj-column width="48%" / 52%". Auto-stack on mobile.
• View-in-browser: <mj-include path="../../../components/view-in-browser.mjml" /> immediately after <mj-body>.
• Compliance footer: always include via <mj-include path="../../../components/footer.mjml" />. Must have unsubscribe link + sender email visible.

Output to user when complete

✓ Project scoped: <Brand> · <Sequence> (N emails)
✓ Brand kit: brand-kits/<brand>.json (<new|existing>)
✓ Skeletons created: templates/<brand>/<sequence>/01-...mjml through NN-...mjml
✓ Build: clean (N templates compiled)
✓ Preflight: N pass / 0 fail
✓ Deployed: https://email-previews.pages.dev/<brand>/<sequence>/

Next step: fill in copy and hero imagery in each skeleton, then re-run
  npm run build && npm run preflight:fast && npm run deploy

Linked skills

• branded-edm-builder — the MJML design system + repo conventions
• email-preflight — the QA system this skill triggers at the end