react-alert

This skill defines the standard approach for displaying alerts, notifications, and user feedback in this project. All alerts MUST use toast notifications from the sonner library — never native browser alerts.

Setup

The sonner package is already installed in this project. The <Toaster> provider is already mounted in src/App.tsx:

import { Toaster } from 'sonner';

// Inside the App component JSX:
<Toaster position="bottom-right" richColors />

No additional setup is needed. Just import toast from sonner and call it.

Rules

1. Always use toast from sonner for any user-facing alert, notification, or feedback message.
2. Never use window.alert() — use toast() or toast.error() instead.
3. Never use window.confirm() — use the Modal component (see react-modal skill) for confirmation dialogs, with toast for the resulting success/error feedback.
4. Never use window.prompt() — use the Modal component with a form input instead.
5. Never use console.log() as a substitute for user feedback — if the user should see it, use a toast.
6. Never create custom alert/notification components (banners, snackbars, inline alerts) for transient feedback. The toast system already handles this with consistent styling and auto-dismiss behavior.

Toast Types

Use the appropriate toast variant to match the nature of the message:

import { toast } from 'sonner';

// Success — operation completed successfully
toast.success('Profile updated successfully!');

// Error — something went wrong
toast.error('Failed to save changes. Please try again.');

// Warning — caution or important notice
toast.warning('Your session will expire in 5 minutes.');

// Info — neutral informational message
toast.info('New updates are available.');

// Default — generic notification (no icon/color)
toast('Something happened.');

// Loading — for async operations with follow-up
toast.loading('Saving changes...');

Usage Patterns

Basic feedback after an action