providing-feedback_skill

Overview

This skill implements comprehensive feedback and notification systems for web apps, covering toasts, alerts, modals, progress indicators, empty states, and error states. It centralizes timing, accessibility, and design-token integration so messages remain consistent, actionable, and accessible across components. Use it to communicate system state, confirm actions, and surface errors clearly.

How this skill works

The skill provides decision rules for choosing the right feedback pattern by urgency, duration, and required user action. It includes recommended implementation patterns (toasts with Sonner, modals with Radix UI), ARIA live-region and focus-management guidance, progress timing thresholds, and design-token usage for consistent styling. Scripts and examples automate toast management, timing calculations, and message formatting.

When to use it

• Show transient success/info using toasts or snackbars
• Surface important non-blocking issues with alert banners
• Block interaction for critical confirmation with modal dialogs
• Display progress (spinner or bar) during operations
• Render empty or zero-result states with guidance and CTA

Best practices

• Match urgency to attention: avoid modals for non-critical messages
• Use sensible auto-dismiss durations (success: 3-4s, error: 7-10s)
• Limit toast stack size (3–5) and position consistently (e.g., bottom-right)
• Implement ARIA roles and live regions for announcements
• Trap and restore focus for modals; honor reduced-motion preferences

Example use cases

• Saving form data: show a loading toast, then success or error toast
• Deleting an item: open a confirmation modal that traps focus
• File upload: spinner for short uploads, progress bar for long uploads with cancel
• Search results: display an empty-state illustration and CTA when zero results
• Rate limit or system warning: persistent alert banner with retry/help link