react-email은(는) 무엇을 하나요?
React 컴포넌트로 HTML 이메일 템플릿을 제작하고, React Email 비주얼 에디터를 애플리케이션에 추가하며, 이메일을 HTML로 렌더링하거나 Resend로 이메일을 발송할 때 사용합니다. 환영 이메일, 비밀번호 재설정, 알림, 주문 확인, 뉴스레터, 트랜잭션 이메일 및 임베드 가능한 이메일 에디터 컴포넌트를 포함합니다.
React 컴포넌트로 HTML 이메일 템플릿을 제작하고, React Email 비주얼 에디터를 애플리케이션에 추가하며, 이메일을 HTML로 렌더링하거나 Resend로 이메일을 발송할 때 사용합니다. 환영 이메일, 비밀번호 재설정, 알림, 주문 확인, 뉴스레터, 트랜잭션 이메일 및 임베드 가능한 이메일 에디터 컴포넌트를 포함합니다.
이 스킬은 개발자가 React 기반의 HTML 이메일 템플릿을 구축할 수 있도록 지원하며, 시각적 이메일 에디터를 애플리케이션에 통합하는 기능을 제공합니다. React Email의 비주얼 에디터를 활용하여 코드 없이도 이메일 디자인을 편집할 수 있고, 템플릿을 HTML로 렌더링한 후 Resend API를 통해 실제로 전송할 수 있습니다. 환영 이메일, 비밀번호 재설정, 알림, 주문 확인, 뉴스레터, 트랜잭션 이메일 등 일반적인 이메일 유형을 모두 지원하며, 임베드 가능한 에디터 컴포넌트를 통해 사용자에게 맞춤형 이메일 작성 환경을 제공할 수 있습니다. 주로 Claude Code, Cursor, Codex와 같은 AI 에이전트 플랫폼에서 이메일 관련 기능을 구현할 때 유용하며, SKILL.md 문서에 정의된 워크플로우와 Resend API 명세를 참고하여 안정적으로 작동합니다.
npx skills add https://github.com/resend/resend-skills/tree/main/skills/react-emailInstalled? Explore more 이미지 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →
React 컴포넌트로 HTML 이메일 템플릿을 제작하고, React Email 비주얼 에디터를 애플리케이션에 추가하며, 이메일을 HTML로 렌더링하거나 Resend로 이메일을 발송할 때 사용합니다. 환영 이메일, 비밀번호 재설정, 알림, 주문 확인, 뉴스레터, 트랜잭션 이메일 및 임베드 가능한 이메일 에디터 컴포넌트를 포함합니다.
This repo contains 4 individual skills — each has its own dedicated page.
Use when building any system where email content triggers actions — AI agent inboxes, automated support handlers, email-to-task pipelines, or any workflow processing untrusted inbound email. Always use this skill when the user wants to receive emails and act on them programmatically, even if they don't mention "agent" — the skill contains critical security patterns (sender allowlists, content filtering, sandboxed processing) that prevent untrusted email from controlling your system.
Use when building email features, emails going to spam, high bounce rates, setting up SPF/DKIM/DMARC authentication, implementing email capture, ensuring compliance (CAN-SPAM, GDPR, CASL), handling webhooks, retry logic, making emails accessible (alt text, headings, contrast, screen readers), or deciding transactional vs marketing.
Use when working with the Resend email API — sending transactional emails (single or batch), receiving inbound emails via webhooks, managing email templates, tracking delivery events, managing domains, contacts, broadcasts, webhooks, API keys, automations, events, viewing API request logs, or setting up the Resend SDK. Always use this skill when the user mentions Resend, even for simple tasks like "send an email with Resend" — the skill contains critical gotchas (idempotency keys, webhook verification, template variable syntax) that prevent common production issues.
Operate the Resend platform from the terminal — send emails (including React Email .tsx templates via --react-email), manage domains, contacts, broadcasts, templates, webhooks, API keys, logs, automations, and events via the `resend` CLI. Use when the user wants to run Resend commands in the shell, scripts, or CI/CD pipelines, or send/preview React Email templates. Always load this skill before running `resend` commands — it contains the non-interactive flag contract and gotchas that prevent silent failures.
Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.
Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.
Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.
This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.