Skip to content

スキルを検索.../

Agent Skill Search Engine

検索

検索
カテゴリ
職業

About

About
Privacy
Terms

© 2026 Skills Pool. All rights reserved.

Notification Frontend | Skills Pool

Skill ファイル

Notification Frontend

Implement frontend toast notifications and alert systems with accessible, stackable, auto-dismissing patterns. Use when: showing success/error/info toasts, building a notification center, creating alert banners, or integrating real-time notifications from SignalR/WebSocket.

congiuluc0 スター2026/03/28

職業
カテゴリ: モバイル

スキル内容

Frontend Notifications (React)

When to Use

Showing success/error/warning/info toast messages after actions
Building a notification center or inbox
Displaying persistent alert banners
Handling real-time push notifications from backend (SignalR/WebSocket)
Showing form submission confirmations

Official Documentation

Sonner (React Toast Library)
React Hot Toast
WAI-ARIA Alert Pattern

関連 Skill

クイックインストール

Notification Frontend

npx skillvault add congiuluc/congiuluc-my-awesome-copilot-skills-notification-frontend-skill-md

Skill をダウンロードリポジトリを開く

作者: congiuluc
スター: 0
更新日: 2026/03/28
職業

このページの内容

01Frontend Notifications (React)

WAI-ARIA Status Role

Recommended Libraries

Library	Best For	Size
Sonner	Modern toast system, unstyled/styled	~5 KB
React Hot Toast	Simple toast with promise support	~5 KB
Custom	Full control, minimal dependency	0 KB

Procedure

Choose approach — see notification patterns
Review toast implementation sample
Install library: npm install sonner (recommended)
Add <Toaster /> to app root layout
Use toast.success(), toast.error(), etc. in event handlers
Ensure all toasts are accessible (role="status" or role="alert")
Support keyboard dismissal (Escape key)
Auto-dismiss after 4-5 seconds (keep error toasts longer or manual)
Stack multiple toasts without overlapping content
For real-time: connect to SignalR hub and pipe server events to toasts

Accessibility Rules

Success/info: role="status" with aria-live="polite"
Error/warning: role="alert" with aria-live="assertive"
Toast must be dismissible via Escape key or close button
Close button must have aria-label="Dismiss notification"
Toast text must meet 4.5:1 contrast ratio
Never rely solely on color — include icons with the message type

02

When to Use

03Official Documentation

04Recommended Libraries

06Accessibility Rules

ソフトウェア開発者

Liquid Glass Design

iOS 26 Liquid Glass design system — dynamic glass material with blur, reflection, and interactive morphing for SwiftUI, UIKit, and WidgetKit.

Compose Multiplatform Patterns

Compose Multiplatform and Jetpack Compose patterns for KMP projects — state management, navigation, theming, performance, and platform-specific UI.

Foundation Models On Device

苹果FoundationModels框架用于设备上的LLM——文本生成、使用@Generable进行引导生成、工具调用，以及在iOS 26+中的快照流。

Swiftui Patterns

SwiftUI architecture patterns, state management with @Observable, view composition, navigation, performance optimization, and modern iOS/macOS UI best practices.

Foundation Models On Device

Apple FoundationModels framework for on-device LLM — text generation, guided generation with @Generable, tool calling, and snapshot streaming in iOS 26+.

Swiftui Patterns

SwiftUI 架构模式，使用 @Observable 进行状态管理，视图组合，导航，性能优化，以及现代 iOS/macOS UI 最佳实践。

ソフトウェア開発者