The /formatted-email command enables you to create HTML email snippets that are compatible with email clients. Perfect for:

• Creating newsletter templates
• Designing promotional emails
• Building notification emails
• Formatting announcements
• Professional email layouts

​

Basic Usage

Use the command to create email HTML:

/formatted-email create newsletter template with blue header

/formatted-email design promotional email for product launch

/formatted-email build notification email with call-to-action button

​

Key Features

​

Email Compatibility

• Table-based layouts
• Inline CSS styles
• Cross-client support
• No JavaScript
• Maximum compatibility

​

Professional Design

• Clean layouts
• Responsive elements
• Brand colors
• Typography control
• Visual hierarchy

​

Ready-to-Use

• Copy-paste ready
• Gmail compatible
• Outlook friendly
• Mobile responsive
• Professional appearance

​

Example Commands

​

Newsletter Template

/formatted-email create monthly newsletter with company branding

​

Promotional Email

/formatted-email design sale announcement with discount code

​

Welcome Email

/formatted-email build welcome message for new subscribers

​

Event Invitation

/formatted-email create webinar invitation with registration button

​

Status Update

/formatted-email design project status update email

​

Design Principles

​

Table-Based Layout

• Use tables for structure
• Avoid div-based layouts
• Ensure cross-client compatibility
• Maintain consistent spacing
• Support older email clients

​

Inline Styles

• All CSS must be inline
• No external stylesheets
• No <style> blocks
• Direct attribute styling
• Maximum compatibility

​

Email Client Support

• Gmail compatibility
• Outlook support
• Apple Mail friendly
• Mobile responsive
• Cross-platform consistency

​

HTML Structure

​

Basic Template

<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center">
      <table width="600" cellpadding="0" cellspacing="0" border="0">
        <!-- Email content here -->
      </table>
    </td>
  </tr>
</table>

​

Header Section

• Company branding
• Logo placement
• Background colors
• Typography hierarchy
• Contact information

​

Content Area

• Main message
• Structured content
• Lists and bullets
• Images and media
• Call-to-action buttons

​

Footer Section

• Legal information
• Unsubscribe links
• Contact details
• Social media links
• Copyright notices

​

Styling Guidelines

​

Colors

• Use hex color codes
• Ensure contrast ratios
• Brand consistency
• Accessibility compliance
• Professional palette

​

Typography

• Web-safe fonts
• Font-family fallbacks
• Readable sizes
• Line height spacing
• Consistent hierarchy

​

Buttons

• Inline-block display
• Padding and margins
• Background colors
• Border radius
• Hover effects (limited)

​

Best Practices

1. Keep It Simple

   • Minimal design approach
   • Clear visual hierarchy
   • Essential content only
   • Easy to scan

2. Table Layouts

   • Use tables for structure
   • Nested tables for complex layouts
   • Consistent cell padding
   • Proper alignment

3. Inline Styles

   • All CSS inline
   • No external dependencies
   • Specific style declarations
   • Override client defaults

4. Testing

   • Test across email clients
   • Check mobile rendering
   • Verify link functionality
   • Validate HTML structure

​

Common Elements

​

Headers

<tr>
  <td bgcolor="#209cee" style="padding: 20px; text-align: center;">
    <h1 style="color: #ffffff; margin: 0; font-size: 24px;">Title</h1>
  </td>
</tr>

​

Call-to-Action Buttons

<a href="https://example.com" style="display: inline-block; padding: 10px 20px; background-color: #209cee; color: #ffffff; text-decoration: none; border-radius: 4px;">Click Here</a>

​

Content Sections

<tr>
  <td style="padding: 20px;">
    <p style="margin-top: 0;">Content goes here</p>
  </td>
</tr>

​

Lists

<ul style="padding-left: 20px; margin-bottom: 25px;">
  <li style="margin-bottom: 10px;">List item</li>
</ul>

​

Email Types

​

Newsletter

• Header with branding
• Multiple content sections
• Social media links
• Unsubscribe footer

​

Promotional

• Eye-catching header
• Product highlights
• Discount codes
• Clear call-to-action

​

Transactional

• Clean, simple design
• Important information
• Action buttons
• Professional appearance

​

Welcome

• Friendly greeting
• Getting started info
• Next steps
• Support contacts

​

Limitations

​

No JavaScript

• Email clients block scripts
• Use static content only
• Interactive elements limited
• Form submissions external

​

CSS Restrictions

• No external stylesheets
• Limited pseudo-selectors
• No animations (mostly)
• Inline styles required

​

Image Considerations

• May be blocked by default
• Alt text important
• Optimize file sizes
• Use web-safe formats

​

Output Format

The skill outputs clean HTML snippets that are:

• Ready to copy-paste
• Email client compatible
• Properly formatted
• Professional appearance
• Cross-platform tested

​

Testing Tips

​

Email Client Testing

• Test in Gmail
• Check Outlook compatibility
• Verify Apple Mail rendering
• Mobile device testing
• Dark mode considerations

​

Validation

• HTML validation
• Link functionality
• Image loading
• Text readability
• Accessibility compliance

​

Tips

• Keep designs simple and clean for maximum compatibility
• Always use inline CSS styles for email clients
• Test across multiple email platforms before sending
• Use table-based layouts instead of modern CSS flexbox/grid
• Include alt text for images as they may be blocked
• Maintain consistent branding and professional appearance