react-email

React Email renderer for json-render that turns JSON specs into HTML or plain-text emails using @react-email/components and @react-email/render. Use when working with @json-render/react-email, building transactional or marketing emails from JSON, creating email catalogs, rendering AI-generated email specs, or when the user mentions react-email, HTML email, or transactional email.

Quality

85%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Low

Low-risk findings worth noting

Quality

Content

82%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 well-crafted reference-style skill body: two complete executable examples, comprehensive but compact API and component tables, and zero padding or taught-back concepts. The main gaps are minor — an explicit step framing for the extend-and-render workflow and a possible split of the component/export tables into a reference file.

Suggestions

Trim small redundancies: drop the repeated defineCatalog import in the second example and shorten the overlapping setup between Quick Start and the catalog example.

Frame the extension path as an explicit ordered sequence (write spec → define catalog with definitions → defineRegistry with implementations → renderToHtml with registry) so the workflow reads as steps rather than parallel sections.

Consider moving the Standard Components and Sub-path Export tables into a references/ file (e.g. COMPONENTS.md) to keep SKILL.md as a lean overview.

Dimension	Reasoning	Score
Conciseness	The body is dense and information-forward — tables and code dominate, with no explanation of concepts Claude already knows. Minor trims are possible: the second example re-imports defineCatalog, the two code examples overlap slightly, and a few best-practice bullets ('Test in multiple clients') are advice Claude could partly infer. Not 5 because of this small redundancy; not 3 because there is no genuinely unnecessary explanation.	4 / 5
Actionability	Fully executable, copy-paste-ready Quick Start covering the common case, plus a complete custom-component example (Zod props + registry implementation), API tables for render functions, RenderOptions, exports, and sub-path imports. Specific examples cover the common cases with no gaps.	5 / 5
Workflow Clarity	Sections progress in a sensible order (spec structure → catalog → registry → render APIs → state → server-safe imports), and the catalog→registry→renderToHtml extension path is shown end-to-end in code. It falls short of 5 because the process is implied by section order rather than framed as an explicit sequence with checkpoints; no validation is needed since rendering is non-destructive.	4 / 5
Progressive Disclosure	The single SKILL.md body (~175 lines) is well-organized with clear section headers and tables, and no bundle files exist to reference. It is above the under-50-line simple-skill threshold, and the full component/export tables could arguably live in a reference file, which keeps it at 'good structure with minor organization gaps' rather than fully appropriate splitting.	4 / 5
	Total	17 / 20 Passed

Description

87%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 description: third-person, concrete, with an explicit multi-trigger 'Use when' clause and domain-specific keywords that make it both discoverable and distinct from generic email or React skills. Only minor improvements possible around synonym coverage (e.g., 'email template') and naming the catalog/registry capability directly in the what-clause.

Dimension	Reasoning	Score
Specificity	The description names the domain and several concrete actions — 'turns JSON specs into HTML or plain-text emails', 'building transactional or marketing emails from JSON', 'creating email catalogs', 'rendering AI-generated email specs' — with minor gaps (e.g., no mention of component registries or custom components). It sits between the 1-2-actions anchor (3) and comprehensive coverage (5), noticeably above the midpoint.	4 / 5
Completeness	Clearly answers both: what ('React Email renderer ... turns JSON specs into HTML or plain-text emails using @react-email/components and @react-email/render') and when (an explicit 'Use when working with ... building ... creating ... rendering ... or when the user mentions react-email, HTML email, or transactional email' clause with concrete trigger phrases).	5 / 5
Trigger Term Quality	Good keyword coverage including natural phrases users would say: 'react-email', 'HTML email', 'transactional email', 'marketing emails', plus package names like '@json-render/react-email'. A few natural variations are missing (e.g., 'email template', 'email design', '.html').	4 / 5
Distinctiveness Conflict Risk	Clear niche — the JSON-spec-to-email rendering integration tied to the specific 'react-email' package — with distinct trigger terms; minimal risk of firing for unrelated skills.	5 / 5
	Total	18 / 20 Passed

Validation

93%

Warnings & errors only

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

Criteria	Description	Result
metadata_version	'metadata.version' is missing	Warning

	Total	15 / 16 Passed

Repository: vercel-labs/json-render
Path: skills/react-email/SKILL.md
Commit: c2600d7

Reviewed: 1 day ago

Table of Contents

Discovery Implementation Validation

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.