Providing User Feedback and Notifications

This skill implements comprehensive feedback and notification systems that enhance all other component skills by providing consistent patterns for communicating system state, displaying messages, and handling user confirmations.

When to Use This Skill

Activate this skill when:

• Implementing toast notifications or snackbars
• Displaying success, error, warning, or info messages
• Creating modal dialogs or confirmation dialogs
• Implementing progress indicators (spinners, progress bars, skeleton screens)
• Designing empty states or zero-result displays
• Adding tooltips or contextual help
• Determining notification timing, stacking, or positioning
• Implementing accessible feedback patterns with ARIA
• Communicating any system state to users

Feedback Type Decision Matrix

Choose the appropriate feedback mechanism based on urgency and attention requirements:

Critical + Blocking       → Modal Dialog
Important + Non-blocking  → Alert Banner
Success/Info + Temporary  → Toast/Snackbar
Contextual Help          → Tooltip/Popover
In-progress              → Progress Indicator
No Data                  → Empty State

Quick Reference by Urgency

Urgency Level	Component	Duration	Blocks Interaction
Critical	Modal Dialog	Until action	Yes
Important	Alert Banner	Until dismissed	No
Standard	Toast	3-7 seconds	No
Contextual	Inline Message	Persistent	No
Help	Tooltip	On hover	No
Progress	Spinner/Bar	During operation	Optional

Implementation Approach

Step 1: Determine Feedback Type

Assess the situation using these criteria:

1. Urgency: How critical is the information?
2. Duration: How long should it persist?
3. Action Required: Does user need to respond?
4. Context: Is it related to specific UI element?

Step 2: Choose Implementation Pattern