OpenSkillIndex← back to search
claude-code

Claude-skill-registry email-formatting

Format emails with HTML templates using neo-brutal design aesthetic. Use when creating email reports, summaries, or formatted messages. Maintains consistent visual style across all communications.

install
source · Clone the upstream repo
git clone https://github.com/majiayu000/claude-skill-registry
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/email-formatting" ~/.claude/skills/majiayu000-claude-skill-registry-email-formatting && rm -rf "$T"
manifest: skills/data/email-formatting/SKILL.md
source content

Email Formatting

Format emails with our signature neo-brutal design aesthetic.

Quick Start

For plain text emails, use directly:

# Plain text - no formatting needed
text = "Your message here"

For HTML emails, use templates:

python scripts/format_email.py --template daily-report --data data.json

Neo-Brutal Design Principles

Our email design follows neo-brutal aesthetic:

  • Bold typography: Strong, thick fonts
  • High contrast: Black text on white, bright accent colors
  • Thick borders: 3-4px solid black borders
  • Flat colors: No gradients, solid blocks
  • Geometric shapes: Rectangles, squares
  • Brutalist layout: Grid-based, chunky sections

Available Templates

1. Daily Report (
daily-report
)

For daily activity summaries (GitHub, Fieldy, etc.)

Data structure:

{
  "title": "Daily GitHub Report",
  "date": "2026-01-04",
  "summary": "Brief overview",
  "sections": [
    {
      "title": "Commits",
      "content": "HTML content",
      "items": ["item 1", "item 2"]
    }
  ],
  "stats": {
    "total_commits": 5,
    "files_changed": 12
  }
}

2. Simple Message (
simple
)

For plain formatted messages

Data structure:

{
  "title": "Message Title",
  "body": "Message body text",
  "footer": "Optional footer"
}

3. Data Table (
data-table
)

For tabular data display

Data structure:

{
  "title": "Report Title",
  "headers": ["Column 1", "Column 2"],
  "rows": [
    ["Value 1", "Value 2"],
    ["Value 3", "Value 4"]
  ]
}

Base HTML Template

All templates use this base structure:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            background-color: white;
            border: 4px solid black;
            padding: 0;
        }
        .header {
            background-color: black;
            color: white;
            padding: 20px;
            font-size: 24px;
            font-weight: 900;
            border-bottom: 4px solid black;
        }
        .section {
            padding: 20px;
            border-bottom: 3px solid black;
        }
        .section:last-child {
            border-bottom: none;
        }
        .section-title {
            font-size: 18px;
            font-weight: 800;
            margin-bottom: 10px;
            text-transform: uppercase;
        }
        .stat-box {
            display: inline-block;
            background-color: #ffeb3b;
            border: 3px solid black;
            padding: 10px 15px;
            margin: 5px;
            font-weight: 700;
        }
        .accent-green { background-color: #4caf50; color: white; }
        .accent-red { background-color: #f44336; color: white; }
        .accent-blue { background-color: #2196f3; color: white; }
        ul {
            list-style: none;
            padding: 0;
        }
        li {
            padding: 8px;
            margin: 5px 0;
            background-color: #f5f5f5;
            border-left: 4px solid black;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 12px;
            text-align: left;
            border: 2px solid black;
        }
        th {
            background-color: black;
            color: white;
            font-weight: 800;
        }
        .footer {
            padding: 15px 20px;
            background-color: #f5f5f5;
            border-top: 3px solid black;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <!-- Content here -->
</body>
</html>

Color Palette

Primary:   #000000 (black)
Background: #FFFFFF (white)
Accent 1:  #FFEB3B (yellow)
Accent 2:  #4CAF50 (green)
Accent 3:  #F44336 (red)
Accent 4:  #2196F3 (blue)
Gray:      #F5F5F5 (light gray)

Usage in Agents

Communication Agent

# Format and send HTML email
html = format_email_html(template='daily-report', data=report_data)
gmail.send_email(to=recipient, subject=subject, body_html=html)

Reporting Agent

# Generate report HTML
report_html = format_email_html(template='data-table', data=table_data)
# Delegate to communication-agent to send

Scripts

See 

scripts/format_email.py
for programmatic email formatting.