skills.rest
masermediagroup-stack
masermediagroup-stackCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

providing-feedback

Implements toast notifications, modals, alerts, progress indicators, and empty states in React.

1|Updated Feb 24, 2026
Search Tags:#accessibility#react#toast notifications#aria#empty state#progress indicator#modal dialog
One-click install
npx skills add https://github.com/masermediagroup-stack/maser-media --skill providing-feedback-masermediagroup-stack
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: providing-feedback
Source: https://github.com/masermediagroup-stack/maser-media/tree/main/.cursor/skills/community/ai-design-components/skills/providing-feedback
Command: npx skills add https://github.com/masermediagroup-stack/maser-media --skill providing-feedback-masermediagroup-stack

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires sonner, @radix-ui/react-dialog, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Building consistent, accessible user feedback UI (toasts, modals, alerts, progress indicators, empty states) from scratch is repetitive and error-prone, especially around timing, focus management, and ARIA semantics. ## Core Features & Use Cases - Feedback Type Selection: A decision matrix maps urgency and blocking requirements to the right component (modal, alert banner, toast, tooltip, progress indicator, empty state). - Library-Guided Implementation: Ready-to-use patterns with Sonner for toasts and Radix UI for dialogs, plus comparisons of react-hot-toast, react-toastify, and Headless UI. - Accessibility Patterns: ARIA live regions, focus trapping and restoration, ESC handling, and reduced-motion support with tested code examples. - Use Case: When adding a delete confirmation flow to a dashboard, use this Skill to generate a Radix UI confirmation modal with focus management, a success toast with correct auto-dismiss timing, and an error alert with retry action. ## Quick Start Use the providing-feedback skill to add a delete confirmation modal with a success toast and accessible error alert to my React app.

Frequently Asked Questions about providing-feedback

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add toast notifications to a React app?▼

Install Sonner and render its Toaster component at your app root, then call toast.success or toast.error anywhere in your code. Position toasts bottom-right and auto-dismiss success messages after 3-4 seconds and errors after 7-10 seconds.

How do I build an accessible modal dialog in React?▼

Use Radix UI's Dialog component, which provides focus trapping, ESC-to-close, and proper ARIA attributes out of the box. Save focus before opening, move focus into the modal, and restore focus to the trigger element on close.

Sonner vs react-hot-toast vs react-toastify, which should I use?▼

Sonner is recommended for modern React 18+ apps with strong accessibility. react-hot-toast fits when bundle size matters at under 5KB, while react-toastify is better when you need RTL support and mobile optimization.

When should I use a modal instead of a toast notification?▼

Use a modal only for critical, blocking situations that require a user decision, such as confirming deletions. Use toasts for non-blocking success or info messages, and alert banners for important but non-blocking warnings.

How long should toast notifications stay visible?▼

Success toasts should auto-dismiss in 3-4 seconds, info in 4-5 seconds, warnings in 5-7 seconds, and errors in 7-10 seconds or require manual dismissal. Toasts with action buttons should persist 10+ seconds or not auto-dismiss.

How do I make loading indicators accessible to screen readers?▼

Use role="status" with aria-live="polite" for spinners and role="progressbar" with aria-valuenow for determinate progress bars. Announce percentage updates through a visually hidden live region so screen reader users receive progress feedback.

Related Skills

Explore More Software Engineering Skills→
moughamirmoughamir

tailwindcss-advanced-design-systems

Define Tailwind CSS design tokens and semantic theme utilities with @theme and CSS variables.

Community
Advanced
przbaduprzbadu
1

react-ui-patterns

Standardize loading, empty, and error states in React components.

Community
Intermediate
doanchienthangdevdoanchienthangdev
4

implementing-accessibility

Implement WCAG 2.1 AA compliant React interfaces with ARIA and keyboard navigation.

Community
Intermediate
pascallammerspascallammers
1

shadcn-ui-components

Generate and integrate accessible UI components with shadcn/ui and Tailwind CSS.

Community
Basic