congiuluc/notification-frontend
skills/notification-frontend/SKILL.md
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.
development
Updated Apr 16, 2026
$ install --global
skillsauthnpx skillsauth add congiuluc/my-awesome-copilot notification-frontendInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 16, 2026, 1:22 PM4.3s2 files scanned
SKILL.md
- name:
- notification-frontend
- description:
- >-
- stackable, auto-dismissing patterns. Use when:
- showing success/error/info
- argument-hint:
- Describe the notification type (toast, banner, real-time) and trigger.
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
- 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"orrole="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"witharia-live="polite" - Error/warning:
role="alert"witharia-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
Related Skills
congiuluc/vscode-extension
tools
VerifiedTrustedCommunity
Build VS Code extensions with TypeScript. Covers extension anatomy, activation events, commands, tree views, webview panels, language features, testing, and publishing. Use when: creating a new VS Code extension, adding commands/views/providers, building webview UIs, implementing language server features, testing extensions, or packaging for the marketplace.
SKILL.mdUpdated Apr 16, 2026
congiuluc/version-tracking
development
VerifiedTrustedCommunity
Track implementations, features, bugs, and releases in a versioning document. Use when: adding a commit, completing a feature, fixing a bug, or preparing a release. Automatically updates CHANGELOG.md following Keep a Changelog format and Semantic Versioning.
SKILL.mdUpdated Apr 16, 2026
congiuluc/testing-frontend
development
VerifiedTrustedCommunity
Write frontend tests using Vitest and React Testing Library. Use when: testing React components, hooks, user interactions, form submissions, accessibility assertions, or mocking API services.
SKILL.mdUpdated Apr 16, 2026
congiuluc/testing-frontend-angular
development
VerifiedTrustedCommunity
Write Angular frontend tests using Jasmine, Karma, and Angular TestBed. Use when: testing Angular components, services, pipes, directives, user interactions, form submissions, accessibility assertions, or mocking HTTP services.
SKILL.mdUpdated Apr 16, 2026