providing-feedback
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.
Оригинален текст · няма потвърден превод на българскиПърво прочетете инструкцията.
Файлът се зарежда от посочения източник само по ваше действие. Можете да го прочетете тук, да го копирате или да го запазите като .md.
GitHub хранилище- Звезди на репото
- 522
- Лиценз
- Не е посочен. Проверете в репозитория.
- Последна проверка на записа
- Няма посочена дата
Добавете в своя инструмент.
Командата отваря избора на skills от репозитория. Прочетете файла и условията на автора преди изпълнение.
npx skills add ancoleman/ai-design-componentsСтраницата копира текст. Не инсталира и не изпълнява нищо на устройството ви.
Откъс от SKILL.md
Началото на файла на автора, без превод.
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:
- Urgency: How critical is the information?
- Duration: How long should it persist?
- Action Required: Does user need to respond?
- Context: Is it related to specific UI element?
Step 2: Choose Implementation Pattern
For Toasts/Snackbars:
- Position: Bottom-right (recommended)
- Duration: 3-4s (success), 5-7s (warning), 7-10s (error)
- Stack limit: 3-5 maximum
- See
references/toast-patterns.mdfor detailed patterns
For Modal Dialogs:
- Focus management: Trap focus within modal
- Accessibility: ESC to close, proper ARIA labels
- Backdrop: Click outside to close (optional)
- See
references/modal-patterns.mdfor implementation