--- name: notification-hub-skill description: Sistema de notificações multi-canal (browser, toast, email) com badge counts e sound alerts version: 1.0.0 author: Antigravity AI tags: [notifications, browser-api, toast, web-push, ux] --- # Notification Hub Skill ## Objetivo Sistema completo de notificações para aplicações web, suportando **Browser Notifications API**, **toast notifications** (react-hot-toast), **badge counts** e **sound alerts**. --- ## Stack ```json { "react-hot-toast": "^2.4.1" } ``` --- ## Browser Notifications ```typescript \/\/ hooks\/useNotifications.ts export const useNotifications = () => { const [permission, setPermission] = useState("default"); useEffect(() => { setPermission(Notification.permission); }, []); const requestPermission = async () => { const result = await Notification.requestPermission(); setPermission(result); return result; }; const notify = (title: string, options?: NotificationOptions) => { if (Notification.permission === "granted") { const notification = new Notification(title, { icon: "\/logo.png", badge: "\/badge.png", tag: "swarm-notification", renotify: false, requireInteraction: options?.requireInteraction || false, ...options, }); notification.onclick = () => { window.focus(); notification.close(); }; return notification; } }; return { permission, requestPermission, notify }; }; ``` ## Toast Notifications ```typescript import toast, { Toaster } from 'react-hot-toast'; \/\/ App.tsx \/\/ Usage toast.success('Approval granted!'); toast.error('Connection failed'); toast.loading('Processing...'); toast.custom((t) => (

Custom Toast<\/h3> <\/div> )); ``` ## Badge Counter ```typescript export const NotificationBadge = ({ count }: { count: number }) => (
{count > 0 && ( {count > 9 ? '9+' : count} <\/span> )} <\/div> ); ``` ## Sound Alerts ```typescript const playSound = (type: "success" | "error" | "info") => { const audio = new Audio(`\/sounds\/${type}.mp3`); audio.volume = 0.5; audio.play().catch(console.error); }; ``` --- _Skill criada em 26\/01\/2026_