LLM Skills & AI Integration
Relevant source files
The following files were used as context for generating this wiki page:
React Email integrates Large Language Model (LLM) support through standardized Agent Skills and specialized UI components. This system teaches AI coding agents—such as Claude Code, Cursor, and GitHub Copilot—how to construct compliant, responsive email templates using React components. The project also exposes specific documentation endpoints optimized for AI consumption and provides a "Copy for AI" feature in the web interface to generate contextual prompts for debugging.
Sources: README.md:46-52, skills/react-email/README.md:12-20
React Email Agent Skill
The Agent Skill is a standardized knowledge package that teaches AI agents the workflows, constraints, and components required for email development. It follows the Agent Skills specification, prioritizing efficient context usage through progressive disclosure.
Skill Structure
The skill organizes information into three layers:
- Metadata: Defines the skill name, description, and installation KIND.
- Core Instructions: Found in
SKILL.md, these contain the primary behavioral guidelines and mandatory coding patterns. - Detailed References: Documentation for components, styling, and internationalization loaded on-demand.
Sources: skills/react-email/SKILL.md:1-20, skills/react-email/README.md:22-30
Installation and Activation
Users install the skill into their local environment to provide their AI agents with the necessary context for building email templates.
npx skills add resend/react-email
Sources: README.md:50, skills/react-email/SKILL.md:25
The diagram shows the flow from installation to how an AI agent consumes the skill instructions to validate and generate code.
AI Behavioral Guidelines
The React Email skill enforces specific constraints on AI agents to ensure generated code remains compatible with restrictive email clients like Outlook and Gmail. Agents must follow these rules regardless of user pressure.
Critical Constraints
AI agents are instructed to adhere to the following technical requirements:
- Template Variables: Agents must use TypeScript properties (e.g.,
{name}) in JSX and place mustache strings (e.g.,{{name}}) only inPreviewProps. - Layout Engines: Agents must avoid Flexbox and CSS Grid, using
RowandColumncomponents instead to ensure compatibility with Outlook's Word-based rendering. - Tailwind Units: The skill mandates the use of
pixelBasedPresetbecause email clients do not supportremunits. - Media Queries: Agents must avoid responsive breakpoints (e.g.,
sm:,lg:) and dark mode selectors (dark:) as they are unreliable across major clients.
Sources: skills/react-email/SKILL.md:76-88, skills/react-email/SKILL.md:135-155, skills/react-email/TESTS.md:12-85
Mandatory Logic for AI Agents
| Constraint | Requirement | Rationale |
|---|---|---|
| Image Formats | PNG or JPG only | SVG and WEBP do not render reliably in Gmail or Outlook. |
| Button Styling | Must include box-border | Prevents padding from overflowing the button width. |
| Dividers (Hr) | Must specify border-solid | Email clients do not inherit border types. |
| Static Assets | Use baseURL pattern | Ensures images load in both local dev and production CDNs. |
Sources: skills/react-email/SKILL.md:162-175, skills/react-email/SKILL.md:200-215, skills/react-email/TESTS.md:130-150
AI Prompt Generation Interface
The CopyForAI component provides a user interface to generate specialized prompts based on template analysis. It aggregates issues from the linter, compatibility checker, and spam filters to create a comprehensive debugging request for an LLM.
Prompt Construction Logic
The system implements specific builders for different categories of issues:
- buildLinterPrompt: Identifies broken links, insecure URLs (HTTP), and missing alt text.
- buildCompatibilityPrompt: Maps unsupported CSS/HTML features to specific email clients (e.g., Outlook vs. Gmail).
- buildSpamPrompt: Summarizes SpamAssassin penalties and suggests copy rewrites.
Sources: packages/ui/src/components/toolbar/copy-for-ai.tsx:55-150
Integration Flow
The component targets specific AI tools by formatting URLs with pre-filled prompts.
The sequence diagram illustrates how issue data is processed into a single prompt and delivered to an external LLM service.
Sources: packages/ui/src/components/toolbar/copy-for-ai.tsx:152-250
Automated Skill Compliance Testing
The project maintains a suite of compliance tests in TESTS.md to verify that AI agents follow the skill instructions. These tests use a Test-Driven Development (TDD) approach to ensure agents do not regress into non-compliant patterns.
Verified Scenarios
- Test A4 (Media Queries): Confirms the agent uses mobile-first stacked layouts instead of Tailwind breakpoints.
- Test A6 (pixelBasedPreset): Verifies the inclusion of the pixel preset in the Tailwind configuration.
- Test D1 (Pressure Test): Challenges the agent to ignore explicit user instructions to use forbidden patterns (SVG, Flexbox), ensuring the agent maintains technical compliance.
Sources: skills/react-email/TESTS.md:95-125, skills/react-email/TESTS.md:245-270
LLM Documentation Endpoints
React Email provides documentation optimized for LLM consumption through specific content negotiation. The web application uses a proxy to serve markdown versions of the documentation when requested by an agent.
- Root LLM Doc:
react.email/llms.txt - Component Docs: Individual component pages (e.g.,
/components/button) serve markdown when theAcceptheader includestext/markdown.
Sources: README.md:52, apps/web/src/proxy.spec.ts:34-60
Summary
AI integration in React Email relies on the Agent Skill to enforce strict email-safe coding standards and the Copy for AI toolbar to bridge the gap between automated linting and AI-assisted debugging. By providing structured instructions and optimized documentation endpoints, the project ensures that LLMs generate high-quality, compatible email templates.