email-template（电子邮件模板） Skills下载安装命令和教程

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：email-template（电子邮件模板）
来源仓库：https://github.com/cleanexpo/nodejs-starter-v1
仓库路径：skills/email-template
安装命令：
npx skills add https://github.com/cleanexpo/nodejs-starter-v1 --skill email-template
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill；本站只展示命令，不托管安装包，也不自动执行。

skills.shnpx skills

npx skills add https://github.com/cleanexpo/nodejs-starter-v1 --skill email-template

简介

email-template 提供响应式事务邮件模板，基于 React Email 与 Resend 构建深色主题设计。

适用于用户通知、密码重置或定时任务提醒等自动化邮件发送场景。
集成共享组件与预览工具，确保邮件在不同客户端显示一致且符合品牌调性。
使用前请确认邮件服务商配置正确，并测试实际发送效果与链接有效性。
建议将模板与业务逻辑分离，便于独立更新与维护而不影响核心流程。

SKILL.md

Email Template - Responsive Transactional Emails

Description

Provides responsive transactional email template patterns for NodeJS-Starter-V1 using React Email and Resend. Covers Scientific Luxury dark-theme email design, template composition with shared components, preview tooling, and integration with the project's cron jobs and notification flows using Australian locale formatting.

When to Apply

Positive Triggers

Creating transactional email templates (welcome, password reset, alerts)
Building notification emails for cron job reports or agent alerts
Designing email layouts that match the Scientific Luxury design system
Setting up email delivery infrastructure (Resend, SMTP, SendGrid)
Adding email preview and testing tooling
User mentions: "email", "template", "notification", "transactional", "welcome email"

Negative Triggers

Building in-app toast notifications (use UI component patterns)
Sending Slack or webhook notifications (use webhook-handler patterns)
Generating PDF reports (use pdf-generator patterns)
Handling email as CSV import data (use csv-processor instead)

Core Directives

The Four Rules of Email Templates

Table-based layout: Email clients do not support CSS Grid/Flexbox — use <table> wrappers
Inline styles: Most clients strip <style> blocks — React Email handles this automatically
Dark theme first: Scientific Luxury OLED aesthetic adapted for email (dark background, spectral accents)
Preview before send: Every template must render in the React Email preview before deployment

Recommended Stack

Tool	Purpose	Install
`@react-email/components`	Component library for email templates	`pnpm add @react-email/components`
`react-email`	Dev server for previewing templates	`pnpm add -D react-email`
`resend`	Email delivery API (recommended)	`pnpm add resend`

Alternative Providers

Provider	When to Use
Resend	Recommended — React Email native, simple API
SendGrid	Enterprise — high volume, advanced analytics
AWS SES	Cost-effective — already on AWS infrastructure
SMTP	Self-hosted — full control, no vendor lock-in

File Structure

apps/web/
├── emails/                      # Email templates
│   ├── components/              # Shared email components
│   │   ├── email-header.tsx     # Logo + brand header
│   │   ├── email-footer.tsx     # Unsubscribe + address
│   │   └── email-button.tsx     # CTA button
│   ├── welcome.tsx              # Welcome email
│   ├── password-reset.tsx       # Password reset
│   ├── daily-report.tsx         # Daily agent report
│   └── alert-notification.tsx   # System alert
├── lib/email/
│   ├── send.ts                  # Email sending utility
│   └── config.ts                # Provider configuration

Template Patterns

Base Layout Component

import {
  Body,
  Container,
  Head,
  Html,
  Preview,
  Section,
} from '@react-email/components';

interface EmailLayoutProps {
  preview: string;
  children: React.ReactNode;
}

export function EmailLayout({ preview, children }: EmailLayoutProps) {
  return (
    <Html>
      <Head />
      <Preview>{preview}</Preview>
      <Body style={body}>
        <Container style={container}>
          {children}
        </Container>
      </Body>
    </Html>
  );
}

