# notification-hub-skill

> Sistema de notificações multi-canal (browser, toast, email) com badge counts e sound alerts

- Author: OVT-K
- Repository: OVT-K/antigravity-skill-repo
- Version: 20260127151550
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/OVT-K/antigravity-skill-repo
- Web: https://mule.run/skillshub/@@OVT-K/antigravity-skill-repo~notification-hub-skill:20260127151550

---

---
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<NotificationPermission>("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
<Toaster position="top-right" />

// Usage
toast.success('Approval granted!');
toast.error('Connection failed');
toast.loading('Processing...');
toast.custom((t) => (
  <div className={`${t.visible ? 'animate-enter' : 'animate-leave'} bg-white rounded-lg p-4`}>
    <h3>Custom Toast</h3>
  </div>
));
```

## Badge Counter

```typescript
export const NotificationBadge = ({ count }: { count: number }) => (
  <div className="relative">
    <Bell size={20} />
    {count > 0 && (
      <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
        {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_