communication-systems

Email, notifications, and messaging system patterns

설치로 이동

저장소: miles990/claude-software-skills
최근 소스 활동: 2026년 1월 8일 02:34
감지된 SKILL.md 언어: 영어
스타: 20
포크: 5

설치 방법

기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.

소스 파일 검토

설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.

검색으로 돌아가기 설치로 돌아가기

name	communication-systems
description	Email, notifications, and messaging system patterns
domain	domain-applications
version	1.0.0
tags	["email","notifications","push","webhooks","messaging"]
triggers	{"keywords":{"primary":["email","notification","push notification","webhook","messaging"],"secondary":["transactional email","fcm","web push","in-app notification","resend"]},"context_boost":["send","alert","notify","communicate"],"context_penalty":["game","frontend","ui"],"priority":"medium"}

Communication Systems

Overview

Building email systems, push notifications, in-app messaging, and webhook integrations.

Email Systems

Transactional Email

import { Resend } from 'resend';

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

interface EmailOptions {
  to: string | string[];
  subject: string;
  html?: string;
  text?: string;
  template?: string;
  data?: Record<string, any>;
  attachments?: Array<{
    filename: string;
    content: Buffer | string;
  }>;
}

async function sendEmail(options: EmailOptions) {
  let html = options.html;

  // Use template if specified
  if (options.template) {
    html = await renderTemplate(options.template, options.data);
  }

  const { data, error } = await resend.emails.send({
    from: 'noreply@example.com',
    to: options.to,
    subject: options.subject,
    html,
    text: options.text,
    attachments: options.attachments,
  });

  if (error) {
    console.error('Email send failed:', error);
    throw error;
  }

  // Log for tracking
  await prisma.emailLog.create({
    data: {
      messageId: data.id,
      to: Array.isArray(options.to) ? options.to.join(',') : options.to,
      subject: options.subject,
      template: options.template,
      status: 'sent',
    },
  });

  return data;
}

// Email templates with React Email
import { render } from '@react-email/render';
import { WelcomeEmail } from './templates/WelcomeEmail';
import { PasswordResetEmail } from './templates/PasswordResetEmail';

const templates = {
  welcome: WelcomeEmail,
  passwordReset: PasswordResetEmail,
};

async function renderTemplate(name: string, data: Record<string, any>) {
  const Template = templates[name];
  if (!Template) throw new Error(`Template ${name} not found`);

  return render(<Template {...data} />);
}

// React Email template
import {
  Html, Head, Body, Container, Text, Button, Img,
} from '@react-email/components';

function WelcomeEmail({ name, actionUrl }: { name: string; actionUrl: string }) {
  return (
    <Html>
      <Head />
      <Body style={{ fontFamily: 'Arial, sans-serif' }}>
        <Container>
          <Img src="https://example.com/logo.png" width="120" height="40" alt="Logo" />
          <Text>Hi {name},</Text>
          <Text>Welcome to our platform! Get started by setting up your account.</Text>
          <Button
            href={actionUrl}
            style={{ background: '#007bff', color: '#fff', padding: '12px 24px' }}
          >
            Get Started
          </Button>
        </Container>
      </Body>
    </Html>
  );
}

Email Queue

import Bull from 'bull';

const emailQueue = new Bull('email', process.env.REDIS_URL);

// Add to queue
async function queueEmail(options: EmailOptions, delay?: number) {
  return emailQueue.add('send', options, {
    delay,
    attempts: 3,
    backoff: { type: 'exponential', delay: 60000 },
  });
}

// Process queue
emailQueue.process('send', async (job) => {
  await sendEmail(job.data);
});

// Handle failures
emailQueue.on('failed', async (job, error) => {
  console.error(`Email job ${job.id} failed:`, error);

  await prisma.emailLog.update({
    where: { jobId: job.id },
    data: { status: , : error. },
  });
});


  () {
   jobs = recipients.( ({
    : ,
    : { to, template, data },
    : { : index *  }, 
  }));

   emailQueue.(jobs);
}

Push Notifications

Web Push

import webpush from 'web-push';

webpush.setVapidDetails(
  'mailto:admin@example.com',
  process.env.VAPID_PUBLIC_KEY!,
  process.env.VAPID_PRIVATE_KEY!
);

interface PushSubscription {
  endpoint: string;
  keys: {
    p256dh: string;
    auth: string;
  };
}

// Store subscription
async function saveSubscription(userId: string, subscription: PushSubscription) {
  await prisma.pushSubscription.upsert({
    where: { endpoint: subscription.endpoint },
    update: { keys: subscription.keys },
    create: {
      userId,
      endpoint: subscription.endpoint,
      keys: subscription.keys,
    },
  });
}

