/add-react-email

Arguments: $ARGUMENTS

Goal: Set up React Email integration with Resend for building and managing professional email templates with reusable React components.

Core Principles:

• Automate dependency installation and directory setup
• Provide example templates demonstrating best practices
• Enable preview server for template development
• Integrate seamlessly with Resend API for sending

Phase 1: Discovery Goal: Understand project context and requirements

Actions:

• Check if $ARGUMENTS contains template name or is empty
• Detect if project is Node.js: !{bash test -f package.json && echo "Node.js project" || echo "Not found"}
• Load package.json to understand existing dependencies: @package.json

Phase 2: Planning Goal: Design the React Email setup approach

Actions:

• Determine if project has existing email setup: !{bash ls -la src/emails/ emails/ 2>/dev/null || echo "No email directory found"}
• Verify Node.js version supports React Email: !{bash node -v}
• Plan directory structure: emails/ for components, emails/templates/ for template exports
• Identify integration points with Resend API

Phase 3: Setup Goal: Execute React Email integration setup

Actions:

Task(description="Setup React Email integration", subagent_type="resend-templates-agent", prompt="You are the resend-templates-agent. Set up React Email integration for $ARGUMENTS.

Context: This is a fresh React Email setup for building professional email templates.

Requirements:

• Install @react-email/components and related dependencies
• Create emails/ directory structure with subdirectories (components, templates, previews)
• Generate 3 example templates: welcome email, password reset, notification
• Create preview server configuration for email development
• Add npm scripts for preview server and template building
• Document React Email component usage and Resend integration

Each template should demonstrate:

• React Email component structure
• Variable placeholders for dynamic content
• Responsive design patterns
• Email client compatibility

Expected output: Complete React Email setup with working examples and documentation")

Phase 4: Verification Goal: Confirm setup completed successfully

Actions:

• Check emails directory was created: !{bash test -d emails && echo "Success: emails directory created" || echo "Error: directory not found"}
• List generated template files: !{bash ls -la emails/templates/ 2>/dev/null || echo "Templates not found"}
• Verify dependencies installed: !{bash npm list @react-email/components 2>/dev/null | head -3}

Phase 5: Summary Goal: Document what was accomplished

Actions:

• List all created files and directories
• Display preview server startup instructions
• Show example template locations and usage
• Document next steps for creating additional templates
• Suggest integration with Resend send API