PlugWiki

ask-sonner Skill for Claude Code: Set Up and Fix Sonner Toasts

Makes Claude set up, style and fix Sonner, the React toast library, using answers from its author, Emil Kowalski.

Installs
155.2K
on skills.sh
Stars
52.7K
on GitHub
Files
1
besides SKILL.md
Updated
Oct 2026
last repo commit

ask-sonner is a guide to Sonner, the toast library. It tells Claude how to mount one Toaster at the root, which toast call to use, and how to run loading, promise, update and persistent toasts. It also covers styling, theming, icons, position and multiple toasters.

It triggers when you work with Sonner or hit problems, such as toasts that do not appear, appear twice, lose styles, sit behind a modal or ignore dark mode. The troubleshooting table has 13 symptoms with a cause and fix for each. If you call it with no question, Claude replies with one fixed line and waits. It bundles API.md with the prop tables and no scripts.

Good for

  • React and Next.js developers adding toast notifications with Sonner
  • Anyone debugging toasts that do not show, show twice or ignore Tailwind classes
  • Designers who want Sonner styled to match their theme

Install ask-sonner

Claude Code

  1. 1

    Copy this prompt.

    Install the ask-sonner skill in Claude Code. Run this command:

npx skills add https://github.com/emilkowalski/skills --skill ask-sonner

Then check that it loaded and tell me how to use it.
  2. 2

    Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

  1. Initial Response
  2. Setup
  3. Picking the right call
  4. Recipes
  5. Styling — the escalation ladder
  6. Troubleshooting

Key facts

Author
Emil Kowalski
License
MIT
Installs on skills.sh
155,186 (Nov 2, 2026)
GitHub stars
52,705 (Nov 2, 2026)
skills.sh audits
Gen Agent Trust Hub: pass, Socket: pass, Snyk: pass
Last commit
2026-10-28
Files
SKILL.md plus API.md (full prop tables for the Toaster and toast())
Troubleshooting table
13 symptoms with causes and fixes

What it includes

  • One Toaster at the root and toast() from client code

    In Next.js the Toaster goes in layout.tsx. toast() does nothing on the server, so server actions return a result and the client calls toast().

    Write · Setup

  • 7 calls: plain, typed, loading, promise, action, JSX and headless

    Includes toast.promise for loading to success or error, and toast.custom for no built-in styles.

    Write · Picking the right call

  • Update, persist, dismiss, read active toasts and multiple toasters

    Updating a toast reuses its id. Multiple toasters need an id and a toasterId.

    Write · Recipes

  • Defaults, inline style, classNames, then unstyled or headless

    Sonner's injected styles win, so Tailwind classes need `!important`. Climb only as far as the change requires.

    Write · Styling ladder

  • 13 symptoms mapped to a cause and a fix

    Covers duplicate toasts, missing styles, shadow DOM, stacking contexts, dark mode and stuck promise toasts.

    Write · Troubleshooting

  • Exact prop names, types and defaults

    Claude reads it when it needs an exact prop.

    Files · API.md

From the official docs

Permissions

Low risk

The skill is text guidance, but setting Sonner up can add a package and edit your layout file. Review the diff before you commit.

What it can do

  • Read your data
  • Create and change things
  • Delete things
  • Read-only mode

Watch out for

  • It may install the Sonner package

    When you ask Claude to set Sonner up, it can add a package to your project. Review the dependency change before you commit.

Questions

What does ask-sonner do?

It makes Claude answer Sonner questions from the library author's guide. That covers setup, picking the right toast call, styling, theming and fixing broken toasts.

How do I install it in Claude Code?

Use the install box above, which adds it from the emilkowalski/skills repo. Then ask a Sonner question, for example "my Sonner toast appears twice".

Why does my toast appear twice?

The skill lists two causes. Two Toasters may be mounted, for example in the layout and in a page. Or toast() fired in an effect under React StrictMode's development double call.

Why do my Tailwind classes have no effect?

Sonner's default styles win the cascade. The skill says to mark the classes !important, or to use the unstyled or headless options.

Is it only for Next.js?

It is for React. The SKILL.md gives Next.js notes, plus fixes for Astro and Shadow DOM.

Does it need an API key or scripts?

The SKILL.md names no API key and the skill bundles no scripts. If you ask Claude to add Sonner, it may install the package into your project.

Is it safe to install?

It is two markdown files with no scripts. If you ask Claude to set Sonner up, it may add a package and edit your layout file, so review the diff before you commit.

Information

updated Nov 2, 2026

Repository
emilkowalski/skills
Folder
skills/ask-sonner

emilkowalski/skillsskills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 3
  1. SKILL.md · github.com
  2. skills.sh listing · skills.sh
  3. GitHub repo · github.com

Updated Nov 2, 2026.