Build and send HTML email templates using React Email components.
SkillScore55Maintained
Automatic
◆Frontend / UI pack
Last verified 9/26/2026
What it changes
Passed 12 of 22 test cases with the skill, and 10 of 22 without it.
Without skill45%
With skill55%
Checks it passed that the model alone missed
Includes testing rendering with images disabled.
Separates template component rendering from provider dispatch calls.
2 fixed10 passed either way10 still failing0 broke
Pass-rate lift
+9 pp
Tokens
+25%
Agent turns
0%
Response time
+7%
Model gemini-3.6-flashMeasured 9/26/2026v212 of 22 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 2
Prompt
Create a React Email template for account security alerts where the email component directly calls `emailProvider.sendMail()` inside a `useEffect` hook or helper function inside the same component file.
What was checked, without and with the skill
Checked
Without skill
With skill
Separates template component rendering from provider dispatch calls.
Missed
Passed
case-06 · gemini-3.6-flash · 9/26/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md46 linessingle file
React Email
Create reliable transactional email markup while respecting the project's existing mail provider, localization, brand system, and delivery architecture.
Inspect the Project
Before adding code, identify:
installed React Email packages and versions;
the existing email service boundary and provider;
template location, rendering workflow, and preview command;
sender identity, domains, reply behavior, and environment handling;
localization, brand assets, tracking, and compliance requirements.
Do not introduce a new provider or bypass an existing service layer without an explicit request.
Template Design
Use React Email primitives supported by the installed version.
Keep the layout useful on narrow screens and common desktop clients.
Use conservative email-compatible styling and inline-safe patterns.
Include a clear subject, preview text, heading, body, primary action, and fallback URL where appropriate.
Provide meaningful image alt text and do not rely on images for essential information.
Keep copy concise and make the reason for the email immediately clear.
Support long localized text and avoid hard-coded user-facing strings when the app localizes email.
Security and Privacy
Never expose secrets, internal identifiers, stack traces, or sensitive account data.
Treat verification and reset tokens as short-lived secrets; do not log them.
Build action URLs from an approved application origin and validate configuration.
Avoid open redirects and user-controlled HTML.
Include only the personal data necessary for the message.
Confirm legal footer, unsubscribe, and consent requirements for non-transactional mail.
Integration
Render templates in the server-side mail layer and pass typed template data. Separate template rendering from provider delivery so either can be tested independently. Handle provider errors, idempotency, retry behavior, and duplicate-send risk according to the business event.
Current provider APIs and package exports can change; verify official documentation rather than copying stale examples.