如何安装 notification-ui？

运行命令：npx killer-skills add abdulahad139/Todoapp-HackathonII/notification-ui。支持 Cursor、Windsurf、VS Code、Claude Code 等 19+ IDE/Agent。

notification-ui 适用于哪些场景？

典型场景包括：适用任务： Applying Notification UI Skill、适用任务： Applying When rendering the app header (bell icon)、适用任务： Applying When displaying unread notification count。

notification-ui 支持哪些 IDE 或 Agent？

该技能兼容 Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer。可使用 Killer-Skills CLI 一条命令通用安装。

notification-ui 有哪些限制？

限制说明： Requires repository-specific context from the skill documentation；限制说明： Works best when the underlying tools and dependencies are already configured。

Notification UI Skill

Name: notification-ui
Availability: InStock
Author: abdulahad139

Overview

The notification UI skill provides the visual interface for displaying notifications, including a bell icon with badge, animated indicators, and an interactive notification panel.

When to Apply

Apply this skill:

When rendering the app header (bell icon)
When displaying unread notification count
When showing notification panel/dropdown
When animating new notification arrivals
When user interacts with notifications (click to mark as read)
When displaying empty state (no notifications)

Bell Icon Specifications

Icon Size and Position

Size: 24px × 24px
Position: Top-right header
Color: Default #374151 (gray), hover #1F2937 (dark gray)

jsx
1function BellIcon({ unreadCount, onClick }) {
2  return (
3    <button
4      className="bell-icon-button"
5      onClick={onClick}
6      aria-label={`Notifications (${unreadCount} unread)`}
7    >
8      <svg
9        width="24"
10        height="24"
11        viewBox="0 0 24 24"
12        fill="none"
13        xmlns="http://www.w3.org/2000/svg"
14        className="bell-icon"
15      >
16        <path
17          d="M15 17H20L18.5951 15.5951C18.2141 15.2141 18 14.6973 18 14.1585V11C18 8.38757 16.3304 6.16509 14 5.34142V5C14 3.89543 13.1046 3 12 3C10.8954 3 10 3.89543 10 5V5.34142C7.66962 6.16509 6 8.38757 6 11V14.1585C6 14.6973 5.78595 15.2141 5.40493 15.5951L4 17H9M15 17V18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18V17M15 17H9"
18          stroke="currentColor"
19          strokeWidth="2"
20          strokeLinecap="round"
21          strokeLinejoin="round"
22        />
23      </svg>
24      {unreadCount > 0 && (
25        <span className="badge">{unreadCount > 99 ? '99+' : unreadCount}</span>
26      )}
27    </button>
28  );
29}

Bell Icon Styling

css
1.bell-icon-button {
2  position: relative;
3  display: flex;
4  align-items: center;
5  justify-content: center;
6  padding: 8px;
7  background: transparent;
8  border: none;
9  cursor: pointer;
10  border-radius: 6px;
11  transition: background-color 0.2s ease;
12}
13
14.bell-icon-button:hover {
15  background-color: #F3F4F6;
16}
17
18.bell-icon {
19  color: #374151;
20  transition: color 0.2s ease;
21}
22
23.bell-icon-button:hover .bell-icon {
24  color: #1F2937;
25}

Unread Count Badge

Badge Specifications

