New to Claude Skills? Learn how to install them →

posthog on GitHub

Designing Email Templates

Free

Create and edit email templates for PostHog workflows.

Get this skill

Free · Opens the source repo

What Designing Email Templates does

The Designing Email Templates skill provides a structured approach to authoring and managing email templates within PostHog's workflows. This skill allows users to create, update, and fix email templates that are utilized in broadcast campaigns and automated workflows. By composing email design JSON with Liquid personalization, users can ensure that their emails are not only visually appealing but also tailored to individual recipients. The templates are rendered using the same engine as PostHog's visual editor, allowing for seamless integration and editing.

To get started, users need to create the design JSON and save it using the workflows-create-email-template command. This command ensures that the email template is stored in the PostHog library and can be easily accessed and modified later. The skill emphasizes the importance of following design guidelines, which cover essential aspects like typography and color schemes, to create professional-looking emails. Users are encouraged to familiarize themselves with the design guidelines provided in the references to enhance their email design skills.

Personalization is a key feature of this skill, with support for Liquid templating that allows dynamic content to be inserted into emails. This means that users can customize greetings, subject lines, and links based on recipient data. Moreover, the skill includes built-in mechanisms for tracking clicks and managing opt-outs, ensuring compliance with marketing best practices. Users can also manage their templates effectively, whether they are creating new ones or making updates to existing designs, ensuring that their email communications remain relevant and engaging.

Overall, this skill is ideal for developers and designers who are looking to streamline their email creation process within PostHog, ensuring that their emails are both functional and aesthetically pleasing. By leveraging the capabilities of this skill, users can enhance their email marketing efforts and improve engagement with their audience.

When to use it

Use this skill when you need to design, build, or update email templates for campaigns and workflows in PostHog.

When not to use it

This skill is not suitable for users who require advanced email marketing features outside of PostHog's ecosystem or those looking for a standalone email design tool.

What you can build with it

Creating a Welcome Email

You can use this skill to design a welcome email template for new users, ensuring it includes personalized greetings and relevant content.

Updating an Existing Template

If you need to make changes to an existing email template, this skill allows you to fetch the current design, modify it, and save the updates easily.

Personalizing Campaign Emails

Leverage Liquid tags within your email templates to personalize content based on user data, enhancing engagement in your email campaigns.

How to install Designing Email Templates

View source

1. Install with the skills CLI

npx skills add posthog/posthog/designing-email-templates --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by posthog

Designing email templates

Use this skill when creating or editing email templates for PostHog workflows — broadcast campaigns and function_email workflow actions send the rendered template.

How authoring works

You author the design JSON (content.email.design) and save it with workflows-create-email-template. The server renders the sent email from your design with the same renderer PostHog's visual editor uses, so the template opens as editable blocks for humans and sends exactly what the design describes. Schema and a working example in references/unlayer-design-json.md.

When talking to the user, call it the template's design — the design document format is an internal implementation detail. Always share the template's _posthogUrl edit link in your reply after creating or updating, so the user can open it in PostHog directly.

Read references/design-guidelines.md before composing — it covers committing to a design direction, typography, color, and the patterns that make an email look designed rather than generated. For one fragment the block editor can't express, use an html-type content block inside the design.

Personalization with Liquid

Email content uses Liquid templating. Liquid tags pass through the renderer as plain text, so use them anywhere — block text, subject, links:

Hi {{ person.properties.first_name | default: 'there' }},

Marketing emails must include an unsubscribe link — render it with the built-in variables:

<a href="{{ unsubscribe_url }}">Unsubscribe</a>

({{ unsubscribe_url_one_click }} is also available for one-click list-unsubscribe flows.)

Click tracking and opt-out

Every link is automatically rewritten through a click-tracking redirect. This breaks mobile universal links / app deeplinks, which only resolve when the href stays on their own domain. To keep a link untracked, mark its anchor (use an html block) with clicktracking="off" or data-ph-no-track:

<a href="https://app.example.com/deeplink" data-ph-no-track>Open in app</a>

The marker must be on the <a> tag itself, not a child element. Opted-out links get no click metrics.

Creating a template

Call workflows-create-email-template with:

{
  "name": "Welcome email",
  "description": "Sent to new signups on day 0",
  "type": "email",
  "content": {
    "templating": "liquid",
    "email": {
      "subject": "Welcome to {{ person.properties.company | default: 'our product' }}",
      "design": { "counters": { "u_row": 1 }, "schemaVersion": 16, "body": { "rows": ["…"] } },
      "text": "Plain-text fallback of the same message"
    }
  }
}
  • subject is required for email templates.
  • Always author the design and omit html - the server renders html from the design. Sending hand-written html without a design produces an email the visual editor can only show as one raw block.
  • Always provide text as a real plain-text rendering of the message - clients that block rich content show only text, so filler like "placeholder" reaches real inboxes, and a text part that doesn't match the html hurts deliverability.
  • The tool result returns an edit link into the PostHog library.
  • After creating (or updating), call workflows-show-email-template — it renders an inline preview so the user sees the result.

Payload mechanics

Pass the design directly in the tool call — no scratch files, no pre-validation subprocesses, no payload preview rounds. Liquid tags ({{ }}, {% %}), apostrophes, single quotes, and emoji are ordinary characters inside JSON strings; only standard JSON escaping applies. Never rewrite content to avoid them — converting Liquid's single quotes to double quotes inside markup attributes breaks the markup. If the tool call is rejected as malformed, fix the JSON escaping and resend the same content unchanged.

Editing a template (read–modify–write)

content is replaced as a whole on update, never merged — and humans may have edited the design in PostHog's visual editor since you last saw it:

  1. workflows-get-email-template — always fetch fresh; the returned design is the current source of truth.
  2. Modify the design (keep subject/text alongside it).
  3. workflows-update-email-template — send the complete content back. The server re-renders the sent email from the edited design.
  4. workflows-show-email-template — render the updated template so the user sees the change; its response carries the final rendered html, so read it before describing the result.

For small changes to an existing design, prefer workflows-patch-email-template: id-addressed operations over the Unlayer blocks, so you send only the edit instead of the whole design.

Editing the email inside a workflow step

A function_email step carries its own email snapshot (config.inputs.email.value with subject/text/html/design), independent of any library template. Edit it with workflows-patch-action-email: the same design operations as workflows-patch-email-template, plus an email_patch merge for subject, preheader, text, and recipients.

  1. workflows-get — the step's current design (and its block ids) is in config.inputs.email.value.design.
  2. workflows-patch-action-email with the workflow id, the step's action_id, and your operations and/or email_patch.
  3. The HTML is re-rendered server-side from the patched design, so it never goes stale.
  4. On an active workflow the edit stages a draft — test with workflows-test-run (use_draft=true) and apply it with workflows-publish.

Using templates

  • List what exists with workflows-list-email-templates (metadata only; fetch one for its content).
  • When the user asks to see a template, call workflows-show-email-template — it renders an inline preview.
  • Reference a template from a workflow's function_email action (its UUID in config.template_uuid), or start a broadcast from it in the PostHog UI. The step takes a snapshot of the template's body at save - editing the library template later does not change steps that already used it. To change a step's email, patch that step with workflows-patch-action-email.
  • Templates are soft-deleted by setting deleted: true via workflows-update-email-template.

Frequently asked questions about Designing Email Templates

Similar skills