From html-email-designer
Framework-agnostic guide to authoring a new HTML email template from a brief. Use when the user describes an email they want ("welcome email", "newsletter", "transactional receipt") and wants help designing the structure regardless of chosen framework.
npx claudepluginhub danielrosehill/claude-code-plugins --plugin html-email-designerThis skill uses the workspace's default tool permissions.
This skill is framework-neutral. Once the structure is agreed, hand off to the matching framework skill (`foundation-emails`, `maizzle`, or `mjml`) for syntax.
Prevents silent decimal mismatch bugs in EVM ERC-20 tokens via runtime decimals lookup, chain-aware caching, bridged-token handling, and normalization. For DeFi bots, dashboards using Python/Web3, TypeScript/ethers, Solidity.
Share bugs, ideas, or general feedback.
This skill is framework-neutral. Once the structure is agreed, hand off to the matching framework skill (foundation-emails, maizzle, or mjml) for syntax.
Ask (if not already known):
Sketch the block structure in plain language before writing any markup:
[Preheader: "Your order #1234 has shipped"]
[Header: logo, centered]
[Hero: "Your order is on its way"]
[Body: order details table]
[CTA: Track package → button]
[Secondary: "Need help? Reply to this email"]
[Footer: company address, unsubscribe, social links]
Having the block list up front makes the framework syntax trivial.
Preheader (hidden, 80–90 chars) First thing to write. Without it, clients show "View in browser" — wasted.
Header Logo, usually centered, max ~160px wide. Some marketing emails skip the logo for a text-only header.
Hero The attention-grab. Options:
Body Short paragraphs, generous line-height (1.5+), 16px minimum font size. Break up with subheads.
CTA One primary CTA. Use a real button (framework-generated, not a styled link). Action verb: "Get started", "Track order", "Confirm email".
Secondary content Optional. Related links, "other things you might like", social proof.
Footer
Preheader → Logo → "Thanks for your order" → Order summary table → Shipping info → CTA (track) → Footer.
Preheader → Logo → "Welcome, {firstName}" → 1-paragraph intro → 3 steps/features list → CTA (get started) → Footer.
Preheader → Logo → Hero headline → 3–5 story blocks (image + headline + blurb + "read more") → Footer.
Preheader → Logo → "Reset your password" heading → 1-paragraph instruction → CTA (reset button) → "Didn't request this? Ignore." → Footer.
Preheader → Logo → Hero (offer + image) → 1-paragraph value prop → CTA → Fine print → Footer.
Once the structure and copy are agreed:
foundation-emails skillmaizzle skillmjml skillchoose-framework skill firstAlways cross-reference email-client-gotchas before shipping.