Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

React Email Skill — measured AI agent skill | DecimalAI

zzafergok/react-email-skill

SkillScore100Maintained

Build and send HTML email templates using React Email components. Use when creating welcome emails, password resets, notifications, order confirmations, or any transactional email template. Works with Resend (already integrated in Talent Architect via lib/server/integrations).

by zzafergok

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

decimalai skills pull zzafergok-react-email-skill

Get this skill — curl · raw file

curl -fsSL https://app.decimal.ai/s/zzafergok-react-email-skill/SKILL.md

Raw file: /s/zzafergok-react-email-skill/SKILL.md ↗ · machine-readable summary at /s/zzafergok-react-email-skill.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

25 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 3d ago

Yes — +36% lift · at higher cost+71% tokens0% turns100% of whole cases pass with skill (25/25)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-01	✗→✓	▲ Improved	50%	0%
case-02	✗→✓	▲ Improved	7%	0%
case-03	✗→✓	▲ Improved	41%	0%
case-09	✗→✓	▲ Improved	62%	0%
case-11	✗→✓	▲ Improved	36%	0%

Showing 5 of 25 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/2/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

zzafergok / skills

04-frontend-development/react-email-skill/SKILL.md

View on GitHub ↗

Imported 8/2/2026Version v1

Skill contents

SKILL.md

React Email Skill

React bileşenleriyle HTML email şablonları oluşturma ve Resend ile gönderme rehberi.

Talent Architect Notu: Proje Resend SDK'yı zaten kullanıyor (resend: ^6.9.3). Email gönderimi lib/server/integrations/ altındaki servis katmanı üzerinden geçmeli.

When to use this skill

Yeni email şablonu oluşturulurken (welcome, password reset, bildirim, hesap onay)
Mevcut email template'i refactor edilirken
Email i18n (TR/EN) implementasyonu yapılırken
Email preview geliştirme ortamında test edilirken

1. Kurulum

bash
npx create-email@latest
cd react-email-starter
npm install
npm run dev

Mevcut projeye eklemek için package.json'a:

json
{
  "scripts": {
    "email": "email dev --dir emails --port 3000"
  }
}

2. Temel Şablon Yapısı

tsx
import {
  Html,
  Head,
  Preview,
  Body,
  Container,
  Heading,
  Text,
  Button,
  Tailwind,
  pixelBasedPreset,
} from '@react-email/components'

interface WelcomeEmailProps {
  name: string
  verificationUrl: string
}

