react-email

# React Email

Build and send HTML emails using React components - a modern, component-based approach to email development that works across all major email clients.

## Installation

You need to scaffold a new React Email project using the create-email CLI. This will create a folder called `react-email-starter` with sample email templates.

Using npm:
```sh
npx create-email@latest
```

Using yarn:
```sh
yarn create email
```

Using pnpm:
```sh
pnpm create email
```

Using bun:
```sh
bun create email
```

## Navigate to Project Directory

You must change into the newly created project folder:

```sh
cd react-email-starter
```

## Install Dependencies

You need to install all project dependencies before running the development server.

Using npm:
```sh
npm install
```

Using yarn:
```sh
yarn
```

Using pnpm:
```sh
pnpm install
```

Using bun:
```sh
bun install
```

## Start the Development Server

Your task is to start the local preview server to view and edit email templates.

Using npm:
```sh
npm run dev
```

Using yarn:
```sh
yarn dev
```

Using pnpm:
```sh
pnpm dev
```

Using bun:
```sh
bun dev
```

## Verify Installation

You must confirm the development server is running by checking that localhost:3000 is accessible. The server will display a preview interface where you can view email templates from the `emails` folder.

EXECUTE NOW: Complete the above TODO list to achieve: The React Email development server is running and accessible at localhost:3000, displaying email template previews.

### Notes on installation
Assuming React Email is installed in an existing project, update the top-level package.json file with a script to run the React Email preview server.

```json
{
  "scripts": {
    "email": "email dev --dir emails --port 3000"
  }
}
```

Make sure the path to the emails folder is relative to the base project directory.


### tsconfig.json updating or creation

Ensure the tsconfig.json includes proper support for jsx.

## Basic Email Template

Replace t...

# React Email Agent Skill

This directory contains an Agent Skill for building HTML emails with React Email components.

## Structure

```
react-email/
├── SKILL.md                  # Main skill instructions
└── references/
    ├── COMPONENTS.md         # Complete component reference
    ├── I18N.md              # Internationalization guide
    └── PATTERNS.md          # Common email patterns and examples
```

## What is an Agent Skill?

Agent Skills are a standardized format for giving AI agents specialized knowledge and workflows. This skill teaches agents how to:

- Build HTML email templates using React Email components
- Send emails through Resend and other providers
- Implement internationalization for multi-language support
- Follow email development best practices

## Using This Skill

AI agents can load this skill to gain expertise in React Email development. The skill follows the [Agent Skills specification](https://agentskills.io) with:

- **SKILL.md**: Core instructions loaded when the skill is activated (< 350 lines)
- **references/**: Detailed documentation loaded on-demand for specific topics

## Progressive Disclosure

The skill is structured for efficient context usage:

1. **Metadata** (~100 tokens): Name and description in frontmatter
2. **Core Instructions** (~3K tokens): Main SKILL.md content
3. **Detailed References** (as needed): Component docs, i18n guides, patterns

Agents load only what they need for each task.

## Learn More

- [React Email Documentation](https://react.email/docs/llms.txt)
- [Agent Skills Specification](https://agentskills.io/specification.md)
- [Resend Documentation](https://resend.com/docs/llms.txt)