creativecodeology/react-email
Build email templates with @react-email/components (v1.0+) and render them server-side for Resend or any email provider. Use this skill whenever creating, editing, debugging, or reviewing React Email templates — even for simple tasks like 'add a button to the welcome email' or 'create a password reset email'. The skill contains critical email client compatibility rules (no flexbox, no rem units, pixelBasedPreset requirement, Outlook conditional comments) that prevent broken rendering in production. Triggers on: React Email components, email templates, @react-email/components imports, Tailwind in emails, email layout, email styling, Html/Head/Body/Container/Section/Row/Column/Text/Button/Img/Link/Hr/Preview components, render() from @react-email/render, PreviewProps, pixelBasedPreset, email client compatibility, Outlook rendering, Gmail rendering.
95
95%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
Quality
Discovery
100%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is an excellent skill description that excels across all dimensions. It provides specific actions, comprehensive trigger terms, explicit 'when to use' guidance, and a clearly defined niche. The inclusion of concrete examples ('add a button to the welcome email'), technical constraints, and an exhaustive trigger list makes this highly effective for skill selection.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'Build email templates', 'render them server-side', 'creating, editing, debugging, or reviewing React Email templates', and provides concrete examples like 'add a button to the welcome email' or 'create a password reset email'. Also specifies technical constraints (no flexbox, no rem units, pixelBasedPreset requirement, Outlook conditional comments). | 3 / 3 |
Completeness | Clearly answers both 'what' (build email templates with react-email components, render server-side, contains email client compatibility rules) AND 'when' with explicit triggers ('Use this skill whenever creating, editing, debugging, or reviewing React Email templates' plus the detailed 'Triggers on:' list with specific scenarios). | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural terms users would say, including both high-level terms ('email templates', 'React Email') and specific technical terms ('Html/Head/Body/Container/Section/Row/Column/Text/Button/Img/Link/Hr/Preview components', 'pixelBasedPreset', 'Outlook rendering', 'Gmail rendering'). The explicit 'Triggers on:' list provides comprehensive keyword coverage. | 3 / 3 |
Distinctiveness Conflict Risk | Very clear niche focused specifically on react-email components and email template development. The specific technology stack (react-email v1.0+, Resend), component names, and email-client-specific concerns (Outlook conditional comments, Gmail rendering) make it highly distinguishable from general React skills or other email-related skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
87%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a high-quality skill that efficiently teaches React Email development with excellent actionability and progressive disclosure. The core rules section is particularly valuable, explaining email client limitations that would otherwise cause production bugs. The main weakness is the lack of explicit validation/testing workflow for verifying email rendering across clients before sending.
Suggestions
Add a validation workflow section with steps for testing emails: 1) Preview in dev server, 2) Send test to Litmus/Email on Acid or real clients, 3) Verify rendering in Outlook/Gmail/Apple Mail before production use
Include a brief troubleshooting checklist for when emails render incorrectly (e.g., 'If layout breaks in Outlook, check for flexbox usage; if fonts are wrong size, verify pixelBasedPreset is applied')
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is lean and efficient, assuming Claude's competence with React and TypeScript. It avoids explaining basic concepts and every section provides actionable, non-obvious information specific to email client limitations. | 3 / 3 |
Actionability | Provides fully executable, copy-paste ready code examples throughout. The quick start template is complete and runnable, component reference is concrete, and rendering/sending examples include real import statements and API calls. | 3 / 3 |
Workflow Clarity | While the skill clearly explains what to do and what to avoid, it lacks explicit validation checkpoints. There's no workflow for testing emails across clients, no verification steps before sending, and no feedback loop for catching rendering issues. | 2 / 3 |
Progressive Disclosure | Excellent structure with a quick start template upfront, followed by core rules, then component reference with clear pointers to detailed reference files (references/components.md, references/styling.md, references/patterns.md). Navigation is one level deep and well-signaled. | 3 / 3 |
Total | 11 / 12 Passed |
Validation
100%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
Reviewed
Table of Contents