toast
Toast notifications with Sonner for user feedback. Use for success/error messages, async operation feedback, and temporary notifications. Always use when using Sonner.
Source facts
- Repository
- udecode/kitcn
- Last source activity
- March 30, 2026 at 13:19
- Detected SKILL.md language
- English
- Stars
- 452
- Forks
- 35
Install options
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Review the source files
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Showing SKILL.md
SKILL.md
Source instructions · Read-only preview- description
- Toast notifications with Sonner for user feedback. Use for success/error messages, async operation feedback, and temporary notifications. Always use when using Sonner.
- name
- toast
- metadata
- {"skiller":{"source":".agents/rules/toast.mdc"}}
# Toast Notifications
## Context
- When displaying temporary notifications to users
- For success, error, or informational messages
- For async operation feedback
- DO NOT overuse toasts, follow the standard UX patterns
## Requirements
- Import toast from 'sonner' package
- Use toast.promise() for async operations with loading/success/error states
- Use direct toast methods for immediate notifications
- Keep messages concise and informative
## Examples
<example>
// For async operations
const promise = someAsyncOperation();
toast.promise(promise, {
loading: 'Operation in progress...',
success: 'Operation successful!',
error: 'Operation failed.',
});
</example>
<example>
// For immediate notifications
toast.success('Action completed successfully!');
toast.error('An error occurred.');
toast.info('Here's some information.');
</example>
<example type="invalid">
// Don't create custom toast implementations
const showToast = (message) => {
const toastElement = document.createElement('div');
toastElement.innerText = message;
document.body.appendChild(toastElement);
setTimeout(() => toastElement.remove(), 3000);
};
</example>
<example type="invalid">
// Don't use alert() for notifications
alert('Operation successful!');
</example>
View on GitHub