Notification System Agent Skill
Push notifications, in-app alerts, toast patterns, digest emails, and webhook dispatching.
The Skill
Full content, every format. Copy it, download it, or install with one command.
---
description: Push notifications, in-app alerts, toast patterns, digest emails, and webhook dispatching.
homepage: https://yepapi.com/skills/notification-system
metadata:
tags: [notifications, push, alerts, webhooks]
---
# Notification System
## Rules
- Channel abstraction: define notification channels (in-app, email, push, webhook) — each notification type specifies which channels it uses
- In-app notifications: store in database with `userId`, `type`, `title`, `body`, `readAt`, `createdAt` — poll or use WebSocket/SSE for real-time
- Toast patterns: use a toast library (sonner, react-hot-toast) — auto-dismiss after 5s, stack max 3, action button for undo
- Push notifications: Web Push API with service worker — request permission only after user action, never on page load
- Digest emails: batch notifications into daily/weekly digests — run via cron, group by type, include unsubscribe link
- Webhook dispatching: POST to subscriber URLs with HMAC signature, retry with exponential backoff (3 attempts), log delivery status
- Preference center: let users choose channels per notification type — store as `user_notification_preferences` table
- Idempotency: deduplicate notifications with a unique key (e.g., `{type}:{entityId}:{userId}`) — prevent duplicates on retry
## Database Schema
```sql
CREATE TABLE notifications (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
user_id UUID NOT NULL REFERENCES users(id),
type TEXT NOT NULL,
title TEXT NOT NULL,
body TEXT,
data JSONB DEFAULT '{}',
read_at TIMESTAMP,
created_at TIMESTAMP DEFAULT NOW()
);
CREATE INDEX idx_notifications_user_unread ON notifications(user_id, read_at) WHERE read_at IS NULL;
```
## Webhook Dispatch Pattern
```typescript
async function dispatchWebhook(url: string, payload: object, secret: string) {
const body = JSON.stringify(payload);
const signature = createHmac("sha256", secret).update(body).digest("hex");
await fetch(url, {
method: "POST",
headers: { "Content-Type": "application/json", "X-Signature": signature },
body,
});
}
```
## Avoid
- Requesting push permission on page load — users decline, and you can't ask again
- Missing retry logic for webhooks — network failures are common
- No read/unread tracking — users need to see what's new
- Sending every notification to every channel — respect user preferencesInstall
Why Use the Notification System Skill?
Without this skill, your AI guesses at notification system patterns. It might hallucinate deprecated APIs, use outdated conventions, or miss best practices entirely. With it, your AI follows a proven ruleset — every suggestion aligns with current standards.
Drop this skill into your project and your AI instantly knows the rules. Better code suggestions, fewer errors, faster shipping.
Try These Prompts
These prompts work better with the Notification System skill installed. Your AI knows the context and writes code that fits.
"Build a notification system with push, in-app, and email channels with user preferences"
"Create toast notifications with action buttons, auto-dismiss, and queue management"
"Set up a webhook-driven notification pipeline with digest emails and delivery tracking"
Works Great With
Notification System skill — FAQ
It covers push notifications, in-app alerts, toast patterns, digest emails, and webhook dispatching. Your AI builds notification systems with proper channel management and user preferences.
Run `npx skills add YepAPI/skills --skill notification-system` in your project root. This copies the skill file into your repo where your AI coding tool can read it automatically.
The skill includes a preference matrix where users choose per-channel (push, email, in-app) for each notification type. It respects these preferences at send time with a channel router pattern.