providing-feedback

Name: providing-feedback
Author: ancoleman

57installs59forks

How to install providing-feedback?

ancoleman/ai-design-components/providing-feedback

$npx -y skills add ancoleman/ai-design-components --skill providing-feedback

Installs into the current project.

Summary

Implements feedback and notification systems including toasts, alerts, modals, progress indicators, and error states. Use when communicating system state, displaying messages, confirming actions, or showing errors.

Files · 1

View on GitHub

SKILL.md

1	# Providing User Feedback and Notifications
2
3	This skill implements comprehensive feedback and notification systems that enhance all other component skills by providing consistent patterns for communicating system state, displaying messages, and handling user confirmations.
4
5	## When to Use This Skill
6
7	Activate this skill when:
8	- Implementing toast notifications or snackbars
9	- Displaying success, error, warning, or info messages
10	- Creating modal dialogs or confirmation dialogs
11	- Implementing progress indicators (spinners, progress bars, skeleton screens)
12	- Designing empty states or zero-result displays
13	- Adding tooltips or contextual help
14	- Determining notification timing, stacking, or positioning
15	- Implementing accessible feedback patterns with ARIA
16	- Communicating any system state to users
17
18	## Feedback Type Decision Matrix
19
20	Choose the appropriate feedback mechanism based on urgency and attention requirements:
21
22	```
23	Critical + Blocking → Modal Dialog
24	Important + Non-blocking → Alert Banner
25	Success/Info + Temporary → Toast/Snackbar
26	Contextual Help → Tooltip/Popover
27	In-progress → Progress Indicator
28	No Data → Empty State
29	```
30
31	### Quick Reference by Urgency
32
33	\| Urgency Level \| Component \| Duration \| Blocks Interaction \|
34	\|---------------\|-----------\|----------\|-------------------\|
35	\| Critical \| Modal Dialog \| Until action \| Yes \|
36	\| Important \| Alert Banner \| Until dismissed \| No \|
37	\| Standard \| Toast \| 3-7 seconds \| No \|
38	\| Contextual \| Inline Message \| Persistent \| No \|
39	\| Help \| Tooltip \| On hover \| No \|
40	\| Progress \| Spinner/Bar \| During operation \| Optional \|
41
42	## Implementation Approach
43
44	### Step 1: Determine Feedback Type
45
46	Assess the situation using these criteria:
47	1. Urgency: How critical is the information?
48	2. Duration: How long should it persist?
49	3. Action Required: Does user need to respond?
50	4. Context: Is it related to specific UI element?
51
52	### Step 2: Choose Implementation Pattern
53
54	For Toasts/Snackbars:
55	- Position: Bottom-right (recommended)
56	- Duration: 3-4s (success), 5-7s (warning), 7-10s (error)
57	- Stack limit: 3-5 maximum
58	- See `references/toast-patterns.md` for detailed patterns
59
60	For Modal Dialogs:
61	- Focus management: Trap focus within modal
62	- Accessibility: ESC to close, proper ARIA labels
63	- Backdrop: Click outside to close (optional)
64	- See `references/modal-patterns.md` for implementation
65
66	For Progress Indicators:
67	- <100ms: No indicator needed
68	- 100ms-5s: Spinner with message
69	- 5s-30s: Progress bar (determinate if possible)
70	- >30s: Progress bar + time estimate + cancel
71	- See `references/progress-indicators.md` for patterns
72
73	For Empty States:
74	- Include: Illustration, headline, body text, CTA
75	- Types: First use, zero results, error, permission denied
76	- See `references/empty-states.md` for designs
77
78	### Step 3: Implement with Recommended Libraries
79
80	Modern React Stack (Recommended):
81	```bash
82	npm install sonner @radix-ui/react-dialog
83	```
84
85	For Toasts - Use Sonner:
86	```tsx
87	import { Toaster, toast } from 'sonner';
88
89	// In your app root
90	<Toaster position="bottom-right" />
91
92	// Trigger notifications
93	toast.success('Changes saved successfully');
94	toast.promise(saveData(), {
95	loading: 'Saving...',
96	success: 'Saved!',
97	error: 'Failed to save'
98	});
99	```
100
101	For Modals - Use Radix UI:
102	```tsx
103	import * as Dialog from '@radix-ui/react-dialog';
104
105	<Dialog.Root>
106	<Dialog.Trigger>Open</Dialog.Trigger>
107	<Dialog.Portal>
108	<Dialog.Overlay />
109	<Dialog.Content>
110	<Dialog.Title>Confirm Action</Dialog.Title>
111	<Dialog.Description>Are you sure?</Dialog.Description>
112	<Dialog.Close>Cancel</Dialog.Close>
113	</Dialog.Content>
114	</Dialog.Portal>
115	</Dialog.Root>
116	```
117
118	See `references/library-comparison.md` for alternative libraries and selection criteria.
119
120	### Step 4: Apply Accessibility Patterns
121
122	ARIA Live Regions for Announcements:
123	```html
124	<!-- For non-critical notifications -->
125	<div role="status" aria-live="polite">
126	File uploaded successfully
127	</div>
128
129	<!-- For critical alerts -->
130	<div role="alert" aria-live="assertive">
131	Error: Failed to save
132	</div>
133	```
134
135	Focus Management for Modals:
136	1. Save current focus before opening
137	2. Move focus to first interactive element in modal
138	3. Trap focus within modal (Tab cycles)
139	4. Restore focus to trigger on close
140
141	See `references/accessibility-feedback.md` for complete patterns.
142
143	### Step 5: Integrate Design Tokens
144
145	All feedback components use the design-tokens skill for consistent theming:
146
147	```css
148	/* Example token usage */
149	.toast {
150	background: var(--toast-bg);
151	color: var(--toast-text);
152	padding: var(--toast-padding);
153	border-radius: var(--toast-border-radius);
154	box-shadow: var(--toast-shadow);
155	animation-d

People who liked this also viewed

6 picks

Type

providing-feedback

57installs59forks

View on GitHub

How to install providing-feedback?

ancoleman/ai-design-components/providing-feedback

$npx -y skills add ancoleman/ai-design-components --skill providing-feedback

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Providing User Feedback and Notifications
2
3	This skill implements comprehensive feedback and notification systems that enhance all other component skills by providing consistent patterns for communicating system state, displaying messages, and handling user confirmations.
4
5	## When to Use This Skill
6
7	Activate this skill when:
8	- Implementing toast notifications or snackbars
9	- Displaying success, error, warning, or info messages
10	- Creating modal dialogs or confirmation dialogs
11	- Implementing progress indicators (spinners, progress bars, skeleton screens)
12	- Designing empty states or zero-result displays
13	- Adding tooltips or contextual help
14	- Determining notification timing, stacking, or positioning
15	- Implementing accessible feedback patterns with ARIA
16	- Communicating any system state to users
17
18	## Feedback Type Decision Matrix
19
20	Choose the appropriate feedback mechanism based on urgency and attention requirements:
21
22	```
23	Critical + Blocking → Modal Dialog
24	Important + Non-blocking → Alert Banner
25	Success/Info + Temporary → Toast/Snackbar
26	Contextual Help → Tooltip/Popover
27	In-progress → Progress Indicator
28	No Data → Empty State
29	```
30
31	### Quick Reference by Urgency
32
33	\| Urgency Level \| Component \| Duration \| Blocks Interaction \|
34	\|---------------\|-----------\|----------\|-------------------\|
35	\| Critical \| Modal Dialog \| Until action \| Yes \|
36	\| Important \| Alert Banner \| Until dismissed \| No \|
37	\| Standard \| Toast \| 3-7 seconds \| No \|
38	\| Contextual \| Inline Message \| Persistent \| No \|
39	\| Help \| Tooltip \| On hover \| No \|
40	\| Progress \| Spinner/Bar \| During operation \| Optional \|
41
42	## Implementation Approach
43
44	### Step 1: Determine Feedback Type
45
46	Assess the situation using these criteria:
47	1. Urgency: How critical is the information?
48	2. Duration: How long should it persist?
49	3. Action Required: Does user need to respond?
50	4. Context: Is it related to specific UI element?
51
52	### Step 2: Choose Implementation Pattern
53
54	For Toasts/Snackbars:
55	- Position: Bottom-right (recommended)
56	- Duration: 3-4s (success), 5-7s (warning), 7-10s (error)
57	- Stack limit: 3-5 maximum
58	- See `references/toast-patterns.md` for detailed patterns
59
60	For Modal Dialogs:
61	- Focus management: Trap focus within modal
62	- Accessibility: ESC to close, proper ARIA labels
63	- Backdrop: Click outside to close (optional)
64	- See `references/modal-patterns.md` for implementation
65
66	For Progress Indicators:
67	- <100ms: No indicator needed
68	- 100ms-5s: Spinner with message
69	- 5s-30s: Progress bar (determinate if possible)
70	- >30s: Progress bar + time estimate + cancel
71	- See `references/progress-indicators.md` for patterns
72
73	For Empty States:
74	- Include: Illustration, headline, body text, CTA
75	- Types: First use, zero results, error, permission denied
76	- See `references/empty-states.md` for designs
77
78	### Step 3: Implement with Recommended Libraries
79
80	Modern React Stack (Recommended):
81	```bash
82	npm install sonner @radix-ui/react-dialog
83	```
84
85	For Toasts - Use Sonner:
86	```tsx
87	import { Toaster, toast } from 'sonner';
88
89	// In your app root
90	<Toaster position="bottom-right" />
91
92	// Trigger notifications
93	toast.success('Changes saved successfully');
94	toast.promise(saveData(), {
95	loading: 'Saving...',
96	success: 'Saved!',
97	error: 'Failed to save'
98	});
99	```
100
101	For Modals - Use Radix UI:
102	```tsx
103	import * as Dialog from '@radix-ui/react-dialog';
104
105	<Dialog.Root>
106	<Dialog.Trigger>Open</Dialog.Trigger>
107	<Dialog.Portal>
108	<Dialog.Overlay />
109	<Dialog.Content>
110	<Dialog.Title>Confirm Action</Dialog.Title>
111	<Dialog.Description>Are you sure?</Dialog.Description>
112	<Dialog.Close>Cancel</Dialog.Close>
113	</Dialog.Content>
114	</Dialog.Portal>
115	</Dialog.Root>
116	```
117
118	See `references/library-comparison.md` for alternative libraries and selection criteria.
119
120	### Step 4: Apply Accessibility Patterns
121
122	ARIA Live Regions for Announcements:
123	```html
124	<!-- For non-critical notifications -->
125	<div role="status" aria-live="polite">
126	File uploaded successfully
127	</div>
128
129	<!-- For critical alerts -->
130	<div role="alert" aria-live="assertive">
131	Error: Failed to save
132	</div>
133	```
134
135	Focus Management for Modals:
136	1. Save current focus before opening
137	2. Move focus to first interactive element in modal
138	3. Trap focus within modal (Tab cycles)
139	4. Restore focus to trigger on close
140
141	See `references/accessibility-feedback.md` for complete patterns.
142
143	### Step 5: Integrate Design Tokens
144
145	All feedback components use the design-tokens skill for consistent theming:
146
147	```css
148	/* Example token usage */
149	.toast {
150	background: var(--toast-bg);
151	color: var(--toast-text);
152	padding: var(--toast-padding);
153	border-radius: var(--toast-border-radius);
154	box-shadow: var(--toast-shadow);
155	animation-d

People who liked this also viewed

6 picks

Type