Configure Sonner toast notifications for React async operations.
npx skills add https://github.com/antonyfmunoz/OS --skill sonner
Please help me install this Agent Skill. Skill: sonner Source: https://github.com/antonyfmunoz/OS/tree/main/skills/tools/sonner Command: npx skills add https://github.com/antonyfmunoz/OS --skill sonner
This Skill removes the friction of manual UI status handling by helping you add, debug, and standardize toast notifications so users always get clear success/error/loading feedback during operations.
<Toaster /> once and trigger toast.* from anywhere, including mutation callbacks and error handlers.toast.promise(...) to convert async operations into consistent loading→success/error flows.id values to update a single toast (e.g., progress and retries) instead of spamming the user.MutationCache / QueryCache global onError to show default error toasts with minimal boilerplate.<Toaster /> at the correct root location and apply theme/richColors/classNames without common footguns.Add a single root <Toaster /> to your app, then replace your scattered success/error UI with toast.promise(mutation.mutateAsync(...), { loading, success, error }) for each async action.
High-intent search queries and answers about installing and using this skill.
Toast notifications for async operations are displayed by mounting a single root `<Toaster />` component and using `toast.promise` to convert mutation callbacks into loading, success, and error feedback states.
Duplicate React toast notifications during retries are prevented by assigning stable toast IDs, which deduplicate messages and update a single existing toast's progress instead of stacking multiple instances.
TanStack Query MutationCache can trigger global error toasts by wiring the `onError` callback within `MutationCache` or `QueryCache`, providing default error UI feedback with minimal boilerplate.
Sonner does not require hooks to trigger toast messages; it provides a global, hook-free toast UX where you mount `<Toaster />` once and call `toast.*` methods from anywhere, including mutation callbacks.
The best way to wire a React toast theme with shadcn/ui is placing the `<Toaster />` at the correct root location and applying theme, richColors, and classNames properties directly to avoid common configuration footguns.
zaid-khan-codeDesign server-rendered Next.js App Router patterns with shadcn/ui and validated forms.
hopeovertureGenerate React forms with React Hook Form, Zod validation, and shadcn/ui controls.
greyhaven-aiStandardize TanStack Start, Router, and Query patterns in React 19 applications.
xyqyearIntegrate sonner toast notifications with shadcn/ui components in React.