email-best-practices

โดย resend

คำแนะนำครอบคลุมสำหรับการสร้างระบบอีเมลที่ส่งถึงผู้รับได้ ปฏิบัติตามข้อกำหนด และใช้งานง่าย ครอบคลุมการตั้งค่าการยืนยันตัวตน (SPF/DKIM/DMARC) การแก้ไขปัญหาสแปม และแนวทางปฏิบัติที่ดีที่สุดในการส่งถึงผู้รับเพื่อป้องกันไม่ให้อีเมลตกอยู่ในสแปม รวมถึงเทมเพลตและรูปแบบสำหรับอีเมลธุรกรรม (การรีเซ็ตรหัสผ่าน OTP การยืนยัน) และอีเมลการตลาดที่มีขั้นตอนการขอความยินยอมที่เหมาะสม ให้กรอบการปฏิบัติตามข้อกำหนดสำหรับกฎหมาย CAN-SPAM, GDPR และ CASL พร้อมด้วยการยืนยันแบบสองขั้นตอนและรายการระงับ...

npx skills add https://github.com/resend/email-best-practices --skill email-best-practices

Email Best Practices

Guidance for building deliverable, compliant, user-friendly emails.

Architecture Overview

[User] → [Email Form] → [Validation] → [Double Opt-In]
                                              ↓
                                    [Consent Recorded]
                                              ↓
[Suppression Check] ←──────────────[Ready to Send]
        ↓
[Idempotent Send + Retry] ──────→ [Email API]
                                       ↓
                              [Webhook Events]
                                       ↓
              ┌────────┬────────┬─────────────┐
              ↓        ↓        ↓             ↓
         Delivered  Bounced  Complained  Opened/Clicked
                       ↓        ↓
              [Suppression List Updated]
                       ↓
              [List Hygiene Jobs]

Quick Reference

Need to...See
Set up SPF/DKIM/DMARC, fix spam issuesDeliverability
Build password reset, OTP, confirmationsTransactional Emails
Plan which emails your app needsTransactional Email Catalog
Build newsletter signup, validate emailsEmail Capture
Send newsletters, promotionsMarketing Emails
Ensure CAN-SPAM/GDPR/CASL complianceCompliance
Decide transactional vs marketingEmail Types
Handle retries, idempotency, errorsSending Reliability
Process delivery events, set up webhooksWebhooks & Events
Manage bounces, complaints, suppressionList Management
Make emails accessible (screen readers, alt text, contrast)Accessibility

Start Here

New app? Start with the Catalog to plan which emails your app needs (password reset, verification, etc.), then set up Deliverability (DNS authentication) before sending your first email.

Spam issues? Check Deliverability first—authentication problems are the most common cause. Gmail/Yahoo reject unauthenticated emails.

Marketing emails? Follow this path: Email Capture (collect consent) → Compliance (legal requirements) → Marketing Emails (best practices).

Production-ready sending? Add reliability: Sending Reliability (retry + idempotency) → Webhooks & Events (track delivery) → List Management (handle bounces).

Accessibility? Most emails fail basic accessibility checks. See Accessibility for lang/dir, presentational tables, headings, alt text, <title>, and contrast.

Skills เพิ่มเติมจาก resend

send-email
resend
การส่งอีเมลแบบธุรกรรมและแบบกลุ่มผ่าน Resend API ด้วยปลายทางเดี่ยวหรือปลายทางแบบชุด เลือกปลายทางเดี่ยวสำหรับอีเมลแต่ละฉบับที่มีไฟล์แนบหรือการกำหนดเวลา ใช้ปลายทางแบบชุดสำหรับอีเมล 2–100 ฉบับที่แตกต่างกันในคำขอเดียวเพื่อลดการเรียก API ใช้คีย์ idempotency (รูปแบบ <event-type>/<entity-id>) เพื่อป้องกันการส่งซ้ำเมื่อมีการลองใหม่ โดยหมดอายุใน 24 ชั่วโมง ลองใหม่เฉพาะการตอบสนอง 429 (จำกัดอัตรา) และ 500 (ข้อผิดพลาดเซิร์ฟเวอร์) โดยใช้ exponential backoff แก้ไขข้อผิดพลาดการตรวจสอบ 400/422 โดยไม่ต้อง...
templates
resend
ใช้เมื่อสร้าง อัปเดต เผยแพร่ ลบ หรือแสดงรายการเทมเพลตอีเมล Resend ผ่าน API หรือเมื่อกำหนดตัวแปรเทมเพลต ทำความเข้าใจฉบับร่างเทียบกับ...
design-audit
resend
ตรวจสอบแดชบอร์ด Resend เพื่อความสอดคล้องกับระบบการออกแบบ กำหนดเส้นทางมาที่นี่เมื่อผู้ใช้พูดว่า "audit design", "design alignment", "dashboard design audit" หรือถามเกี่ยวกับ…
marketing-pages
resend
ใช้เมื่อสร้าง อัปเดต แก้ไข หรือลบเพจการตลาด/เพจสาธารณะในโค้ดเบสของ Resend ครอบคลุมโครงสร้างเพจ กฎการนำคอมโพเนนต์กลับมาใช้ใหม่ และ...
resend-design-skills
resend
ใช้เมื่อต้องการทรัพยากรการออกแบบของ Resend นำทางไปยังแนวทางของแบรนด์ อัตลักษณ์ทางภาพ คอมโพเนนต์ UI โทเค็นการออกแบบ และรูปแบบหน้าเว็บการตลาด
resend-design-system
resend
ใช้เมื่อสร้างหรือปรับแต่ง UI ในโค้ดเบสของ Resend ให้ API ของคอมโพเนนต์ ตัวเลือกวาเรียนต์ โทเค็นการออกแบบ รูปแบบการประกอบสำหรับ src/ui/… ทั้งหมด
react-email
resend
สร้างและส่งอีเมล HTML โดยใช้ React components พร้อมสไตล์ที่ปลอดภัยสำหรับไคลเอนต์และการทดสอบตัวอย่าง การพัฒนาแบบ component-based รองรับ TypeScript มี core layout components (Html, Body, Container, Section, Row, Column) และ content elements (Heading, Text, Button, Image, CodeBlock) การจัดสไตล์ด้วย Tailwind CSS ผ่าน Tailwind component พร้อม preset แบบ pixel; ต้องใช้ table-based layouts เพื่อความเข้ากันได้กับไคลเอนต์อีเมล ตัวอย่างการแสดงผลบนเซิร์ฟเวอร์พัฒนาท้องถิ่นที่ localhost:3000 พร้อมการแก้ไขแบบเรียลไทม์;...
resend-migrate
resend
ใช้เมื่อย้ายจาก SendGrid, Mailgun หรือ Postmark ไปยัง Resend - ตรวจจับ @sendgrid/mail, sgMail, SENDGRID_API_KEY, mailgun, postmark imports และเส้นทางไปยัง…