Shape: Circular
Background: #DC2626 (red)
Text: White (#FFFFFF)
Display: Count up to 99, then "99+"
Position: Top-right corner of bell icon

css
1.badge {
2  position: absolute;
3  top: 4px;
4  right: 4px;
5  min-width: 18px;
6  height: 18px;
7  display: flex;
8  align-items: center;
9  justify-content: center;
10  background-color: #DC2626; /* Red */
11  color: #FFFFFF; /* White */
12  font-size: 10px;
13  font-weight: 700;
14  border-radius: 50%;
15  padding: 0 4px;
16  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
17}

Badge Display Logic

javascript
1function getBadgeText(count) {
2  if (count === 0) return null; // No badge
3  if (count > 99) return '99+';
4  return count.toString();
5}

Pulse Animation

Animation Specifications

Duration: 2 seconds
Effect: Purple glow (#8B5CF6)
Trigger: On new notification arrival
Iterations: 3 times, then stop

css
1@keyframes pulse {
2  0%, 100% {
3    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7);
4  }
5  50% {
6    box-shadow: 0 0 0 8px rgba(139, 92, 246, 0);
7  }
8}
9
10.bell-icon-button.pulsing {
11  animation: pulse 2s ease-in-out 3;
12}

Animation Trigger

jsx
1function NotificationBell({ notifications }) {
2  const [isPulsing, setIsPulsing] = useState(false);
3  const prevCountRef = useRef(notifications.length);
4
5  useEffect(() => {
6    // Detect new notification
7    if (notifications.length > prevCountRef.current) {
8      setIsPulsing(true);
9
10      // Stop animation after 6 seconds (3 iterations × 2s)
11      setTimeout(() => setIsPulsing(false), 6000);
12    }
13
14    prevCountRef.current = notifications.length;
15  }, [notifications.length]);
16
17  return (
18    <BellIcon
19      className={isPulsing ? 'pulsing' : ''}
20      unreadCount={notifications.filter(n => !n.read).length}
21    />
22  );
23}

Panel Specifications

Width: 320px
Max Height: 400px
Scrollable: Yes (overflow-y: auto)
Position: Dropdown below bell icon
Elevation: Shadow for depth

css
1.notification-dropdown {
2  position: absolute;
3  top: calc(100% + 8px);
4  right: 0;
5  width: 320px;
6  max-height: 400px;
7  overflow-y: auto;
8  background-color: #FFFFFF;
9  border: 1px solid #E5E7EB;
10  border-radius: 8px;
11  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
12              0 4px 6px -2px rgba(0, 0, 0, 0.05);
13  z-index: 1000;
14}
15
16.notification-dropdown-header {
17  padding: 16px;
18  border-bottom: 1px solid #E5E7EB;
19  display: flex;
20  justify-content: space-between;
21  align-items: center;
22}
23
24.notification-dropdown-title {
25  font-size: 16px;
26  font-weight: 600;
27  color: #111827;
28}
29
30.mark-all-read {
31  font-size: 12px;
32  color: #8B5CF6;
33  background: none;
34  border: none;
35  cursor: pointer;
36  font-weight: 600;
37}
38
39.mark-all-read:hover {
40  color: #7C3AED;
41  text-decoration: underline;
42}

Notification Item Styling

Item Specifications

Padding: 16px
Border: Bottom separator (1px solid #F3F4F6)
Hover: Background change to #F9FAFB
Purple Theme: VERY IMPORTANT notifications use #8B5CF6 accent

css
1.notification-item {
2  padding: 16px;
3  border-bottom: 1px solid #F3F4F6;
4  cursor: pointer;
5  transition: background-color 0.15s ease;
6}
7
8.notification-item:hover {
9  background-color: #F9FAFB;
10}
11
12.notification-item:last-child {
13  border-bottom: none;
14}
15
16.notification-item.unread {
17  background-color: #FAF5FF; /* Very light purple */
18}
19
20.notification-item.unread:hover {
21  background-color: #F3E8FF; /* Light purple */
22}
23
24.notification-content {
25  display: flex;
26  flex-direction: column;
27  gap: 6px;
28}
29
30.notification-header {
31  display: flex;
32  align-items: flex-start;
33  gap: 8px;
34}
35
36.notification-priority-indicator {
37  width: 6px;
38  height: 6px;
39  border-radius: 50%;
40  background-color: #8B5CF6; /* Purple for VERY IMPORTANT */
41  margin-top: 6px;
42  flex-shrink: 0;
43}
44
45.notification-message {
46  font-size: 14px;
47  color: #374151;
48  line-height: 1.5;
49  flex: 1;
50}
51
52.notification-item.unread .notification-message {
53  font-weight: 600;
54  color: #111827;
55}
56
57.notification-time {
58  font-size: 12px;
59  color: #9CA3AF;
60  display: flex;
61  align-items: center;
62  gap: 4px;
63}
64
65.unread-dot {
66  width: 8px;
67  height: 8px;
68  border-radius: 50%;
69  background-color: #8B5CF6; /* Purple */
70}

Complete Notification Item Component

jsx
1function NotificationItem({ notification, onMarkAsRead }) {
2  const handleClick = () => {
3    if (!notification.read) {
4      onMarkAsRead(notification.id);
5    }
6  };
7
8  const relativeTime = formatRelativeTime(notification.timestamp);
9
10  return (
11    <div
12      className={`notification-item ${notification.read ? '' : 'unread'}`}
13      onClick={handleClick}
14    >
15      <div className="notification-content">
16        <div className="notification-header">
17          <div className="notification-priority-indicator" />
18          <p className="notification-message">{notification.message}</p>
19        </div>
20        <div className="notification-time">
21          {!notification.read && <span className="unread-dot" />}
22          <span>{relativeTime}</span>
23        </div>
24      </div>
25    </div>
26  );
27}
28
29function formatRelativeTime(timestamp) {
30  const now = Date.now();
31  const diff = now - timestamp;
32  const minutes = Math.floor(diff / (1000 * 60));
33  const hours = Math.floor(diff / (1000 * 60 * 60));
34  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
35
36  if (minutes < 1) return 'Just now';
37  if (minutes < 60) return `${minutes}m ago`;
38  if (hours < 24) return `${hours}h ago`;
39  return `${days}d ago`;
40}

Mark-as-Read Interaction

Click to Mark Read

Clicking an unread notification marks it as read:

jsx
1function handleNotificationClick(notification) {
2  if (!notification.read) {
3    // Mark as read
4    notificationPersistence.markAsRead(notification.id);
5
6    // Update UI state
7    setNotifications(notificationPersistence.getAll());
8    setUnreadCount(notificationPersistence.getUnreadCount());
9
10    // Optional: Navigate to task
11    navigateToTask(notification.taskId);
12  }
13}

Visual Feedback

jsx
1function NotificationItem({ notification, onMarkAsRead }) {
2  const [isMarking, setIsMarking] = useState(false);
3
4  const handleClick = async () => {
5    if (!notification.read && !isMarking) {
6      setIsMarking(true);
7      await onMarkAsRead(notification.id);
8      setIsMarking(false);
9    }
10  };
11
12  return (
13    <div
14      className={`notification-item ${notification.read ? '' : 'unread'} ${isMarking ? 'marking' : ''}`}
15      onClick={handleClick}
16    >
17      {/* ... */}
18    </div>
19  );
20}

Empty State

Empty State Component

jsx
1function EmptyState() {
2  return (
3    <div className="notification-empty-state">
4      <div className="empty-icon">🔔</div>
5      <p className="empty-title">No notifications</p>
6      <p className="empty-description">
7        You're all caught up! Notifications for VERY IMPORTANT tasks will appear here.
8      </p>
9    </div>
10  );
11}

Empty State Styling

css
1.notification-empty-state {
2  padding: 48px 24px;
3  text-align: center;
4  color: #6B7280;
5}
6
7.empty-icon {
8  font-size: 48px;
9  margin-bottom: 16px;
10  opacity: 0.4;
11}
12
13.empty-title {
14  font-size: 16px;
15  font-weight: 600;
16  color: #374151;
17  margin-bottom: 8px;
18}
19
20.empty-description {
21  font-size: 14px;
22  color: #9CA3AF;
23  line-height: 1.5;
24}

Complete Notification System

jsx
1function NotificationSystem() {
2  const [isOpen, setIsOpen] = useState(false);
3  const [notifications, setNotifications] = useState([]);
4  const [unreadCount, setUnreadCount] = useState(0);
5  const dropdownRef = useRef(null);
6
7  // Load notifications
8  useEffect(() => {
9    const loaded = notificationPersistence.getAll();
10    setNotifications(loaded);
11    setUnreadCount(notificationPersistence.getUnreadCount());
12  }, []);
13
14  // Close dropdown when clicking outside
15  useEffect(() => {
16    function handleClickOutside(event) {
17      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
18        setIsOpen(false);
19      }
20    }
21
22    document.addEventListener('mousedown', handleClickOutside);
23    return () => document.removeEventListener('mousedown', handleClickOutside);
24  }, []);
25
26  const handleMarkAsRead = (id) => {
27    notificationPersistence.markAsRead(id);
28    setNotifications(notificationPersistence.getAll());
29    setUnreadCount(notificationPersistence.getUnreadCount());
30  };
31
32  const handleMarkAllAsRead = () => {
33    notificationPersistence.markAllAsRead();
34    setNotifications(notificationPersistence.getAll());
35    setUnreadCount(0);
36  };
37
38  return (
39    <div className="notification-system" ref={dropdownRef}>
40      <NotificationBell
41        unreadCount={unreadCount}
42        onClick={() => setIsOpen(!isOpen)}
43        notifications={notifications}
44      />
45
46      {isOpen && (
47        <div className="notification-dropdown">
48          <div className="notification-dropdown-header">
49            <h3 className="notification-dropdown-title">Notifications</h3>
50            {unreadCount > 0 && (
51              <button className="mark-all-read" onClick={handleMarkAllAsRead}>
52                Mark all as read
53              </button>
54            )}
55          </div>
56
57          {notifications.length === 0 ? (
58            <EmptyState />
59          ) : (
60            <div className="notification-list">
61              {notifications.map(notification => (
62                <NotificationItem
63                  key={notification.id}
64                  notification={notification}
65                  onMarkAsRead={handleMarkAsRead}
66                />
67              ))}
68            </div>
69          )}
70        </div>
71      )}
72    </div>
73  );
74}

Responsive Behavior

Mobile Adjustments

css
1@media (max-width: 640px) {
2  .notification-dropdown {
3    position: fixed;
4    top: 0;
5    left: 0;
6    right: 0;
7    bottom: 0;
8    width: 100%;
9    max-height: 100%;
10    border-radius: 0;
11  }
12
13  .notification-dropdown-header {
14    position: sticky;
15    top: 0;
16    background-color: #FFFFFF;
17    z-index: 1;
18  }
19}

Integration Points

This skill integrates with:

Notification Persistence Skill: Reads notification data
Notification Trigger Skill: Displays triggered notifications
Priority Classification Skill: Uses purple theme for VERY IMPORTANT
Notification Experience Agent: Coordinates UI interactions

Accessibility

Bell icon button has aria-label with unread count
Keyboard navigation supported (Enter/Space to open/close)
Focus management in dropdown
Screen reader announcements for new notifications
Sufficient color contrast ratios (WCAG AA)

Performance Considerations

Dropdown renders only when open (conditional rendering)
Virtual scrolling for large notification lists (>50)
Debounced mark-as-read operations
Memoized components to prevent unnecessary re-renders

notification-ui — for Claude Code notification-ui, Todoapp-HackathonII, community, for Claude Code, ide skills, Notifications (${unreadCount} unread), ### Bell Icon Styling, ### Badge Display Logic, Notification, Overview

关于此技能

功能特性

# 核心主题

Killer-Skills Review

核心价值

适用 Agent 类型

↓ 赋予的主要能力 · notification-ui

! 使用限制与门槛

Why this page is reference-only

Source Boundary

先决定动作，再继续看上游仓库材料

先进入安装与验证

回到可信合集再做一次复核

如果要进团队流转，转到工作流集合

Browser Sandbox Environment

⚡️ Ready to unleash?

常见问题与安装步骤

? FAQ

notification-ui 是什么？