From html-email-designer
Build responsive HTML emails using Foundation for Emails (ZURB) — Inky markup, Sass theming, Gulp build. Use when the user has chosen Foundation as their email framework, or is working in an existing Foundation for Emails project.
How this skill is triggered — by the user, by Claude, or both
Slash command
/html-email-designer:foundation-emailsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Foundation for Emails (https://github.com/foundation/foundation-emails) is ZURB's responsive email framework. Uses Inky (semantic tags → tables), Sass for theming, and Gulp for build/inline.
Foundation for Emails (https://github.com/foundation/foundation-emails) is ZURB's responsive email framework. Uses Inky (semantic tags → tables), Sass for theming, and Gulp for build/inline.
git clone https://github.com/foundation/foundation-emails-template.git my-emails
cd my-emails
rm -rf .git
npm install # may need --legacy-peer-deps on modern Node
git init && git add -A && git commit -m "Initial scaffold"
npm start # BrowserSync at http://localhost:3000
The ZURB template is legacy — node-sass often needs rebuilding. Prefer Node 14–16 if available; on Node 18+ try npm install --legacy-peer-deps and fall back to npm rebuild node-sass if needed.
src/
├── assets/
│ ├── img/
│ └── scss/
│ ├── _settings.scss # Foundation variables (palette, typography, spacing, buttons)
│ └── app.scss # Custom styles
├── layouts/
│ └── default.html # Panini wrapper
├── pages/
│ └── *.html # Templates (Inky markup)
└── partials/
└── *.html # Reusable fragments (header, footer)
dist/ # Compiled, inlined output
| Tag | Compiles to | Use for |
|---|---|---|
<container> | 580px outer wrapper table | Wrap the email body |
<row> | 12-col grid row | Group columns horizontally |
<columns small="12" large="6"> | Responsive column | Columns in a row must sum to 12 |
<button href="..."> | Bulletproof VML button | Primary/secondary CTAs |
<callout> | Padded/coloured panel | Highlights, tips, warnings |
<menu><item href="">X</item></menu> | Horizontal nav | Header links, footer nav |
<spacer size="16"> | Vertical spacing row | Replaces margin/padding hacks |
<wrapper> | Full-width bleed section | Coloured bands outside container |
<center> | Centers block children | Hero images, buttons |
<h-line> | Horizontal rule | Dividers |
---
subject: "Your subject line"
---
<!-- preheader -->
<span class="preheader" style="display:none !important;visibility:hidden;mso-hide:all;font-size:1px;color:#ffffff;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">
Preview text — 80–90 chars
</span>
<container>
<row class="header">
<columns small="12">
<center><img src="{{root}}assets/img/logo.png" alt="Company" width="140"></center>
</columns>
</row>
<row>
<columns small="12">
<h1>Headline</h1>
<p>Body copy.</p>
<center>
<button href="https://example.com" class="expand">Call to action</button>
</center>
</columns>
</row>
<wrapper class="footer">
<row>
<columns small="12">
<center>
<menu>
<item href="https://example.com/unsubscribe">Unsubscribe</item>
<item href="https://example.com/preferences">Preferences</item>
</menu>
</center>
</columns>
</row>
</wrapper>
</container>
Edit src/assets/scss/_settings.scss:
$primary-color: #2c3e50;
$secondary-color: #e74c3c;
$global-width: 580px;
$body-background: #f3f3f3;
$container-background: #ffffff;
$global-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
$header-color: #0a0a0a;
$button-background: $primary-color;
$button-color: #ffffff;
$button-padding: 8px 16px 8px 16px;
$button-radius: 3px;
Custom component styles go in app.scss — remember styles must be inlinable (avoid complex selectors, pseudo-classes beyond :hover).
npm start # dev: watch + BrowserSync preview
npm run build # production: Inky compile + Sass + Juice inline → dist/
After npm run build, dist/*.html contains the final inlined HTML ready to paste into an ESP or send via API.
{{root}} paths breaking in dist/ → Panini context not set; check panini task in gulpfile.npm rebuild node-sass or switch to a version manager (nvm) and use Node 16.inliner task ran (npm run build, not npm start)._settings.scss variables must be set before @import 'foundation-emails'.Hand off to email-client-gotchas for cross-client quirks and inline-and-test for preview/send workflow.
npx claudepluginhub danielrosehill/claude-code-plugins --plugin html-email-designerProvides CDSS development patterns for drug interaction checking, dose validation, clinical scoring (NEWS2, qSOFA), and alert classification integrated into EMR workflows.