// Scientific Luxury email styles (inline for compatibility)
const body = {
  backgroundColor: '#050505',
  fontFamily: "'Inter', 'SF Pro Display', Helvetica, Arial, sans-serif",
  margin: '0',
  padding: '0',
};

const container = {
  backgroundColor: '#0a0a0a',
  border: '1px solid rgba(255, 255, 255, 0.06)',
  borderRadius: '2px',  // rounded-sm equivalent
  margin: '40px auto',
  maxWidth: '560px',
  padding: '32px',
};

Shared Components

import { Heading, Hr, Link, Text } from '@react-email/components';

// Header with brand name
export function EmailHeader({ title }: { title: string }) {
  return (
    <>
      <Text style={brandLabel}>NODEJS-STARTER-V1</Text>
      <Heading style={heading}>{title}</Heading>
      <Hr style={divider} />
    </>
  );
}

// CTA Button — spectral cyan accent
export function EmailButton({ href, children }: { href: string; children: string }) {
  return (
    <Link href={href} style={button}>
      {children}
    </Link>
  );
}

// Footer with unsubscribe
export function EmailFooter() {
  return (
    <>
      <Hr style={divider} />
      <Text style={footer}>
        Sent by NodeJS-Starter-V1 — Brisbane, QLD, Australia
      </Text>
    </>
  );
}

const brandLabel = {
  color: 'rgba(255, 255, 255, 0.3)',
  fontSize: '10px',
  fontFamily: "'JetBrains Mono', monospace",
  letterSpacing: '0.3em',
  textTransform: 'uppercase' as const,
  margin: '0 0 8px',
};

const heading = {
  color: 'rgba(255, 255, 255, 0.9)',
  fontSize: '24px',
  fontWeight: '200',
  letterSpacing: '-0.02em',
  margin: '0 0 24px',
};

const divider = {
  borderColor: 'rgba(255, 255, 255, 0.06)',
  borderWidth: '0.5px',
  margin: '24px 0',
};

const button = {
  backgroundColor: '#00F5FF',
  borderRadius: '2px',
  color: '#050505',
  display: 'inline-block',
  fontFamily: "'Inter', Helvetica, sans-serif",
  fontSize: '14px',
  fontWeight: '500',
  padding: '12px 24px',
  textDecoration: 'none',
};

const footer = {
  color: 'rgba(255, 255, 255, 0.3)',
  fontSize: '11px',
  margin: '0',
};

Example: Daily Report Email

import { Text } from '@react-email/components';
import { EmailLayout } from './components/email-layout';
import { EmailHeader, EmailFooter } from './components/email-header';

interface DailyReportProps {
  date: string;          // DD/MM/YYYY
  total: number;
  completed: number;
  failed: number;
  successRate: string;
}

export function DailyReportEmail({
  date, total, completed, failed, successRate,
}: DailyReportProps) {
  return (
    <EmailLayout preview={`Agent Report — ${date}`}>
      <EmailHeader title="Daily Agent Report" />
      <Text style={metric}>
        <span style={metricLabel}>DATE</span>
        <br />
        <span style={metricValue}>{date}</span>
      </Text>
      <Text style={metric}>
        <span style={metricLabel}>TOTAL RUNS</span>
        <br />
        <span style={metricValue}>{total}</span>
      </Text>
      <Text style={metric}>
        <span style={metricLabel}>SUCCESS RATE</span>
        <br />
        <span style={{ ...metricValue, color: '#00FF88' }}>{successRate}</span>
      </Text>
      {failed > 0 && (
        <Text style={metric}>
          <span style={metricLabel}>FAILED</span>
          <br />
          <span style={{ ...metricValue, color: '#FF4444' }}>{failed}</span>
        </Text>
      )}
      <EmailFooter />
    </EmailLayout>
  );
}

