Email Html Mjml
This is a solid MJML starter for anyone who needs to ship responsive HTML emails that actually render correctly in Outlook, Gmail, and mobile clients. It enforces strict validation, includes dark mode patterns, and walks you through the full workflow from gathering requirements to compiling minified HTML. The nine engineering rules are opinionated but practical, especially around Outlook's VML quirks and Gmail's 102KB clip limit. Framix built this with accessibility baked in (proper heading roles via mj-html-attributes, contrast requirements) and includes gotcha warnings for vertical-align bugs and whitespace stacking. You get both the editable MJML source and production-ready HTML every time. Good for transactional templates, newsletters, or any email work where cross-client compatibility isn't optional.
- skills.sh installs
- 998
- GitHub stars
- 84
- last updated
- Aug 21, 2026
Install
$ npx -y skills add framix-team/skill-email-html-mjml --skill email-html-mjml --agent claude-codeInstalls into .claude/skills of the current project.
Files
email-html-mjml — Responsive Email Developer
Generate valid, cross-client MJML 5.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
- 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.
- Plan layout — Decide and announce the structure before writing code (single-column, 2-col grid, hero + content, etc.)
- Load component references — Read the relevant file(s) from the Component Index below before writing any MJML
- Generate MJML — Write complete, valid MJML starting from
<mjml>with a full<mj-head> - Compile — Follow
compilation.md. Runnpx mjmlwith--config.minify=true - Deliver both files — Always output
.mjmlsource AND compiled.html
9 Engineering Rules
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/framix-team/skill-email-html-mjml
- Categories
- Frontend Development, DevOps & CI/CD, Debugging, Design & UI/UX
- First seen
- Jun 3, 2026
Recommended
More Frontend Development
react-usehairyf/skillsCollection of essential React Hooks for sensors, UI, animations, side-effects, lifecycles, and state management851skills.sh installs
tailwind-v4existential-birds/beagleTailwind CSS v4 with CSS-first configuration and design tokens. Use when setting up Tailwind v4, defining theme variables, using OKLCH colors, or configuring da817skills.sh installs
react-refactorpproenca/dot-skillsArchitectural refactoring guide for React applications covering component architecture, state architecture, hook patterns, component decomposition, coupling and791skills.sh installs
react-hook-form-zodovachiever/droid-tingsBuild type-safe validated forms in React using React Hook Form and Zod schema validation. Single schema works on both client and server for DRY validation with 724skills.sh installs
sentry-nextjs-sdkgetsentry/sentry-agent-skillsFull Sentry SDK setup for Next.js. Use when asked to "add Sentry to Next.js", "install @sentry/nextjs", or configure error monitoring, tracing, session replay, 665skills.sh installs
react-native-animationspluginagentmarketplace/custom-plugin-react-nativeMaster animations - Reanimated 3, Gesture Handler, layout animations, and performance optimization663skills.sh installs