Enforce consistent snackbar/toast notification patterns across the entire platform. Use this skill whenever the user creates, modifies, or reviews snackbar/toast notifications, notification providers, or feedback components. Triggers when code uses enqueueSnackbar, toast(), notify(), or any notification API — even if the user doesn't explicitly mention 'snackbar standards'.
Ensure all snackbar and toast notifications follow a consistent pattern across the entire platform, regardless of the underlying library. Consistency in user feedback notifications is critical for UX coherence.
This skill applies whenever work touches:
enqueueSnackbar, toast, notify, etc.)Check the project's package.json for known notification libraries:
| Library | Package Name |
|---|
| Hook/API |
|---|
| notistack | notistack | useSnackbar() / enqueueSnackbar() |
| react-hot-toast | react-hot-toast | toast() |
| react-toastify | react-toastify | toast() |
| sonner | sonner | toast() |
| Chakra UI toast | @chakra-ui/react | useToast() |
| MUI Snackbar | @mui/material | <Snackbar> component |
If no notification library exists, recommend notistack as the default — it provides the best balance of customisability, Material Design integration, and stacking behaviour.
Search the project for the notification setup:
SnackbarProvider, ToastContainer, Toaster, or equivalent wrapperStyledNotistack, custom toast components)enqueueSnackbar, toast(, useToast, useSnackbar to find how notifications are invokedRead these files to understand the established pattern before writing any notification code.
| Setting | Required Value | Rationale |
|---|---|---|
| Max visible | 5 | Prevents notification overload |
| Auto-hide duration | 3000ms (3 seconds) | Long enough to read, short enough not to annoy |
| Prevent duplicates | true | Identical messages should not stack |
| Default variant | success | Most actions succeed; errors are explicit |
| Position | Top-right | Non-intrusive, consistent with platform conventions |
| Close button | Always present | User must always be able to dismiss manually |
| Variant | When to Use | Icon Style |
|---|---|---|
success | CRUD operations completed, settings saved, actions confirmed | Checkmark circle |
error | Operation failed, server error, validation failure | Danger/exclamation |
warning | Destructive action confirmation, degraded state, rate limits | Alert triangle |
info | Neutral information, status updates, tips | Info circle |
"Client updated successfully" not "The client record has been successfully updated in the database""[Thing] [action]ed successfully" or "Failed to [action] [thing]"Client updated successfully
Failed to delete contact
Form submitted
Session expired — please log in again
File uploaded (3 of 5)
Success! // Too vague
Error: 500 Internal Server Error // Technical leak
The operation completed. // Unnecessary period, vague
CONTACT DELETED // Shouting
All notification calls must follow this structure, regardless of library:
// notistack pattern (default recommendation)
const { enqueueSnackbar } = useSnackbar();
// Success
enqueueSnackbar('Client created successfully', { variant: 'success' });
// Error
enqueueSnackbar('Failed to create client', { variant: 'error' });
// Warning
enqueueSnackbar('This action cannot be undone', { variant: 'warning' });
// Info
enqueueSnackbar('Changes saved as draft', { variant: 'info' });
Regardless of library, notification styling must:
ThemeProvider)components/snackbar/index (or equivalent) so the library can be swapped without touching every consumernotistack/react-hot-toast/etc.// components/snackbar/index.ts (or equivalent)
export * from 'notistack'; // re-export everything
export { default as SnackbarProvider } from './snackbar-provider';
This pattern means swapping the underlying library only requires changing the wrapper — not every file that shows a notification.
When violations are found:
Example:
SNACKBAR: Inconsistent message format
Rule: Messages must follow "Action + Result" pattern (Snackbar Standards > Message Format)
Found: enqueueSnackbar('Success!', { variant: 'success' })
Fix: enqueueSnackbar('Invoice created successfully', { variant: 'success' })
When writing code alongside the user, proactively:
success)