#601

Globales Ranking · von 601 Skills

react-email AI Agent Skill

Quellcode ansehen: oakoss/agent-skills

Safe

Installation

npx skills add oakoss/agent-skills --skill react-email

38

Installationen

React Email

Overview

React Email is a library for building responsive HTML emails using React components. It provides a set of unstyled, accessible components that render to email-client-compatible HTML. Supports inline styles, Tailwind CSS via a wrapper component, custom web fonts, and rendering to both HTML and plain text.

When to use: Transactional emails (welcome, password reset, receipts), marketing templates, email design systems, any project that renders emails server-side.

When NOT to use: Static HTML email templates with no dynamic content, projects that already use a dedicated email builder (MJML, Maizzle), or when you only need plain-text emails.

Quick Reference

Pattern API Key Points
Document structure Html, Head, Body Html wraps everything, Head loads fonts/meta
Content container Container Centers content, sets max-width
Layout grid Section, Row, Column Table-based layout for email clients
Text content Text, Heading Heading accepts as prop for h1-h6
Links Link Standard anchor, href required
Call-to-action Button Renders as link styled as button, href required
Images Img Always set width, height, alt
Divider Hr Horizontal rule between sections
Inbox preview Preview Sets preview text shown in inbox list
Custom fonts Font Place inside Head, set webFont and fallbackFontFamily
Tailwind styling Tailwind Wraps email, inlines Tailwind classes at render
Render to HTML render(<Email />) Async, returns HTML string
Render plain text render(<Email />, { plainText: true }) Strips HTML, returns text
Pretty output render(<Email />, { pretty: true }) Formatted HTML for debugging
Preview server email dev Local dev server with hot reload
Markdown content Markdown Renders Markdown as email-compatible HTML
Code blocks CodeBlock Syntax-highlighted code with theme support
Inline code CodeInline Monospace inline code spans

Common Mistakes

Mistake Correct Pattern
Using className with inline styles Use either Tailwind (className) or inline style objects, not both on the same element
Forgetting width/height on Img Always specify dimensions to prevent layout shifts in email clients
Nesting Container inside Container Use one Container for centering, Section/Row/Column for inner layout
Using CSS Grid or Flexbox Use Section, Row, Column for table-based layouts that work across email clients
Placing Font outside Head Font must be a child of Head to load correctly
Using render() synchronously render() is async, always await the result
Wrapping Tailwind inside Html Tailwind wraps Html, not the other way around
Omitting Preview component Without Preview, email clients show the first body text as preview
Using external CSS stylesheets Email clients strip <link> tags; use inline styles or Tailwind component
Passing React component to resend.emails.send Render to HTML string first, then pass html to the send method

Delegation

  • Email template discovery: Use Explore agent
  • Email styling review: Use Task agent
  • Code review: Delegate to code-reviewer agent

If the resend skill is available, delegate email delivery tasks to it.
Otherwise, recommend: npx skills add oakoss/agent-skills --skill resend

References

Installationen

Installationen 38
Globales Ranking #601 von 601

Sicherheitsprüfung

ath Safe
socket Safe
Warnungen: 0 Bewertung: 90
snyk Low
EU EU-Hosted Inference API

Power your AI Agents with the best open-source models.

Drop-in OpenAI-compatible API. No data leaves Europe.

Explore Inference API

GLM

GLM 5

$1.00 / $3.20

per M tokens

Kimi

Kimi K2.5

$0.60 / $2.80

per M tokens

MiniMax

MiniMax M2.5

$0.30 / $1.20

per M tokens

Qwen

Qwen3.5 122B

$0.40 / $3.00

per M tokens

So verwenden Sie diesen Skill

1

Install react-email by running npx skills add oakoss/agent-skills --skill react-email in your project directory. Führen Sie den obigen Installationsbefehl in Ihrem Projektverzeichnis aus. Die Skill-Datei wird von GitHub heruntergeladen und in Ihrem Projekt platziert.

2

Keine Konfiguration erforderlich. Ihr KI-Agent (Claude Code, Cursor, Windsurf usw.) erkennt installierte Skills automatisch und nutzt sie als Kontext bei der Code-Generierung.

3

Der Skill verbessert das Verständnis Ihres Agenten für react-email, und hilft ihm, etablierte Muster zu befolgen, häufige Fehler zu vermeiden und produktionsreifen Code zu erzeugen.

Was Sie erhalten

Skills sind Klartext-Anweisungsdateien — kein ausführbarer Code. Sie kodieren Expertenwissen über Frameworks, Sprachen oder Tools, das Ihr KI-Agent liest, um seine Ausgabe zu verbessern. Das bedeutet null Laufzeit-Overhead, keine Abhängigkeitskonflikte und volle Transparenz: Sie können jede Anweisung vor der Installation lesen und prüfen.

Kompatibilität

Dieser Skill funktioniert mit jedem KI-Coding-Agenten, der das skills.sh-Format unterstützt, einschließlich Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider und anderen Tools, die projektbezogene Kontextdateien lesen. Skills sind auf Transportebene framework-agnostisch — der Inhalt bestimmt, für welche Sprache oder welches Framework er gilt.

Data sourced from the skills.sh registry and GitHub. Install counts and security audits are updated regularly.

EU Made in Europe

Chat with 100+ AI Models in one App.

Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.

Start for free View pricing
Kundensupport