html-email-template

Generate HTML emails with inline styles and a 680px max width.

Updated Apr 24, 2026
One-click install
npx skills add https://github.com/Kazuya0628/Quotation-Work-Automation-System --skill html-email-template
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: html-email-template
Source: https://github.com/Kazuya0628/Quotation-Work-Automation-System/tree/main/.github/skills/html-email-template
Command: npx skills add https://github.com/Kazuya0628/Quotation-Work-Automation-System --skill html-email-template

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

HTML メールテンプレートのデザインシステムは、エージェント Instructions や Power Automate フローで使用されるリッチな HTML メールの表現を標準化します。メールクライアント間のレンダリング差を減らし、デザインの一貫性と生産性を向上させます。

Core Features & Use Cases

  • インラインスタイルのみ: メールクライアント互換性を担保します。
  • 最大幅680px、テーブルレイアウト推奨: 安定したレンダリングを実現します。
  • カラーパレットとタイポグラフィの統一: ブランド一貫性を維持します。
  • 用途例: Copilot Studio や Work IQ MCP の通知メールを生成する際に、Outlook/ Gmail/ Teams での正確な表示を保証します。

Quick Start

Use the html-email-template skill to generate a ready-to-send HTML email with the standard header, body, and footer.

Frequently Asked Questions about html-email-template

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create HTML email templates that render correctly in Outlook and Gmail?

HTML email templates that render correctly in Outlook and Gmail require inline styles, a 680px max width, and table layouts to prevent external CSS rendering failures and ensure consistent display across clients.

Why does my HTML email break in Outlook when using external CSS?

HTML email breaks in Outlook when using external CSS because Outlook lacks robust support for external stylesheets. Enforcing inline styles directly on HTML elements ensures formatting persists and renders safely across Outlook, Gmail, and Teams.

Can I use HTML email templates in Power Automate flows?

Yes, you can use HTML email templates in Power Automate flows by applying a standardized design system that enforces inline styles and a defined color palette, ensuring generated notification emails render consistently across Outlook, Gmail, and Teams.

What is the best way to standardize email typography and colors across different email clients?

The best way to standardize email typography and colors across different email clients is to apply a predefined design system with a references-based component model, enforcing inline styles and a strict color palette to maintain brand consistency.

Do I need a table layout for HTML emails to work in Teams and Gmail?

Yes, a table layout is recommended for HTML emails to work reliably in Teams and Gmail. Table-based layouts with a 680px maximum width provide structural stability and prevent rendering shifts where modern CSS flexbox or grid is unsupported.

What are the limitations of using inline styles for HTML email templates?

The limitation of using inline styles for HTML email templates is that styling must be applied repeatedly to individual HTML elements rather than via classes, which increases file size but guarantees compatibility across restrictive clients like Outlook.