| name | ux-notifications-and-toasts |
| description | Design or critique notifications — pick the right type (badge, banner, snackbar, toast, alert, push) for the message's urgency, and respect user attention with timing, frequency, and opt-out controls. Trigger when the user asks to design or review notifications, toasts, snackbars, badges, banners, alerts, push notifications, or a notification strategy. |
| license | MIT |
| metadata | {"author":"uxcel","version":"1.0.0"} |
Notifications & Toasts Skill
How this skill behaves (read first)
This is a generative skill. The default failure modes: urgency inflation (everything is an alert; success messages interrupt), frequency abuse (repeat pings for the same event until users kill all notifications), and attention disrespect (badges for non-notifications, pings with no user value). A notification spends the user's attention — the type must match the message's actual urgency, and the system must stay worth listening to. This skill gates:
- Establish urgency, audience moment, and channel — these pick the type.
- Apply the always-true core — type-urgency match, frequency discipline, content brevity, user control.
- Surface the engagement levers (push strategy, personalization, rich media) with trade-offs — this is dark-patterns-adjacent territory.
Then it hands off to ux-heuristics-audit, ux-accessibility-audit, ux-aesthetics-audit, ux-microcopy-audit, and ux-dark-patterns-audit for validation.
Step 0 — Establish context before designing
Ask if not known; state the assumption if proceeding without an answer:
- How urgent is the message, really? Needs action now (failed payment) → persistent alert. Useful soon (storage near limit) → warning. FYI (saved, sent) → transient snackbar/toast. Just "something's new" → badge. Be honest — urgency inflation is the root failure.
- Where is the user? In the app and active → don't interrupt: increment a badge or insert the update inline. Away → push (if opted in). Mid-task → batch for later.
- Whose goal does it serve? A notification that serves only the business (re-engagement nag) costs trust. If users wouldn't thank you for it, reconsider.
- Platform — Android toasts/snackbars vs. iOS conventions; push character limits (~39 title / ~150 body).
The always-apply core (correct for almost every case)
Match the type to the urgency
- Badge — dot (or count) top-right of an icon, for unread notifications only — never scores, weather, or marketing. Dot shape, conventional placement; disappears once seen.
- Status badge — at-a-glance state (online, in-progress, completed) — informational, not a ping.
- Banner — temporary strip (top/bottom) for events worth a glance (new message preview); doesn't block.
- Snackbar — bottom-of-screen confirmation in context, often with one action ("Message sent" + Undo). Never covers a FAB or important controls.
- Toast — low-priority system messages; can't be dismissed, can stack — use sparingly.
- Alert — persists until resolved; for things that demand attention. Success = green + check, auto-dismissing; info = ℹ; warning = time-to-act heads-up; error = red + exclamation, immediate action. Don't dress an info message as a warning.
- Push — reaches users outside the app; the highest-cost channel, opt-in and easiest to lose (see gated table).
Frequency discipline
- One event, one notification. No re-pings for the same unread message; group related notifications instead.
- Foreground grace: when the app is open, update the badge or insert content into the view — don't fire a system notification at someone already looking at the screen.
- Contextual and personal beats broadcast: segment, reference the user's actual journey (usage limit approaching, feature they use), never spray.
Content
- Concise and scannable: short title carrying the message, plain language, no jargon. Push: ~39-char title, ~150-char body — shorter is better.
- Actionable where possible: snackbar Undo, push actions that resolve without opening the app.
User control (non-negotiable)
- Easy to mute or turn off — globally and per-type, with frequency options. Users who can tune notifications keep them; users who can't, kill them (or the app).
- No blame or shame in opt-out flows.
The context-dependent decisions (surface, don't auto-apply)
| Decision | Apply when | Avoid / adapt when | Default recommendation |
|---|
| Push notifications at all | Time-sensitive, user-valued updates (order shipped, message received) | Re-engagement nags, generic promos — the fastest route to opt-out | Transactional first; promotional only with explicit, granular opt-in |
| Push opt-in ask | Primed, at a relevant journey moment, with the value stated | Raw system dialog at first launch | Prime → ask in context (see ux-modals-and-dialogs for permission patterns) |
| Personalization | Name, past behavior, preferences — measurably higher engagement | Creepy specificity; data users didn't expect you to use | Personalize from in-app behavior; stay transparent |
| Rich media (images/GIFs) | Visual content adds real information (product image, delivery photo) | Decoration that bloats a simple message | Text-first; media when it informs |
| Location-based (geofencing) | Genuine contextual value (gate change, store nearby with an active order) | Surveillance-flavored marketing pings | High bar; explicit permission, obvious value |
| Timing optimization | Send in users' active hours, their time zone | Optimizing for clicks over usefulness (11pm "we miss you") | User-behavior-based timing, capped frequency |
| Badge counts vs. dots | Counts for countable unread items (inbox) | Counts that grow unbounded and induce anxiety | Dot for "something new"; count where the number helps |
| Performance monitoring | Track opens/CTR and opt-outs/mutes as fatigue signals | Celebrating opens while opt-outs climb | Treat opt-out rate as the primary health metric |
Validate the result (orchestration)
Hand-offs name each lens by its installable skill name. Invoke one only if that skill is installed; if it isn't, this skill's own core already carries these rules — proceed without it rather than blocking.
After generating or revising, hand the result to the audit lenses rather than declaring it done. These are candidate lenses — posture is set by docs/orchestration-policy.md, or route the whole thing through ux-design-review. Here, heuristics, microcopy, and dark-patterns are Tier A (auto-run); accessibility, aesthetics, and mobile-responsiveness are Tier B (offered) — under an existing design system aesthetics is suppressed and accessibility narrows to usage; mobile-responsiveness applies only on mobile. If the user invoked this skill for one specific thing, respect that scope.
ux-heuristics-audit (Tier A) — visibility of system status without disruption, match between urgency and presentation, user control and freedom.ux-accessibility-audit (Tier B — offer; narrow under a design system) — color-plus-icon urgency coding (never color alone), screen-reader announcement of transient messages, snackbar timing sufficient to read.ux-aesthetics-audit (Tier B — offer; suppress under a design system) — alert styling restraint, badge/banner visual noise across the interface.ux-microcopy-audit (Tier A) — title/body brevity, plain language, CTA verb quality, opt-out wording.ux-dark-patterns-audit (Tier A) — the backlog flags this skill as attention-respect territory: manufactured urgency, nag loops, buried mute settings, guilt-trip opt-outs.ux-mobile-responsiveness-audit (Tier B — offer; applies only on mobile) — when the context is mobile: snackbar/FAB layout, push rendering across OSes.
If the audits surface a conflict (e.g., engagement targets vs. notification fatigue), resolve back toward the primary task: a notification system only works while users trust it — protect that trust over any single campaign.
Common do/don't patterns
| ❌ Don't | ✅ Do |
|---|
| Every message styled as an urgent alert | Type matched to real urgency; most messages are quiet |
| Re-ping the same unread message hourly | One event, one notification; group the rest |
| System notification while the user is in the app | Badge increment or inline insert |
| Badge count showing the weather | Badges for unread notifications only |
| Success modal interrupting the flow | Auto-dismissing snackbar/success alert |
| Snackbar covering the FAB | Snackbar above all content, clear of controls |
| Push permission dialog at first launch | Primed, contextual ask with stated value |
| "We miss you 😢" at 11pm | Time-zone-aware, behavior-based, user-valued pings |
| Mute buried four screens deep | Per-type controls, easy global off |
| 150 characters of jargon | ~39-char title that carries the message |
| Ship without checking | Hand off to heuristics + accessibility + aesthetics + microcopy + dark-patterns |
Source lessons (Uxcel)
