One-click install
npx skills add https://github.com/FabioFiorita/tastik --skill react-email-fabiofiorita
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-email
Source: https://github.com/FabioFiorita/tastik/tree/main/.agents/skills/react-email
Command: npx skills add https://github.com/FabioFiorita/tastik --skill react-email-fabiofiorita

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables developers and designers to build consistent, responsive HTML emails using React components and Tailwind styling, handling cross-client rendering, inlined styles, and asset management with a production-ready workflow.

Core Features & Use Cases

  • Tailwind styling with pixelBasedPreset to ensure email client compatibility.
  • Component-based structure (Html, Head, Preview, Body, Row, Column, Img, Button, etc.) for repeatable templates.
  • Support for internationalization and accessible markup, plus guidelines for delivering plain-text versions.
  • Guidance for static asset hosting, baseURL patterns, and safe image referencing for development and production.

Quick Start

Create a minimal email template using Html, Tailwind, and a simple Body layout and render it with Resend.

Frequently Asked Questions about react-email

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build responsive HTML email templates with React and Tailwind?

You can build responsive HTML email templates using React Email components and Tailwind's pixelBasedPreset to ensure consistent cross-client rendering. This approach handles component-based structuring and inlined styles for a production-ready workflow.

What is the best way to ensure consistent email rendering across different email clients?

Using React Email with Tailwind's pixelBasedPreset ensures consistent cross-client rendering by managing inlined styles and safe image references. This component-based structure delivers reliable layout formatting across various email platforms.

How do I add internationalization and plain-text fallbacks to email templates?

React Email supports internationalization and accessible markup within your email templates. You can apply multi-language localization guidelines and generate plain-text fallback versions to ensure accessibility and broad compatibility.

How do I handle static asset hosting and safe image references in React emails?

You handle static asset hosting in React emails by using a production-friendly baseURL pattern for safe image referencing. This ensures images render correctly during both development and production deployment phases.

Can I use Row and Column layouts to create complex email designs?

Yes, you can use React Email's Row and Column components alongside standard elements like Html, Body, and Img to create repeatable template layouts. This structure enables complex, responsive multi-column email designs.

What are the limitations of using component-based structures for email design?

Component-based email design requires adhering to Tailwind's pixelBasedPreset and safe image referencing guidelines to avoid rendering issues. You must also generate plain-text fallbacks and test thoroughly to satisfy cross-client deployment requirements.