---
name: react-email-templates
description: Transactional email with React components — layout tables text version and test sends
tags:
  - email
  - react
  - transactional
version: 1.0.0
category: development
outcomes:
  - Component structure for one template with plain text fallback outline
  - Inline-friendly styles guidance tables not flex for clients
  - Preview and local send workflow commands only
stack:
  - react
  - typescript
last_reviewed: 2026-05-19
risk_level: low
tools_allowed: repo-files
requires_user_approval: false
compatibility:
  - cursor
  - claude-code
  - skills-sh
  - generic-markdown
references:
  - references/skill-safety.md
---

# Instructions

Build **transactional email** templates as **React** components (e.g. react-email style) with **plain-text** counterparts.

1. Layout: table-based width constraints; max width ~600px; system fonts or web-safe stack.
2. **Images:** absolute URLs only; alt text; avoid critical info only in images.
3. **CTA:** bulletproof button pattern (nested table) when needed for Outlook.
4. **Text version:** mirror links and key numbers; do not leave empty `text/plain`.
5. **Testing:** local preview command pattern; no live spam without user consent.

## Outcomes

- One template file tree + style rules + text body outline.

## Output Rules

No marketing growth hacks; transactional tone only.

## Scope and boundaries

- **In scope:** receipts, resets, notifications.
- **Out of scope:** cold outreach campaigns, purchased lists.

## Safety

- No real user PII in examples; placeholders only.

## Troubleshooting

- **Dark mode email clients:** test contrast; avoid pure black on pure white only assumptions.

**GitHub:** https://github.com/bh611627/skillcodex/tree/main/skills/react-email-templates/SKILL.md  
**npm:** https://www.npmjs.com/package/@skillcodex/skills