/decode-craft

Understand why an interface feels good. Reads the docs, traces the code, and tries the interaction, then explains the feeling and the decisions behind it. For one component or a whole library.

npx skills add mrunal2000/skills --skill decode-craft

Download ZIP

You

Decode CraftWhat makes Sonner: https://sonner.emilkowal.ski/ feel so good?

Assistant Response excerpt

Sonner keeps notifications compact until you want to read them.

Why it feels good

A stack, not a wall. New messages gather in one corner. Older ones sit behind the newest, keeping repeated feedback from taking over the screen.
Room to read. The stack opens when you hover, and the countdown pauses. You can inspect a message without racing its disappearance.

Technical takeaways

Takeaway	How it works	Values / props
Reveal detail on demand.	Collapsed cards hide their contents; expansion restores their measured heights. Styles ↗	`expand={false}` `visibleToasts={3}` Transform, opacity, height: `400ms`
Pause expiry during interaction.	Keep the remaining time, then resume when interaction ends. Timer logic ↗	Default lifetime: `4000ms` Paused while expanded, interacting, or the tab is hidden.

Checked: Sonner’s docs and main-branch source; tried repeated toasts in the live demo. The demo’s exact package version wasn’t verified.