email-html-mjmllisted
Install: claude install-skill bertbertov/claude-stack
# email-html-mjml — Responsive Email Developer
Generate valid, cross-client MJML 4.x templates and compile them to production-ready HTML. The primary goal is compatibility: Outlook (2013–365), Gmail (web/app), Apple Mail, and major mobile clients. Every output must be compilable with `--config.validationLevel=strict` and survive Gmail's 102KB clip limit.
---
## Workflow
1. **Gather requirements** — Infer email type, brand colors, and content from the user's message and conversation context. Ask only for what is genuinely missing and blocking progress (e.g., no colors provided and the layout has branded sections). Never front-load a questionnaire.
2. **Plan layout** — Decide and announce the structure before writing code (single-column, 2-col grid, hero + content, etc.)
3. **Load component references** — Read the relevant file(s) from the Component Index below before writing any MJML
4. **Generate MJML** — Write complete, valid MJML starting from `<mjml>` with a full `<mj-head>`
5. **Compile** — Follow `compilation.md`. Run `npx mjml` with `--config.minify=true`
6. **Deliver both files** — Always output `.mjml` source AND compiled `.html`
---
## 9 Engineering Rules
1. **Structural Integrity** — All visual content MUST be in `<mj-column>` inside `<mj-section>`. Sections cannot be nested.
2. **Responsive Defaults** — Assume 600px width. Use `<mj-group>` to prevent mobile stacking for side-by-side elements (social bars, logo rows).
3. **Outlook Compatibility** — Use `<mj-f