diff --git a/skills/lmx/SKILL.md b/skills/lmx/SKILL.md
new file mode 100644
index 0000000..3eb4691
--- /dev/null
+++ b/skills/lmx/SKILL.md
@@ -0,0 +1,63 @@
+---
+name: lmx
+description: >
+  Use this skill whenever the user wants to create, write, generate, or edit
+  email content in Loops. This includes composing campaigns, loops, lifecycle
+  emails, transactional email bodies, or any email template for the Loops
+  editor or API. LMX (Loops Markup Language) is the format used for all Loops
+  email content. Trigger on phrases like "create a campaign", "generate an
+  email", "write a welcome email", "draft a lifecycle email", "build an email
+  template", "write a transactional email body", "create an onboarding email",
+  "LMX", "Loops email", or any request to produce or modify email body content
+  intended for Loops. Do not trigger for questions about the Loops HTTP API,
+  SDK integration, or CLI unless email body content is also involved.
+metadata:
+  version: 1.0.0
+---
+
+# LMX Skill
+
+This skill helps write, review, and generate correct LMX email markup for Loops. LMX is an XML-based format: every element is a PascalCase tag, self-closing tags require `/>`, and only the tags in the spec are valid.
+
+## When To Use
+
+Use this skill when the task involves:
+
+- generating or editing LMX email content
+- reviewing LMX markup for correctness
+- choosing the right LMX tags or attributes for a layout
+- applying design guidelines to an LMX document
+- explaining how a specific LMX tag or attribute works
+
+## Working Style
+
+When this skill is active:
+
+1. Read `references/lmx-spec.md` for the full tag and attribute reference. It is authoritative — do not invent tags or attributes.
+2. Read `references/lmx-design-guidelines.md` for Loops design guidelines. Apply these to every document you generate unless the user explicitly overrides a rule.
+3. Validate nesting and content-type rules before producing output (see spec section 3).
+4. Check the common-mistakes table in the spec before finalizing output.
+5. Always produce a complete, valid document — not fragments, unless the user specifically asks for one.
+
+## Category Routing
+
+- Tag definitions, required/optional attributes, nesting rules, content types, variable syntax, self-closing requirements, or escaping:
+  Read `references/lmx-spec.md`
+
+- Color contrast, spacing, column rounded corners, Style tag usage, visual hierarchy, or any "how should this look" question:
+  Read `references/lmx-design-guidelines.md`
+
+## Output Checklist
+
+Before returning any LMX output, verify:
+
+- [ ] All tags are PascalCase and in the allowed set
+- [ ] All self-closing tags use `/>` (e.g. `<Image />`, `<Divider />`, `<Br />`, `<Icon />`, `<Style />`)
+- [ ] No text or inline tags at the top level
+- [ ] Variables use `{name}` syntax and are only inside inline-content tags (not inside `<CodeBlock>` or `<Button>`)
+- [ ] `<For variable="…">` uses braces and contains at least one block child
+- [ ] `<Style />` appears at most once, before all other tags
+- [ ] `bodyColor` and `backgroundColor` are both set on `<Style />` (unless user opted out)
+- [ ] No same-color-on-same-color situations (check text vs block color, icon color vs background, etc.)
+- [ ] Sufficient Y-spacing on block elements
+- [ ] No `blockBorderRadius` applied to items inside `<Columns>` (columns can't be rounded yet)
diff --git a/skills/lmx/references/lmx-design-guidelines.md b/skills/lmx/references/lmx-design-guidelines.md
new file mode 100644
index 0000000..a381312
--- /dev/null
+++ b/skills/lmx/references/lmx-design-guidelines.md
@@ -0,0 +1,120 @@
+# LMX Design Guidelines
+
+These guidelines apply to every LMX document unless the user explicitly overrides a rule. They cover visual design decisions that the spec does not enforce but that produce good-looking, readable emails.
+
+---
+
+## Always Set Body And Background Color
+
+Every document must include a `<Style />` tag with both `bodyColor` and `backgroundColor` set. Do not skip either.
+
+- `bodyColor` — the email body/card background (the centered content area)
+- `backgroundColor` — the page/canvas behind the body
+
+Setting both gives the email a clear visual structure and prevents the renderer from falling back to default colors that may clash with your content.
+
+```xml
+<!-- Do this -->
+<Style bodyColor="#ffffff" backgroundColor="#f1f5f9" bodyYPadding="24" />
+
+<!-- Not this — missing backgroundColor -->
+<Style bodyColor="#ffffff" />
+```
+
+If the user asks for a dark email:
+
+```xml
+<Style bodyColor="#0f172a" backgroundColor="#020617" bodyYPadding="24" />
+```
+
+Always infer sensible defaults for `bodyYPadding` (typically `"16"` to `"32"`) even when the user doesn't specify.
+
+---
+
+## Contrast: No Same-Color-On-Same-Color
+
+Never place text, icons, or UI elements in the same color (or near-same color) as their background. Common failure modes to check:
+
+**Text vs block/body background:**
+- If `bodyColor` is white (`#ffffff`), `textBaseColor` must be dark (e.g. `#0f172a`, `#1e293b`).
+- If you set `blockColor` on a `<Paragraph>` or heading, the text inside must have sufficient contrast against that `blockColor`, not just the body.
+- Never use `textColor="#ffffff"` on a block with `blockColor="#ffffff"` or a light `bodyColor`.
+
+**Buttons:**
+- `bgColor` and `textColor` on `<Button>` must contrast. Dark background → light text. Light background → dark text.
+- If no explicit `textColor` is set on a `<Button>`, assume the document's `textBaseColor` will be used — ensure that still contrasts against the button `bgColor`.
+
+**CodeBlock:**
+- `<CodeBlock>` has its own `blockColor`. If you set a custom `blockColor` on a `<CodeBlock>`, also ensure the surrounding `bodyColor` and the code text color are visually distinct from that block. A good default is a slightly darker or muted tint of the body color (e.g. `#f1f5f9` on a white body).
+- If you change `<CodeBlock blockColor="…">` to a dark color, you must also visually account for the code text — note that there is no explicit text color attribute on `<CodeBlock>`, so use `blockColor` values that contrast with the inherited text color.
+
+**Icons:**
+- `<Icons color="…">` sets the icon color. If the `<Icons>` block sits on a `bodyColor` background, the icon color must contrast against the body. White icons on a white body are invisible.
+- If you set `blockColor` on the `<Icons>` element, icon color must contrast against that, not the body.
+
+---
+
+## Add Vertical Spacing Around Elements
+
+Use `paddingTop` and `paddingBottom` on block elements to add breathing room. Emails without spacing feel dense and hard to scan.
+
+Default approach:
+- Headings (`<H1>`, `<H2>`, `<H3>`): add `paddingTop="24"` or `paddingTop="32"` unless they are the first element.
+- `<Paragraph>` after a heading: `paddingBottom="8"` to `"16"` is typical.
+- `<Button>`: add `paddingTop="24"` and `paddingBottom="24"` to give CTAs room.
+- `<Divider>`: typically fine without explicit padding, but add `paddingTop="16" paddingBottom="16"` if elements feel crowded.
+- `<Image />`: `paddingBottom="16"` unless immediately followed by a caption paragraph.
+
+Use `bodyYPadding` on `<Style />` for global top/bottom padding inside the body — `"16"` to `"32"` is a sensible default.
+
+```xml
+<!-- Good — elements breathe -->
+<Style bodyColor="#ffffff" backgroundColor="#f1f5f9" bodyYPadding="24" />
+<H1 paddingTop="8" paddingBottom="4">Welcome aboard</H1>
+<Paragraph paddingBottom="16">Here is what happens next.</Paragraph>
+<Button href="https://loops.so" bgColor="#0f172a" textColor="#ffffff" align="center" paddingTop="8" paddingBottom="24">Get started</Button>
+```
+
+---
+
+## Columns Cannot Be Rounded
+
+`<Columns>` does not support border-radius. Do **not** apply `blockBorderRadius` to `<Columns>` or to block elements inside `<ColumnItem>` with the intention of rounding the column itself.
+
+Why: columns render as adjacent table cells. Two rounded blocks placed side by side produce awkward mismatched corners that look broken — each block has its own rounded corner butting up against the other.
+
+Avoid this pattern:
+
+```xml
+<!-- Bad — rounded blocks in columns look broken -->
+<Columns gap="0" widths="50,50">
+  <ColumnItem>
+    <Paragraph blockColor="#e2e8f0" blockBorderRadius="12">Left</Paragraph>
+  </ColumnItem>
+  <ColumnItem>
+    <Paragraph blockColor="#e2e8f0" blockBorderRadius="12">Right</Paragraph>
+  </ColumnItem>
+</Columns>
+```
+
+Rounding is fine on standalone blocks (outside `<Columns>`), on `<Button>`, and on `<Image />`.
+
+---
+
+## CodeBlock Color Pairing
+
+When you set a custom `blockColor` on a `<CodeBlock>`, visually pair it with the surrounding body:
+
+- Light body (`bodyColor="#ffffff"`): use a subtle tinted block, e.g. `blockColor="#f8fafc"` or `blockColor="#f1f5f9"`. This creates separation without jarring contrast.
+- Dark body (`bodyColor="#0f172a"`): use a slightly lighter dark, e.g. `blockColor="#1e293b"`.
+- Avoid colorful block colors on `<CodeBlock>` — code should read as technical/neutral.
+
+---
+
+## Visual Hierarchy Summary
+
+- One `<H1>` per document (unless the content genuinely has multiple top-level sections).
+- Follow heading levels in order: `<H1>` → `<H2>` → `<H3>`. Don't skip levels for styling reasons — adjust `fontSize` instead.
+- CTAs (`<Button>`) should stand out: high contrast, enough padding, aligned centrally for most transactional emails.
+- Use `<Divider />` sparingly to separate distinct sections, not between every element.
+- Keep icon rows (`<Icons>`) near the footer, typically the last or second-to-last block.
diff --git a/skills/lmx/references/lmx-spec.md b/skills/lmx/references/lmx-spec.md
new file mode 100644
index 0000000..dd85068
--- /dev/null
+++ b/skills/lmx/references/lmx-spec.md
@@ -0,0 +1,423 @@
+# LMX Specification
+
+Source URL: https://loops.so/docs/creating-emails/lmx
+
+**LMX** (Loops Markup Language) is an XML-based rich-text format for email content. Every element is a PascalCase tag; there is no shorthand syntax.
+
+---
+
+## 1. Core Rules
+
+1. **XML, not HTML.** Tags are case-sensitive PascalCase: `<Paragraph>`, not `<paragraph>` or `<P>`.
+2. **Self-closing tags must use `/>`.** Example: `<Image src="..." />`, `<Br />`, `<Divider />`. Writing `<Image src="...">` without a close is invalid.
+3. **Only the tags defined in this spec are valid.** Unknown tags are rejected.
+4. **Unknown attributes are ignored.** Don't invent attributes — values outside the documented set have no effect.
+5. **Required attributes must be present.** For example, `<Image>` without `src` is invalid.
+6. **All attribute values are quoted strings.** Numbers and booleans are written as strings: `width="400"`, `notrack="true"`. Types are interpreted from the attribute definition.
+7. **Text at the root is invalid.** Every piece of text must be inside a block tag. Top-level text, top-level variables, and top-level inline tags (`<Strong>`, `<Link>`, `<Br>`, etc.) are rejected.
+8. **Whitespace between block tags is not rendered.** You can indent and line-break freely.
+9. **Escape `<` and `&` in text** as `&lt;` and `&amp;`. Escape `"` and `&` in attribute values as `&quot;` and `&amp;`.
+10. **A document is a sequence of top-level block elements**, optionally preceded by a single `<Style />` tag.
+
+---
+
+## 2. Top-Level Structure
+
+A valid document contains zero or more of the following **top-level tags**:
+
+```
+H1, H2, H3, Paragraph, Quote, CodeBlock, Button, Image,
+Divider, OrderedList, UnorderedList, Columns, ComponentContainer,
+For, Icons, Style
+```
+
+Tags like `<ListItem>`, `<ColumnItem>`, `<Icon>`, `<Br>`, `<Strong>`, `<Em>`, `<Link>`, etc. are **not** valid at the top level — they only appear inside their container or inline context.
+
+Example minimal document:
+
+```xml
+<H1>Welcome</H1>
+<Paragraph>Hello world.</Paragraph>
+```
+
+---
+
+## 3. Content Types And Nesting
+
+Each tag declares what content it accepts:
+
+| Content type | Meaning |
+| --- | --- |
+| `inline` | Text, `{variables}`, inline format tags (`<Strong>`, `<Em>`, …), `<Br>` |
+| `text` | Plain text only — no inline tags, no `{variables}` (braces are literal) |
+| `none` | No text at all — only specific element children, or self-closing |
+
+Nesting summary:
+
+- `<H1>`, `<H2>`, `<H3>`, `<Paragraph>`, `<Quote>`, `<ListItem>` → inline content
+- `<CodeBlock>`, `<Button>` → text only (braces are literal inside these)
+- `<OrderedList>`, `<UnorderedList>` → only `<ListItem>` children
+- `<Columns>` → only `<ColumnItem>` children
+- `<ColumnItem>`, `<ComponentContainer>` → block tags (same set as top-level, minus `<Style>`)
+- `<Icons>` → only `<Icon />` children
+- Self-closing with no children: `<Image />`, `<Divider />`, `<Br />`, `<Icon />`, `<Style />`
+
+---
+
+## 4. Tag Reference
+
+### 4.1 Headings — `<H1>`, `<H2>`, `<H3>`
+
+Inline content. Shared optional attributes on all text blocks:
+
+| Attribute | Type | Notes |
+| --- | --- | --- |
+| `fontSize` | number | In pixels (e.g. `"24"`) |
+| `lineHeight` | number | Percentage (e.g. `"150"` = 150%) |
+| `align` | string | `"left"`, `"center"`, `"right"` |
+| `blockColor` | hex | Background color of the block (e.g. `"#f8fafc"`) |
+| `blockBorderRadius` | number | |
+| `paddingTop` | number | |
+| `paddingRight` | number | |
+| `paddingBottom` | number | |
+| `paddingLeft` | number | |
+
+```xml
+<H1>Plain heading</H1>
+<H2 align="center" fontSize="28">Centered heading</H2>
+<H3 blockColor="#f0f0f0" paddingTop="16">Heading on tinted background</H3>
+```
+
+### 4.2 `<Paragraph>`
+
+Inline content. Same optional attributes as headings.
+
+```xml
+<Paragraph>Plain paragraph.</Paragraph>
+<Paragraph align="center" fontSize="18">Centered bigger paragraph.</Paragraph>
+<Paragraph>Mixed <Strong>bold</Strong> and <Em>italic</Em> and <Link href="https://loops.so">a link</Link>.</Paragraph>
+```
+
+### 4.3 `<Quote>`
+
+Inline content. Same optional attributes as headings.
+
+```xml
+<Quote>A short quotation.</Quote>
+<Quote fontSize="16">Quoted <Em>italic</Em> text.</Quote>
+```
+
+### 4.4 `<CodeBlock>`
+
+**Text only.** No inline tags. `{foo}` inside is a literal string, not a variable.
+
+Attributes: `fontSize`, `lineHeight`, `blockColor`, `blockBorderRadius`, padding attrs.
+
+```xml
+<CodeBlock>const x = 1;</CodeBlock>
+```
+
+### 4.5 `<Button>`
+
+**Text only** (same rule as `<CodeBlock>` — `{foo}` is literal).
+
+| Attribute | Type | Notes |
+| --- | --- | --- |
+| `href` | url | |
+| `bgColor` | hex | |
+| `textColor` | hex | |
+| `borderRadius` | number | |
+| `borderWidth` | number | |
+| `borderColor` | hex | |
+| `innerXPadding` | number | |
+| `innerYPadding` | number | |
+| `fontSize` | number | |
+| `size` | string | `"small"`, `"medium"`, `"large"` |
+| `align` | string | `"left"`, `"center"`, `"right"` |
+| `notrack` | boolean | `"true"` disables link tracking |
+| `paddingTop`, etc. | number | Block padding |
+
+```xml
+<Button href="https://loops.so" bgColor="#000" textColor="#fff" borderRadius="12">Click me</Button>
+<Button href="https://example.com" size="large" align="center">Big centered CTA</Button>
+```
+
+### 4.6 `<Image />` (self-closing)
+
+| Attribute | Type | Required | Notes |
+| --- | --- | :---: | --- |
+| `src` | url | yes | Image URL |
+| `alt` | string | | Alt text |
+| `href` | url | | Wraps image in a link |
+| `width` | number | | In pixels |
+| `align` | string | | `"left"`, `"center"`, `"right"` |
+| `borderRadius` | number | | |
+| `borderWidth` | number | | |
+| `borderColor` | hex | | |
+| `notrack` | boolean | | |
+| `blockColor`, etc. | | | Block background / padding attrs |
+
+```xml
+<Image src="https://example.com/photo.png" alt="A photo" width="400" />
+<Image src="https://example.com/logo.png" href="https://loops.so" align="center" />
+```
+
+### 4.7 `<Divider />` (self-closing)
+
+| Attribute | Type | Notes |
+| --- | --- | --- |
+| `align` | string | `"left"`, `"center"`, `"right"` |
+| `width` | number | Percentage (e.g. `"80"` = 80%) |
+| `borderWidth` | number | |
+| `color` | hex | |
+| `size` | string | `"small"`, `"medium"`, `"large"` |
+
+```xml
+<Divider />
+<Divider width="80" color="#ccc" size="small" />
+```
+
+### 4.8 `<Br />` (self-closing)
+
+Line break inside an inline context. Never at the top level.
+
+```xml
+<Paragraph>Line one<Br />Line two</Paragraph>
+```
+
+### 4.9 `<OrderedList>` / `<UnorderedList>`
+
+Children: `<ListItem>` only. No other content.
+
+| Attribute | Type | Notes |
+| --- | --- | --- |
+| `start` | number | Ordered list only — starting number |
+| `align` | string | `"left"`, `"center"`, `"right"` |
+
+```xml
+<OrderedList start="3">
+  <ListItem>First (labeled 3)</ListItem>
+  <ListItem>Second (labeled 4)</ListItem>
+</OrderedList>
+
+<UnorderedList>
+  <ListItem>Bullet with <Em>italic</Em></ListItem>
+  <ListItem>Bullet with <Strong>bold</Strong></ListItem>
+</UnorderedList>
+```
+
+### 4.10 `<ListItem>`
+
+Inline content. Only valid inside `<OrderedList>` or `<UnorderedList>`.
+
+Attributes: `fontSize`, `lineHeight`, `blockColor`, `blockBorderRadius`, padding attrs.
+
+### 4.11 `<Columns>` + `<ColumnItem>`
+
+`<Columns>` children must be `<ColumnItem>`. `<ColumnItem>` children are block tags (same set as top-level, except `<Style>`).
+
+`<Columns>` attributes:
+
+| Attribute | Type | Notes |
+| --- | --- | --- |
+| `gap` | number | Space between columns (px) |
+| `widths` | string | Comma-separated percentages, e.g. `"40,60"` or `"33,33,34"` |
+| `verticalAlignment` | string | `"top"`, `"middle"`, `"bottom"` |
+| `stackOnMobile` | boolean | |
+| `reverseOnMobile` | boolean | |
+| block style attrs | | `blockColor`, `blockBorderRadius`, padding |
+
+`<ColumnItem>` takes no attributes.
+
+```xml
+<Columns gap="24" widths="40,60" verticalAlignment="middle">
+  <ColumnItem>
+    <H3>Left</H3>
+    <Paragraph>Left body.</Paragraph>
+  </ColumnItem>
+  <ColumnItem>
+    <Image src="https://example.com/pic.png" />
+  </ColumnItem>
+</Columns>
+```
+
+### 4.12 `<ComponentContainer>`
+
+Wraps a reusable email component. Children are block tags (no `<Style>`, no nested `<ComponentContainer>`).
+
+| Attribute | Type | Notes |
+| --- | --- | --- |
+| `componentId` | string | Reference to a saved component |
+| `id` | string | Per-instance container id |
+| block style attrs | | `blockColor`, `blockBorderRadius`, padding |
+
+```xml
+<ComponentContainer componentId="cmp_123" id="ctr_1">
+  <Paragraph>Header content</Paragraph>
+</ComponentContainer>
+```
+
+### 4.13 `<Icons>` + `<Icon />`
+
+Social / inline icon row. Children are `<Icon />` only.
+
+`<Icons>` attributes:
+
+| Attribute | Type | Notes |
+| --- | --- | --- |
+| `align` | string | `"left"`, `"center"`, `"right"` |
+| `gap` | number | Space between icons (px) |
+| `size` | number | Icon size (px) |
+| `color` | hex | Default icon color |
+| block style attrs | | `blockColor`, `blockBorderRadius`, padding |
+
+`<Icon />` attributes:
+
+| Attribute | Type | Required | Notes |
+| --- | --- | :---: | --- |
+| `name` | string | yes | Icon name (e.g. `"twitter"`) |
+| `href` | url | | |
+| `color` | hex | | Overrides parent `<Icons>` color |
+| `notrack` | boolean | | |
+
+```xml
+<Icons align="center" gap="20" size="24" color="#334155">
+  <Icon name="twitter" href="https://x.com/loops" />
+  <Icon name="github" href="https://github.com/loops" />
+</Icons>
+```
+
+### 4.14 `<Style />` (self-closing, top-level metadata)
+
+At most one per document. Must appear before all other tags. Does not produce rendered content — it sets document-level styling. All attributes are optional.
+
+| Attribute | Type |
+| --- | --- |
+| `styleTemplateId` | string |
+| `backgroundColor`, `backgroundXPadding`, `backgroundYPadding` | hex / number |
+| `bodyColor`, `bodyXPadding`, `bodyYPadding`, `bodyFontFamily`, `bodyFontCategory` | mixed |
+| `borderColor`, `borderWidth`, `borderRadius` | mixed |
+| `buttonBodyColor`, `buttonBodyXPadding`, `buttonBodyYPadding` | mixed |
+| `buttonBorderColor`, `buttonBorderWidth`, `buttonBorderRadius` | mixed |
+| `buttonTextColor`, `buttonTextFontSize` | mixed |
+| `dividerColor`, `dividerBorderWidth` | mixed |
+| `textBaseColor`, `textBaseFontSize`, `textBaseLineHeight`, `textBaseLetterSpacing` | mixed |
+| `textLinkColor` | hex |
+| `heading1Color`, `heading1FontSize`, `heading1LineHeight`, `heading1LetterSpacing` | mixed |
+| `heading2Color`, `heading2FontSize`, `heading2LineHeight`, `heading2LetterSpacing` | mixed |
+| `heading3Color`, `heading3FontSize`, `heading3LineHeight`, `heading3LetterSpacing` | mixed |
+
+```xml
+<Style styleTemplateId="st_123" bodyColor="#ffffff" bodyYPadding="12" />
+<Paragraph>Hello</Paragraph>
+```
+
+---
+
+## 5. Inline Tags
+
+Inline tags live inside `<H1>`/`<H2>`/`<H3>`/`<Paragraph>`/`<Quote>`/`<ListItem>` and inside one another (they compose). They are **never** valid at the top level.
+
+| Tag | Effect |
+| --- | --- |
+| `<Strong>…</Strong>` | Bold |
+| `<Em>…</Em>` | Italic |
+| `<Underline>…</Underline>` | Underline |
+| `<Strike>…</Strike>` | Strikethrough |
+| `<Code>…</Code>` | Inline code format |
+| `<Text>…</Text>` | No format — carrier for `textColor` only |
+| `<Link href="…">…</Link>` | Hyperlink |
+
+All format tags (and `<Text>`) accept an optional `textColor` hex attribute (`"#f00"` or `"#ff0000"`). Non-hex values are rejected.
+
+`<Link>` attributes:
+
+| Attribute | Type | Required | Notes |
+| --- | --- | :---: | --- |
+| `href` | url | yes | |
+| `notrack` | boolean | | `"true"` disables tracking |
+
+```xml
+<Paragraph>Mixed <Strong>bold</Strong>, <Em>italic</Em>, <Strong><Em>both</Em></Strong>.</Paragraph>
+<Paragraph>A <Link href="https://example.com">link</Link> and <Link href="https://x.com" notrack="true">an untracked link</Link>.</Paragraph>
+<Paragraph>Color only: <Text textColor="#f00">red</Text>. Colored bold: <Strong textColor="#00f">blue bold</Strong>.</Paragraph>
+```
+
+Inner `textColor` wins when nested. Example: `<Text textColor="#f00"><Strong textColor="#00f">x</Strong></Text>` → `x` is bold + blue.
+
+---
+
+## 6. Variables
+
+Variables are written as `{name}` **inside text content** of inline-content tags (`<Paragraph>`, headings, `<Quote>`, `<ListItem>`, and inside inline tags). They are **not** valid:
+
+- Inside `<CodeBlock>` or `<Button>` (text-only — braces are literal there)
+- At the top level (wrap in `<Paragraph>` first)
+
+Three kinds, disambiguated by prefix:
+
+| Syntax | Kind | Meaning |
+| --- | --- | --- |
+| `{firstName}` | merge tag | Contact property (bare name), used in campaigns and loop emails |
+| `{contact.email}` | merge tag | Contact property (explicit `contact.` prefix), used in campaigns and loop emails |
+
+Examples:
+
+```xml
+<Paragraph>Hello {firstName}!</Paragraph>
+<Paragraph>Order shipped to {contact.email}.</Paragraph>
+```
+
+---
+
+## 7. Common Mistakes
+
+| Mistake | Fix |
+| --- | --- |
+| `<paragraph>`, `<p>`, `<P>` | `<Paragraph>` |
+| `<Image src="x.png">` (no self-close) | `<Image src="x.png" />` |
+| Plain text at top level | Wrap in `<Paragraph>…</Paragraph>` |
+| `<Strong>` at top level | Wrap in `<Paragraph><Strong>…</Strong></Paragraph>` |
+| `<ListItem>` outside a list | Nest in `<UnorderedList>` or `<OrderedList>` |
+| `<ColumnItem>` outside `<Columns>` | Wrap in `<Columns>…</Columns>` |
+| `<Icon />` outside `<Icons>` | Wrap in `<Icons>…</Icons>` |
+| `{firstName}` inside `<CodeBlock>` | These are text-only — braces are literal |
+| `textColor="red"` | Use hex: `textColor="#f00"` or `textColor="#ff0000"` |
+| Two `<Style />` tags | Only one `<Style />` per document |
+| Unescaped `<` or `&` in text | Use `&lt;` and `&amp;` |
+
+---
+
+## 8. Full Example Document
+
+```xml
+<Style styleTemplateId="st_123" bodyColor="#ffffff" backgroundColor="#f1f5f9" bodyYPadding="16" />
+<H1>Welcome, {firstName}</H1>
+<Paragraph fontSize="18" lineHeight="150">
+  Thanks for signing up on {signupDate}. Here's what <Strong>you</Strong>
+  can do next:
+</Paragraph>
+<UnorderedList>
+  <ListItem>Read <Link href="https://loops.so/docs">the docs</Link></ListItem>
+  <ListItem><Strong>Invite</Strong> your team</ListItem>
+  <ListItem>Explore <Em>integrations</Em></ListItem>
+</UnorderedList>
+<Button href="https://loops.so/start" size="large" align="center" bgColor="#0f172a" textColor="#ffffff" borderRadius="12">Get started</Button>
+<Divider align="center" width="80" size="small" color="#cbd5e1" />
+<Columns gap="24" widths="50,50" verticalAlignment="top">
+  <ColumnItem>
+    <H3>Docs</H3>
+    <Paragraph>Start with the quickstart.</Paragraph>
+  </ColumnItem>
+  <ColumnItem>
+    <H3>Community</H3>
+    <Paragraph>Join other builders.</Paragraph>
+  </ColumnItem>
+</Columns>
+<Icons align="center" gap="20" size="24" color="#334155">
+  <Icon name="twitter" href="https://x.com/loops" />
+  <Icon name="github" href="https://github.com/loops" />
+</Icons>
+<Quote fontSize="16">"Loops made our lifecycle emails effortless." — {contact.email}</Quote>
+<CodeBlock>curl -X POST https://app.loops.so/api/v1/events</CodeBlock>
+```