// Send push notification
async function sendPush(userId: string, payload: {
  title: string;
  body: string;
  icon?: ;
  url?: ;
  data?: Record<, >;
}) {
   subscriptions =  prisma..({
    : { userId },
  });

   results =  .(
    subscriptions.( (sub) => {
       {
         webpush.(
          { : sub., : sub. },
          .(payload)
        );
      }  (error) {
         (error. === ) {
          
           prisma..({ : { : sub. } });
        }
         error;
      }
    })
  );

   results;
}



self.(,  {
   data = event..();

  event.(
    self..(data., {
      : data.,
      : data. || ,
      : data,
    })
  );
});

self.(,  {
  event..();

   (event...) {
    event.(clients.(event...));
  }
});

Mobile Push (FCM)

import admin from 'firebase-admin';

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
});

interface MobileNotification {
  title: string;
  body: string;
  imageUrl?: string;
  data?: Record<string, string>;
}

async function sendMobilePush(
  tokens: string[],
  notification: MobileNotification
) {
  const message: admin.messaging.MulticastMessage = {
    tokens,
    notification: {
      title: notification.title,
      body: notification.body,
      imageUrl: notification.imageUrl,
    },
    data: notification.data,
    android: {
      priority: 'high',
      notification: {
        sound: 'default',
        clickAction: 'OPEN_ACTIVITY',
      },
    },
    apns: {
      payload: {
        aps: {
          : ,
          : ,
        },
      },
    },
  };

   response =  admin.().(message);

  
  response..( {
     (!resp.) {
       errorCode = resp.?.;
       (
        errorCode ===  ||
        errorCode === 
      ) {
        
        (tokens[idx]);
      }
    }
  });

   response;
}

In-App Notifications

interface Notification {
  id: string;
  userId: string;
  type: string;
  title: string;
  message: string;
  data?: Record<string, any>;
  read: boolean;
  createdAt: Date;
}

// Create notification
async function createNotification(params: {
  userId: string;
  type: string;
  title: string;
  message: string;
  data?: Record<string, any>;
}) {
  const notification = await prisma.notification.create({
    data: {
      ...params,
      read: false,
    },
  });

  // Send real-time update
  await pubsub.publish(`notifications:${params.userId}`, {
    type: 'NEW_NOTIFICATION',
    notification,
  });

  return notification;
}

// Get notifications with pagination
async function getNotifications() {
   { page = , limit = , unreadOnly =  } = options;

   where = {
    userId,
    ...(unreadOnly && { :  }),
  };

   [notifications, total, unreadCount] =  .([
    prisma..({
      where,
      : { :  },
      : (page - ) * limit,
      : limit,
    }),
    prisma..({ where }),
    prisma..({ : { userId, :  } }),
  ]);

   { notifications, total, unreadCount };
}


  () {
   prisma..({
    : {
      : { : notificationIds },
      userId,
    },
    : { :  },
  });
}


 () {
   [notifications, setNotifications] = useState<[]>([]);
   [unreadCount, setUnreadCount] = ();

  ( {
    
    ().( {
      (notifications);
      (unreadCount);
    });

    
     unsubscribe = ( {
      ( [notification, ...prev]);
      ( prev + );
    });

     unsubscribe;
  }, []);

   { notifications, unreadCount, markAsRead };
}

Webhooks

interface Webhook {
  id: string;
  url: string;
  secret: string;
  events: string[];
  active: boolean;
}

// Register webhook
async function registerWebhook(params: {
  url: string;
  events: string[];
}) {
  const secret = crypto.randomBytes(32).toString('hex');

  return prisma.webhook.create({
    data: {
      url: params.url,
      events: params.events,
      secret,
      active: true,
    },
  });
}

// Send webhook
async function sendWebhook(webhookId: string, event: string, payload: any) {
  const webhook = await prisma.webhook.findUnique({ where: { id: webhookId } });
  if (!webhook || !webhook.) ;

   timestamp = .().();
   body = .({ event, : payload, timestamp });

  
   signature = crypto
    .(, webhook.)
    .(body)
    .();

   {
     response =  (webhook., {
      : ,
      : {
        : ,
        : signature,
        : timestamp,
      },
      body,
    });

     prisma..({
      : {
        webhookId,
        event,
        payload,
        : response.,
        : response.,
      },
    });

    
     (!response.) {
       (webhookId);
    }
  }  (error) {
     prisma..({
      : {
        webhookId,
        event,
        payload,
        : error.,
        : ,
      },
    });

     (webhookId);
  }
}


 ():  {
   expected = crypto
    .(, secret)
    .(body)
    .();

   crypto.(
    .(signature),
    .(expected)
  );
}

Related Skills

[[realtime-systems]] - Real-time messaging
[[backend]] - API development
[[reliability-engineering]] - Delivery guarantees