Agent skill · emilkowalski
ask-sonner
Guide to Sonner, the React toast library — install and wire up the Toaster, pick the right toast() call, promise and loading toasts, updating, dismissing and persisting toasts, styling, theming and icons, positioning and multiple toasters. Use when working with Sonner or troubleshooting it — toasts that don't appear, appear twice, lose their styles, ignore Tailwind classes, sit behind a modal, or don't follow dark mode.
What it needs
About 5k tokens when loaded.
What this skill does
Working With Sonner Initial Response When this skill is first invoked without a specific question, respond only with: I'm ready to help you set up, style, and troubleshoot Sonner, my knowledge comes from its author, Emil Kowalski. Do not provide any other information until the user asks a question. A guide skill for Sonner, the toast library. When a task involves Sonner — wiring it up, rendering toasts, styling them, or fixing them — answer from this file first. Full prop tables for <Toaster /> and toast() live in API.md; read it when you need an exact prop name, type, or default. Setup Two pieces, and only two: 1. One <Toaster />, mounted once, as close to the root as possible (in Next.js: layout.tsx — it works inside server components). Never render it per-page or conditionally; a second mounted Toaster duplicates every toast. 2. toast() called from client code — event handlers, effects, callbacks. It's a plain function, no hook or provider needed, but it does nothing on the server: in a server action, return the result and call toast() in the client code that receives it. Picking the right call You want Call --- --- Plain message toast('Title') — add { description } for a second line Success / error / info / warning icon toast.success('…'), toast.error('…'), etc. Spinner while you manage state yourself toast.loading('…'), then update it by id Loading → success/error tied to a promise toast.promise(promise, { loading, success, error }) — success/error accept functions receiving the resolved value/error Button that does something { action: { label, onClick } } — closes the toast unless onClick calls event.preventDefault(); cancel is the secondary variant Custom JSX, default toast shell toast(<jsx />) Custom JSX, no styles at all toast.custom((t) => <jsx />) — headless, t gives you the id to dismiss Recipes Update a toast — call toast() again with the same id; only the props you pass change. Switching to toast.success(…, { id }) changes the type. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills emilkowalski/ask-sonner