const metric = { margin: '0 0 16px' };
const metricLabel = {
  color: 'rgba(255, 255, 255, 0.3)',
  fontSize: '10px',
  fontFamily: "'JetBrains Mono', monospace",
  letterSpacing: '0.2em',
  textTransform: 'uppercase' as const,
};
const metricValue = {
  color: 'rgba(255, 255, 255, 0.9)',
  fontSize: '20px',
  fontFamily: "'JetBrains Mono', monospace",
  fontWeight: '500',
};

Sending Emails

Resend Integration

// apps/web/lib/email/send.ts
import { Resend } from 'resend';

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

interface SendEmailOptions {
  to: string | string[];
  subject: string;
  react: React.ReactElement;
}

export async function sendEmail({ to, subject, react }: SendEmailOptions) {
  const { data, error } = await resend.emails.send({
    from: 'NodeJS-Starter-V1 <noreply@yourdomain.com.au>',
    to,
    subject,
    react,
  });

  if (error) {
    throw new Error(`Email send failed: ${error.message}`);
  }

  return data;
}

Cron Job Integration

Wire into the existing daily report cron:

// apps/web/app/api/cron/daily-report/route.ts
import { sendEmail } from '@/lib/email/send';
import { DailyReportEmail } from '@/emails/daily-report';

// After generating the report...
if (process.env.REPORT_EMAIL_RECIPIENTS) {
  const recipients = process.env.REPORT_EMAIL_RECIPIENTS.split(',');
  await sendEmail({
    to: recipients,
    subject: `Agent Report — ${report.date}`,
    react: DailyReportEmail({
      date: new Date(report.date).toLocaleDateString('en-AU'),
      total: report.summary.total,
      completed: report.summary.completed,
      failed: report.summary.failed,
      successRate: report.summary.successRate,
    }),
  });
}

Scientific Luxury Email Palette

Adapted from the project's design tokens for email client compatibility:

Token	Value	Usage
Background	`#050505`	Email body
Container	`#0a0a0a`	Content area
Border	`rgba(255, 255, 255, 0.06)`	Dividers, container
Text primary	`rgba(255, 255, 255, 0.9)`	Headings, values
Text secondary	`rgba(255, 255, 255, 0.7)`	Body text
Text muted	`rgba(255, 255, 255, 0.3)`	Labels, footer
Cyan accent	`#00F5FF`	CTA buttons, links
Emerald	`#00FF88`	Success metrics
Red	`#FF4444`	Failure metrics
Amber	`#FFB800`	Warning states

Email Client Dark Mode Considerations

Some email clients force light mode. Add fallback:

const container = {
  backgroundColor: '#0a0a0a',
  // Outlook forces white — use border as visual anchor
  border: '1px solid #1a1a1a',
};

Preview and Testing

React Email Dev Server

# Add script to package.json
# "email:dev": "email dev --dir apps/web/emails --port 3001"

pnpm email:dev
# Opens http://localhost:3001 with live preview

Programmatic Rendering (For Tests)

import { render } from '@react-email/render';
import { DailyReportEmail } from '@/emails/daily-report';

const html = await render(
  DailyReportEmail({
    date: '23/01/2026',
    total: 42,
    completed: 38,
    failed: 4,
    successRate: '90.5%',
  })
);
// html is a string of rendered HTML — can be used in tests or SMTP

Anti-Patterns

Anti-Pattern	Why It Fails	Correct Approach
CSS Grid/Flexbox in emails	Not supported in Outlook, Gmail	Table-based layout via React Email
External `<style>` blocks	Stripped by most clients	Inline styles (React Email default)
Light theme email from dark app	Inconsistent brand experience	Dark theme email matching Scientific Luxury
`<img>` without `alt` text	Accessibility failure	Always include descriptive `alt`
Hardcoded recipient addresses	Breaks across environments	Use `REPORT_EMAIL_RECIPIENTS` env var
Sending without preview	Rendering bugs in production	Always preview in React Email dev server

