notifications-and-recovery

Name: notifications-and-recovery
Author: dembrandt

266installs5forks

How to install notifications-and-recovery?

dembrandt/dembrandt-skills/notifications-and-recovery

$npx -y skills add dembrandt/dembrandt-skills --skill notifications-and-recovery

Installs into the current project.

Summary

When something goes wrong, the user must be able to recover or try again. Toasts, inline errors, banners, and notification patterns each have a specific role. Use when designing error states, success confirmations, async feedback, in-place editing, or any system that communicates

Files · 1

View on GitHub

SKILL.md

1	# Notifications and Recovery
2
3	When something changes — success, failure, or anything in between — the user must know. And when something goes wrong, they must always have a path forward. A notification without a recovery action is just an apology.
4
5	---
6
7	## Pattern Selection
8
9	\| Pattern \| When to use \| Dismissal \|
10	\|---\|---\|---\|
11	\| Toast \| Transient result of a user action (saved, sent, deleted) \| Auto-dismiss 4–6s, manual close \|
12	\| Inline error \| Field-level validation, form errors \| Clears on correction \|
13	\| Alert banner \| Persistent issue affecting the current context \| Manual dismiss or resolved state \|
14	\| Modal / dialog \| Blocking error requiring a decision before continuing \| User action required \|
15	\| Empty state \| No data yet — guide the user to the first action \| N/A \|
16	\| Skeleton / loading \| Async content pending \| Replaced by content \|
17	\| In-place confirmation \| Inline edit saved, row updated, item toggled \| Auto-clears after 2–3s \|
18
19	---
20
21	## Toast Notifications
22
23	Toasts confirm that a background action completed. They appear without interrupting the user's flow.
24
25	Placement: bottom-center or bottom-right. Never top-center — it competes with page content and navigation.
26
27	Duration: 4–6 seconds for information. Errors should persist until dismissed — the user needs time to read and act.
28
29	Anatomy:
30	```
31	[Icon] Message text [Action] [×]
32	```
33
34	- Icon: colour-coded (green ✓ success, red ✗ error, orange ⚠ warning, blue ℹ info)
35	- Message: one sentence, plain language
36	- Action (optional): "Undo", "Retry", "View" — one action maximum
37	- Close button: always present on errors; optional on success
38
39	```
40	✓ "Changes saved."
41	✓ "Message sent. [Undo]"
42	✗ "Could not save. Check your connection. [Retry]" ← persists until dismissed
43	```
44
45	Never: multiple simultaneous toasts. Queue them; show one at a time.
46
47	---
48
49	## Inline Errors
50
51	Inline errors appear adjacent to the element that caused them. They are the most contextual and actionable form of error feedback.
52
53	Form validation:
54	- Validate on blur (leaving a field), not on every keystroke — keystroke validation is noisy
55	- Validate on submit for the complete form
56	- Show the error message directly below the field, in red, with an icon
57	- The field border changes to `--color-error`
58	- Error message is associated via `aria-describedby` for screen readers
59
60	```html
61	<label for="email">Email</label>
62	<input id="email" aria-describedby="email-error" aria-invalid="true">
63	<p id="email-error" role="alert">Enter a valid email address.</p>
64	```
65
66	In-place editing:
67	- When a field is edited inline (table cell, card title), show save/cancel controls adjacent to the field
68	- On save: brief success indicator ("✓ Saved") that fades after 2s — do not navigate away
69	- On error: inline error message below the field with a retry option
70	- On cancel: restore the original value immediately
71
72	---
73
74	## Alert Banners
75
76	Banners are persistent — they stay until the condition is resolved or the user dismisses them.
77
78	Use for:
79	- Service degradation ("Some features are temporarily unavailable")
80	- Account issues requiring action ("Your subscription expires in 3 days. [Renew]")
81	- Ongoing sync errors ("Changes are not saving. [Retry]")
82	- Important announcements tied to the current page
83
84	Placement: top of the affected section, not the entire pag

People who liked this also viewed

6 picks

Type

notifications-and-recovery

266installs5forks

View on GitHub

How to install notifications-and-recovery?

dembrandt/dembrandt-skills/notifications-and-recovery

$npx -y skills add dembrandt/dembrandt-skills --skill notifications-and-recovery

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Notifications and Recovery
2
3	When something changes — success, failure, or anything in between — the user must know. And when something goes wrong, they must always have a path forward. A notification without a recovery action is just an apology.
4
5	---
6
7	## Pattern Selection
8
9	\| Pattern \| When to use \| Dismissal \|
10	\|---\|---\|---\|
11	\| Toast \| Transient result of a user action (saved, sent, deleted) \| Auto-dismiss 4–6s, manual close \|
12	\| Inline error \| Field-level validation, form errors \| Clears on correction \|
13	\| Alert banner \| Persistent issue affecting the current context \| Manual dismiss or resolved state \|
14	\| Modal / dialog \| Blocking error requiring a decision before continuing \| User action required \|
15	\| Empty state \| No data yet — guide the user to the first action \| N/A \|
16	\| Skeleton / loading \| Async content pending \| Replaced by content \|
17	\| In-place confirmation \| Inline edit saved, row updated, item toggled \| Auto-clears after 2–3s \|
18
19	---
20
21	## Toast Notifications
22
23	Toasts confirm that a background action completed. They appear without interrupting the user's flow.
24
25	Placement: bottom-center or bottom-right. Never top-center — it competes with page content and navigation.
26
27	Duration: 4–6 seconds for information. Errors should persist until dismissed — the user needs time to read and act.
28
29	Anatomy:
30	```
31	[Icon] Message text [Action] [×]
32	```
33
34	- Icon: colour-coded (green ✓ success, red ✗ error, orange ⚠ warning, blue ℹ info)
35	- Message: one sentence, plain language
36	- Action (optional): "Undo", "Retry", "View" — one action maximum
37	- Close button: always present on errors; optional on success
38
39	```
40	✓ "Changes saved."
41	✓ "Message sent. [Undo]"
42	✗ "Could not save. Check your connection. [Retry]" ← persists until dismissed
43	```
44
45	Never: multiple simultaneous toasts. Queue them; show one at a time.
46
47	---
48
49	## Inline Errors
50
51	Inline errors appear adjacent to the element that caused them. They are the most contextual and actionable form of error feedback.
52
53	Form validation:
54	- Validate on blur (leaving a field), not on every keystroke — keystroke validation is noisy
55	- Validate on submit for the complete form
56	- Show the error message directly below the field, in red, with an icon
57	- The field border changes to `--color-error`
58	- Error message is associated via `aria-describedby` for screen readers
59
60	```html
61	<label for="email">Email</label>
62	<input id="email" aria-describedby="email-error" aria-invalid="true">
63	<p id="email-error" role="alert">Enter a valid email address.</p>
64	```
65
66	In-place editing:
67	- When a field is edited inline (table cell, card title), show save/cancel controls adjacent to the field
68	- On save: brief success indicator ("✓ Saved") that fades after 2s — do not navigate away
69	- On error: inline error message below the field with a retry option
70	- On cancel: restore the original value immediately
71
72	---
73
74	## Alert Banners
75
76	Banners are persistent — they stay until the condition is resolved or the user dismisses them.
77
78	Use for:
79	- Service degradation ("Some features are temporarily unavailable")
80	- Account issues requiring action ("Your subscription expires in 3 days. [Renew]")
81	- Ongoing sync errors ("Changes are not saving. [Retry]")
82	- Important announcements tied to the current page
83
84	Placement: top of the affected section, not the entire pag

People who liked this also viewed

6 picks

Type