CtrlK
BlogDocsLog inGet started
Tessl Logo

react-email

Use when creating HTML email templates with React components - welcome emails, password resets, notifications, order confirmations, newsletters, or transactional emails.

61

Quality

73%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./.agents/skills/react-email/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

67%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A highly actionable, well-structured body with genuinely valuable email-client-specific constraints and copy-paste-ready examples. The main weaknesses are token-efficiency (repeated per-package-manager command blocks and a redundant inline styling section) and an orphaned STYLING.md reference that leaves bundled content duplicated rather than linked.

Suggestions

Collapse the three npm/yarn/pnpm/bun command sections into one step showing the npm command with a one-line note that yarn/pnpm/bun equivalents apply, and drop the standalone 'Navigate to Project Directory' section into the install step — this removes ~30 redundant lines.

Replace the inline 'Styling considerations' section with a link to the currently orphaned references/STYLING.md (keeping only the highest-value rules, e.g., no flexbox/media queries/rem), so every bundle file is discoverable and styling guidance lives in one place.

Add the concrete details for the vague steps: a jsx-enabled tsconfig.json snippet and an explicit dev-server verification command (e.g., `curl -s http://localhost:3000 -o /dev/null -w '%{http_code}'`) with expected output.

DimensionReasoningScore

Conciseness

The core domain guidance (email-client limits, Tailwind config, PreviewProps, 102KB Gmail cap, render/send examples) is dense and non-obvious, but there is noticeable padding: four package-manager variants repeated across three separate sections (12 near-identical command blocks for commands Claude can trivially adapt), a dedicated section for `cd react-email-starter`, and ~70 lines of inline styling guidance that duplicates references/STYLING.md. This sits between anchor 3 ('mostly efficient but some unnecessary explanation') and anchor 2 ('several padded sections'); it stays at 3 because the majority of the body is high-value email-specific knowledge rather than filler.

3 / 5

Actionability

Nearly everything is copy-paste ready: a complete WelcomeEmail component, render/plain-text snippets, a Resend SDK example, the package.json preview script, and the dev-vs-production baseURL pattern. The gap that keeps it below anchor 5 is vague spots like "Ensure the tsconfig.json includes proper support for jsx" (no jsx config shown) and "checking that localhost:3000 is accessible" (no command or expected output); it is well above anchor 3, which would feature pseudocode or missing key details.

4 / 5

Workflow Clarity

Steps are clearly sequenced by heading (install → cd → dependencies → dev server → verify → template → render → send), with an explicit verification checkpoint ("Confirm the development server is running by checking that localhost:3000 is accessible") and a clarifying-questions gate before writing code. It does not reach anchor 5 because there are no feedback loops (e.g., what to do when the dev server fails or the preview is blank), and verification steps lack concrete commands — anchor 4's 'clear sequence with most checkpoints present; minor validation gaps'. No destructive or batch operations exist that would cap the score at 3.

4 / 5

Progressive Disclosure

Four of the five bundle files (COMPONENTS.md, SENDING.md, I18N.md, PATTERNS.md) are clearly signaled with inline links at the point of need, one level deep, plus a consolidated 'Additional Resources' index. It falls short of anchor 5 because references/STYLING.md is orphaned — never linked from the body while ~70 lines of its content are inlined in 'Styling considerations' — matching anchor 4's 'minor organization gaps' rather than anchor 3, since the inlined section is moderate and all other references are well signaled.

4 / 5

Total

15

/

20

Passed

Description

78%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong, trigger-forward description with excellent natural scenario keywords and an explicit 'Use when' clause covering both what and when. Its main limits are a single action verb (creating) rather than a fuller capability list, and omission of the 'React Email' name and file-extension synonyms.

DimensionReasoningScore

Specificity

"creating HTML email templates with React components" names the domain and one concrete action, and the enumerated types ("welcome emails, password resets, notifications, order confirmations, newsletters") are concrete artifact categories rather than distinct actions like extracting, filling, or converting. It matches the anchor 'names domain and 1-2 concrete actions, but not comprehensive' — it does not reach anchor 4, which expects several distinct action verbs; it clearly exceeds anchor 2, which would have only a generic action.

3 / 5

Completeness

Both 'what' and 'when' are explicit: what — "creating HTML email templates with React components"; when — a leading "Use when" clause with six concrete trigger scenarios. This mirrors the anchor-5 example ('clearly and explicitly answers both what AND when with concrete trigger phrases'); anchor 4 applies only when the 'when' is loose or only weakly specific, which does not fit here.

5 / 5

Trigger Term Quality

Strong natural phrases users would say: "welcome emails", "password resets", "order confirmations", "newsletters", "transactional emails", "HTML email templates". It falls short of anchor 5 because it omits the product name "React Email" itself, file extensions (.html, .tsx), and common synonyms like "responsive email" — anchor 4's 'a few natural terms missing' fits; anchor 3 would require missing common variations, which is not the case here.

4 / 5

Distinctiveness Conflict Risk

The "React components" + "HTML email templates" framing carves a clear niche distinct from generic document or web-page skills, but triggers like "welcome emails" or "notifications" could also fire for plain-text email drafting or non-React email tooling — anchor 4's 'mostly distinct; minor overlap risk with closely related skills'. It is well above anchor 3's 'could still overlap with similar skills' and below anchor 5, which requires minimal conflict risk.

4 / 5

Total

16

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

skill_md_line_count

SKILL.md is long (519 lines); consider splitting into references/ and linking

Warning

Total

15

/

16

Passed

Repository
novuhq/novu
Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.