export default function WelcomeEmail({ name, verificationUrl }: WelcomeEmailProps) {
  return (
    <Html lang='tr'>
      <Tailwind config={{ presets: [pixelBasedPreset] }}>
        <Head />
        <Preview>Talent Architect — Email adresinizi doğrulayın</Preview>
        <Body className='bg-gray-100 font-sans'>
          <Container className='max-w-xl mx-auto p-5 bg-white'>
            <Heading className='text-2xl text-gray-800'>Hoş geldiniz, {name}!</Heading>
            <Text className='text-base text-gray-700'>Hesabınızı aktifleştirmek için aşağıdaki butona tıklayın.</Text>
            <Button
              href={verificationUrl}
              className='bg-blue-600 text-white px-5 py-3 rounded block text-center no-underline box-border'
            >
              Email Adresimi Doğrula
            </Button>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

WelcomeEmail.PreviewProps = {
  name: 'Zafer',
  verificationUrl: 'https://talent-architect.com/verify/abc123 ',
} satisfies WelcomeEmailProps

3. Temel Component'ler

| Component | Amaç | | ---------------- | ----------------------------------------------- | | Html | Root wrapper (lang attribute ile) | | Head | Meta, stiller | | Body | Ana içerik sarmalayıcı | | Container | İçeriği ortalar (max-width) | | Preview | Gelen kutusunda preview metni — Body'den önce | | Heading | h1–h6 başlıklar | | Text | Paragraflar | | Button | Link buton — box-border zorunlu | | Link | Hyperlink | | Img | Resim — absolute URL zorunlu | | Hr | Yatay bölücü — border-solid zorunlu | | Row + Column | Çok sütunlu layout | | Section | Layout bölümleri | | Tailwind | Tailwind CSS'i aktif eder |

4. Kritik Stil Kuralları

Zorunlu Class'lar

| Component | Zorunlu Class | Neden | | ------------------ | ----------------------------------- | ------------------------------ | | Button | box-border | Padding overflow önler | | Hr / border | border-solid | Email client'lar inherit etmez | | Tek taraflı border | border-none border-t border-solid | Diğer kenarları sıfırla |

Email Client Kısıtlamaları — Asla Yapma

SVG veya WEBP kullanma — email client'larda render sorunları
Flexbox veya CSS Grid kullanma — Row/Column kullan
Tailwind responsive prefix (sm:, md:) kullanma — desteklenmez
Dark mode class'ları (dark:) kullanma — desteklenmez
Media query kullanma — email client'larda çalışmaz

Görsel Değişkenler

tsx
const baseURL = process.env.NODE_ENV === 'production'
  ? 'https://cdn.talent-architect.com '
  : ''

<Img src={`${baseURL}/static/logo.png`} alt='Talent Architect' width='150' height='50' />

5. Resend ile Gönderme

typescript
import { Resend } from 'resend'
import { WelcomeEmail } from '@/emails/welcome'

const resend = new Resend(process.env.RESEND_API_KEY)

const { data, error } = await resend.emails.send({
  from: 'Talent Architect <noreply@talent-architect.com>',
  to: [user.email],
  subject: 'Email adresinizi doğrulayın',
  react: <WelcomeEmail name={user.name} verificationUrl={verificationUrl} />
})

if (error) {
  console.error('Email gönderilemedi:', error)
}

Talent Architect entegrasyonu: Bu kodu doğrudan route handler'a yazmak yerine lib/server/integrations/ altına taşı.

6. i18n (next-intl ile)

tsx
import { createTranslator } from 'next-intl'

interface EmailProps {
  name: string
  locale: 'tr' | 'en'
}

export default async function WelcomeEmail({ name, locale }: EmailProps) {
  const t = createTranslator({
    messages: await import(`../messages/${locale}.json`),
    namespace: 'welcome-email',
    locale,
  })

  return (
    <Html lang={locale}>
      <Body>
        <Text>
          {t('greeting')} {name},
        </Text>
        <Button href='...'>{t('cta')}</Button>
      </Body>
    </Html>
  )
}

7. HTML Render

typescript
import { render } from '@react-email/components'
import { WelcomeEmail } from './emails/welcome'

const html = await render(<WelcomeEmail name='Zafer' verificationUrl='...' />)
const text = await render(<WelcomeEmail name='Zafer' verificationUrl='...' />, { plainText: true })

8. Statik Dosya Yapısı

emails/
  welcome.tsx
  password-reset.tsx
  static/
    logo.png        ← PNG/JPG (SVG/WEBP değil)
    banner.jpg

9. Best Practices

Her email için PreviewProps tanımla — geliştirme testi için
Max dosya boyutu 102KB — Gmail büyük email'leri kırpar
plainText versiyonu her zaman oluştur — accessibility ve bazı email client'lar
Absolute URL kullan tüm görsellerde
Test et: Gmail, Outlook, Apple Mail, Yahoo Mail
{{variableName}} pattern'ını template içine yazma — TypeScript prop olarak geç
lang attribute her zaman Html component'inde olmalı

10. Email Türleri (Talent Architect)

| Email Türü | Tetikleyici | Template | | -------------------- | ----------------- | -------------------------- | | Email doğrulama | Kayıt | verify-email.tsx | | Şifre sıfırlama | Şifre sıfırla | password-reset.tsx | | Subscription onay | Ödeme başarılı | subscription-confirm.tsx | | CV analiz tamamlandı | ATS analizi bitti | analysis-complete.tsx | | Hesap uyarısı | Güvenlik olayı | security-alert.tsx |

Want to see if zzafergok/react-email-skill would activate on your phrasing? Try it before you install — no LLM call, no signup.

Other measured skills in the registry, with their headline benchmark lift.