diff --git a/skills/react-email/SKILL.md b/skills/react-email/SKILL.md index 3851518cc6..95672fb2d3 100644 --- a/skills/react-email/SKILL.md +++ b/skills/react-email/SKILL.md @@ -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 @@ -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. @@ -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.