Back to Skills

providing-feedback

verified

Implements feedback and notification systems including toasts, alerts, modals, progress indicators, and error states. Use when communicating system state, displaying messages, confirming actions, or showing errors.

View on GitHub

Marketplace

ai-design-components

ancoleman/ai-design-components

Plugin

backend-ai-skills

Repository

ancoleman/ai-design-components
153stars

skills/providing-feedback/SKILL.md

Last Verified

February 1, 2026

Install Skill

Select agents to install to:

Scope:
npx add-skill https://github.com/ancoleman/ai-design-components/blob/main/skills/providing-feedback/SKILL.md -a claude-code --skill providing-feedback

Installation paths:

Claude
.claude/skills/providing-feedback/
Powered by add-skill CLI

Instructions

# 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

Validation Details

Front Matter
Required Fields
Valid Name Format
Valid Description
Has Sections
Allowed Tools
Instruction Length:
8018 chars