notification-ui はどうやって導入しますか？

次のコマンドを実行してください: npx killer-skills add SOFIA-ASIF/TaskFlow-ToDo-APP/notification-ui。Cursor、Windsurf、VS Code、Claude Code など19以上のIDEで使えます。

notification-ui の主な用途は？

主な用途は次のとおりです: ユースケース: Applying Notification UI Skill, ユースケース: Applying When rendering the app header (bell icon), ユースケース: Applying When displaying unread notification count。

notification-ui に対応するIDEは？

このスキルは 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: SOFIA-ASIF

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, TaskFlow-ToDo-APP, community, for Claude Code, ide skills, Notifications (${unreadCount} unread), ### Bell Icon Styling, ### Badge Display Logic, Notification, Overview

このスキルについて

機能

# 主なトピック

Skill Overview

このスキルを使用する理由

おすすめ

↓ 実現可能なユースケース for notification-ui

! セキュリティと制限

About The Source

Browser Sandbox Environment

⚡️ Ready to unleash?

FAQ とインストール手順

? よくある質問

notification-ui とは何ですか？