What problem does it solve? Building transient UI feedback like success messages, error alerts, and loading indicators often leads to inconsistent patterns, broken dark-mode styling, and missing undo actions. This Skill provides a pattern guide for implementing toasts and notifications correctly with Sonner. ## Core Features & Use Cases - Toast Pattern Catalog: Covers plain, semantic (success/error/warning/info), loading, promise-based, action, custom JSX, and headless toast types with guidance on when to use each. - Quality Checklist & Anti-Patterns: Enforces a single root <Toaster />, richColors, theme wiring, promise toasts for async operations, and swipe-to-dismiss on mobile while flagging common mistakes like duplicate toasters and stuck loading toasts. - Use Case: When a user deletes an item, fire a loading toast, update it to a success toast with an Undo action button, and keep it open long enough for the user to reverse the action. ## Quick Start Ask the agent to add a toast notification with an undo action to the delete flow in this React project.
