Notification design
Skill Dragoon0x/everything-design-taste/skills/notification-design
Notification systems, alert hierarchy, toast patterns, badges, and notification center design.From its SKILL.md
npx -y skills add Dragoon0x/everything-design-taste --skill notification-designAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 9 stars9 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
1.5 KB, 321 tokens by cl100k_base, as published. Nobody here has run it
Notification Design
Notification Types
| Type | Urgency | Persistence | Example |
|---|---|---|---|
| Toast/Snackbar | Low | Auto-dismiss (3-5s) | "File saved" |
| Banner | Medium | Dismissible | "New version available" |
| Inline alert | Medium | Persistent | Form validation error |
| Modal alert | High | Requires action | "Delete all data?" |
| System notification | Varies | OS-level | Push notification |
Toast Design
- Position: top-right (desktop), top-center (mobile).
- Auto-dismiss: 3-5 seconds. Pause on hover.
- Stack limit: max 3 visible. Queue the rest.
- Include undo action for destructive operations.
- Don't use toasts for errors that need user action.
Alert Colors
| Color | Meaning | Icon |
|---|---|---|
| Blue/Info | Informational, neutral | Info circle |
| Green/Success | Positive outcome | Checkmark |
| Yellow/Warning | Caution, needs attention | Warning triangle |
| Red/Error | Something failed, action needed | X circle or exclamation |
Notification Center
- Badge count on bell icon (never show 99+, cap at 9+ or show exact).
- Group by time: Today, Yesterday, This Week, Older.
- Mark as read on click. Mark all as read option.
- Empty state: "You're all caught up" with relevant illustration.
- Don't mix notification types (system alerts vs social activity).
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.