From 85083a5c9adb3df6e0a18632aa36413b7a2e8f58 Mon Sep 17 00:00:00 2001 From: Alan Pope Date: Wed, 11 Mar 2026 20:22:45 +0000 Subject: [PATCH] feat: improve skill scores for react-email MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Hullo @resend 👋 I ran your skills through `tessl skill review` at work and found some targeted improvements. Here's the before/after: | Skill | Before | After | Change | |-------|--------|-------|--------| | react-email | 79% | 93% | +14% |
Changes made - **Expanded frontmatter description** — added explicit capability verbs ("Creates, previews, and sends responsive HTML email templates") so agents can better identify when to activate the skill - **Consolidated installation section** — collapsed four separate package manager listings across three steps (~60 lines) into a single concise block with a note about alternatives, resolving the line-count warning (530 → 463 lines) - **Added STYLING.md reference** — linked the existing but unreferenced `references/STYLING.md` from the styling section for better progressive disclosure - **Resolved validation warning** — SKILL.md now passes all checks with 0 errors and 0 warnings
Honest disclosure — I work at @tesslio where we build tooling around skills like these. Not a pitch - just saw room for improvement and wanted to contribute. Want to self-improve your skills? Just point your agent (Claude Code, Codex, etc.) at [this Tessl guide](https://docs.tessl.io/evaluate/optimize-a-skill-using-best-practices) and ask it to optimize your skill. Ping me - [@popey](https://github.com/popey) - if you hit any snags. Thanks in advance 🙏 --- skills/react-email/SKILL.md | 79 +++---------------------------------- 1 file changed, 6 insertions(+), 73 deletions(-) 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.