Checklist for New Email Templates

Design

Uses Scientific Luxury palette (dark background, spectral accents)
Table-based layout (no CSS Grid/Flexbox)
rounded-sm equivalent (2px border-radius) — no large radii
JetBrains Mono for data values, Inter for editorial text
Single pixel borders (rgba(255, 255, 255, 0.06))

Implementation

Extends EmailLayout base component
Includes <Preview> text for inbox snippet
Uses EmailHeader and EmailFooter shared components
All images have alt attributes
Props typed with TypeScript interface

Delivery

sendEmail() utility used (not direct Resend/SMTP calls)
Recipient from environment variable (not hardcoded)
Error handling with structured logging
Tested in React Email dev server

Australian Locale

Dates formatted as DD/MM/YYYY
Currency as AUD ($X,XXX.XX)
Footer references Australian location
Spelling: colour, behaviour, analyse, organise

Response Format

[AGENT_ACTIVATED]: Email Template
[PHASE]: {Design | Implementation | Review}
[STATUS]: {in_progress | complete}

{email template analysis or implementation guidance}

[NEXT_ACTION]: {what to do next}

Integration Points

Scientific Luxury

Email palette derived from apps/web/lib/design-tokens.ts
Dark background, spectral accents, sharp corners, monospace data values
No standard Bootstrap/Tailwind email themes

Cron Scheduler

Daily report email wired into /api/cron/daily-report route
Alert emails triggered by cron health check failures
cron-scheduler patterns for scheduling digest emails

Structured Logging

Log email_sent, email_failed events with recipient count and template name
Include correlation_id for tracing email delivery through the pipeline

Error Taxonomy

Email delivery failures: SYS_EXTERNAL_EMAIL_PROVIDER (503)
Invalid recipient: DATA_VALIDATION_INVALID_EMAIL (422)
Template rendering errors: SYS_RUNTIME_EMAIL_RENDER (500)

Australian Localisation (en-AU)

Date Format: DD/MM/YYYY in email body
Currency: AUD ($) — formatted as $X,XXX.XX
Timezone: AEST/AEDT — timestamps display Australian time
Spelling: colour, behaviour, analyse, organise, centre
Footer: Australian business address (Brisbane, QLD)

适合场景

01

用户想查找某类 Agent Skill 时

02

需要根据任务场景推荐可安装能力包时

03

需要对比不同来源的安装命令和来源信息时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明，方便继续核验

能力 4

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用；具体调用方式请以来源页面和 README 为准。

平台分布

Codex

33.99%

按下载量换算25

Claude

31.67%

按下载量换算23

Cursor

20.34%

按下载量换算15

Gemini CLI

8.71%

按下载量换算6

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

需要联网

该 Skill 可能需要联网访问来源站点、仓库或外部 API；具体网络访问范围需要结合源码和 README 复核。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。当前只有一个来源，正式发布前建议补源仓库或其他目录站核验。

来源信息

GitHub 仓库

github.com

/cleanexpo/nodejs-starter-v1

SKILL.md 来源

github.com

/cleanexpo/nodejs-starter-v1/tree/main/skills/email-template

skills-sh

skills.sh

/cleanexpo/nodejs-starter-v1/email-template

继续浏览同类 Skills

更多前端设计 Skills（10,216）返回 Skills 目录

上一个 Skill

email-systems（电子邮件系统）

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。它适合让 Agent 生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码，整理组件结构，或定位布局和性能问题。使用时需要结合项目现有设计系统、路由和构建方式，避免只生成孤立片段；涉及页面改动时，应配合本地预览和构建检查确认视觉效果。

下一个 Skill

email-template-builder（电子邮件模板生成器）

email-template-builder 用于处理 GitHub 仓库、Issue、Pull Request 和代码协作信息，适合在 Codex、Claude、Cursor、Gemini CLI 中需要围绕仓库状态、代码变更或协作事项进行整理时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。