Skip to content

feat: improve skill scores for react-email #3053

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
popey wants to merge 1 commit into
base: canary
Choose a base branch
from
Open

feat: improve skill scores for react-email #3053

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 6 additions & 73 deletions skills/react-email/SKILL.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
name: react-email
description: Use when creating HTML email templates with React components - welcome emails, password resets, notifications, order confirmations, newsletters, or transactional emails.
description: Creates, previews, and sends responsive HTML email templates using React components. Use when building welcome emails, password resets, notifications, order confirmations, newsletters, or transactional emails.
license: MIT
metadata:
author: Resend
Expand All @@ -13,87 +13,18 @@ Build and send HTML emails using React components - a modern, component-based ap

## 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.
Scaffold a new React Email project using the create-email CLI. This creates 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
```
> Yarn, pnpm, and bun equivalents work as expected (e.g., `pnpm create email`, `bun create email`).

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

## Verify Installation

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.
The dev server runs at localhost:3000, displaying a preview interface for email templates in the `emails` folder.

### 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.
Expand Down Expand Up @@ -303,6 +234,8 @@ export default EmailTemplate;

## Styling considerations

See [references/STYLING.md](references/STYLING.md) for complete styling documentation.

Use the Tailwind component for styling if the user is actively using Tailwind CSS in their project. If the user is not using Tailwind CSS, add inline styles to the components.

- Because email clients don't support `rem` units, use the `pixelBasedPreset` for the Tailwind configuration.
Expand Down
Loading