guiding-users

Name: guiding-users
Author: ancoleman

66installs59forks

How to install guiding-users?

ancoleman/ai-design-components/guiding-users

$npx -y skills add ancoleman/ai-design-components --skill guiding-users

Installs into the current project.

Summary

Implements onboarding and help systems including product tours, interactive tutorials, tooltips, checklists, help panels, and progressive disclosure patterns. Use when building first-time experiences, feature discovery, guided walkthroughs, contextual help, setup flows, or user a

Files · 1

View on GitHub

SKILL.md

1	# Guiding Users Through Onboarding and Help Systems
2
3	## Purpose
4
5	This skill provides systematic patterns for onboarding users and delivering contextual help, from first-time product tours to ongoing feature discovery. It covers the complete spectrum of user guidance mechanisms, ensuring optimal user activation, feature adoption, and self-service support.
6
7	## When to Use
8
9	Activate this skill when:
10	- Building first-time user experiences or product tours
11	- Implementing feature discovery and announcements
12	- Creating interactive tutorials or guided tasks
13	- Adding tooltips, hints, or contextual help
14	- Designing setup flows or completion checklists
15	- Building help panels or documentation systems
16	- Implementing progressive disclosure patterns
17	- Measuring onboarding effectiveness and user activation
18	- Ensuring onboarding accessibility
19
20	## Quick Decision Framework
21
22	Select the appropriate guidance mechanism based on user state and content type:
23
24	```
25	First-time user → Product Tour (step-by-step)
26	New feature launch → Feature Spotlight (tooltip + animation)
27	Complex workflow → Interactive Tutorial (guided tasks)
28	Account setup → Checklist (progress tracking)
29	Contextual help needed → Tooltip/Hint system
30	Ongoing support → Help Panel (sidebar/searchable)
31	Feature unlock → Progressive Disclosure
32	```
33
34	Reference `references/selection-framework.md` for detailed selection criteria.
35
36	## Core Guidance Mechanisms
37
38	### Product Tours
39
40	Step-by-step walkthroughs that guide users through key features:
41	- Sequential spotlights with modal overlays
42	- Progress indicators (Step 2 of 5)
43	- Skip, Previous, and Next controls
44	- Dismiss and resume capability
45	- Context-sensitive activation
46
47	Implementation:
48	```bash
49	npm install react-joyride
50	```
51
52	See `examples/first-time-tour.tsx` for complete implementation.
53	Reference `references/product-tours.md` for patterns and best practices.
54
55	### Feature Spotlights
56
57	Announce new features to existing users:
58	- Pulsing hotspot animations
59	- Contextual tooltip with arrow
60	- "Got it" acknowledgment
61	- Auto-dismiss after first view
62	- Non-blocking overlay
63
64	See `examples/feature-spotlight.tsx` for implementation.
65	Reference `references/tooltips-hints.md` for patterns.
66
67	### Interactive Tutorials
68
69	Guided task completion with validation:
70	- "Complete these tasks to get started"
71	- Checkbox completion tracking
72	- Celebration animations on completion
73	- Sandbox mode with sample data
74	- Undo and reset capabilities
75
76	See `examples/guided-tutorial.tsx` for implementation.
77	Reference `references/interactive-tutorials.md` for patterns.
78
79	### Setup Checklists
80
81	Track multi-step onboarding progress:
82	- Visual progress indicators (3/4 complete)
83	- Direct links to each task
84	- Profile completion percentages
85	- Achievement badges and gamification
86	- Persistent until completed
87
88	See `examples/setup-checklist.tsx` for implementation.
89	Reference `references/checklists.md` for patterns.
90
91	### Contextual Tooltips and Hints
92
93	Just-in-time help when users need it:
94	- Hover or click-triggered tooltips
95	- Progressive hint levels (1, 2, 3)
96	- "Need help?" assistance triggers
97	- Context-aware suggestions
98	- Keyboard-accessible
99
100	See `examples/contextual-help.tsx` for implementation.
101	Reference `references/tooltips-hints.md` for complete patterns.
102
103	### Help Panels
104
105	Comprehensive help systems:
106	- Sidebar or drawer interface
107	- Contextual help based on current page
108	- Search help articles and docs
109	- Video tutorials and demos
110	- Contact support integration
111	- Collapsible and resizable
112
113	See `examples/help-panel.tsx` for implementation.
114	Reference `references/help-systems.md` for patterns.
115
116	## Timing and Triggering Strategies
117
118	### When to Show Onboarding
119
120	Appropriate triggers:
121	- First login (always)
122	- Immediately after signup
123	- New feature launch (to existing users)
124	- User appears stuck (smart triggering based on inactivity)
125	- User explicitly requests help
126
127	### When NOT to Show Onboarding
128
129	Avoid showing when:
130	- User is mid-task or focused
131	- Shown in every session (becomes annoying)
132	- Before allowing free exploration
133	- Tour exceeds 7 steps (too long)
134	- User already dismissed or completed
135
136	Auto-dismiss timing:
137	- Simple tooltips: 5-7 seconds
138	- Feature announcements: 10-15 seconds or manual dismiss
139	- Tours: User-controlled, no auto-dismiss
140	- Persistent hints: Until user acknowledges
141
142	Reference `references/timing-strategies.md` for detailed guidelines.
143
144	## Progressive Disclosure Patterns
145
146	Show only what's needed, when it's needed:
147
148	Techniques:
149	1. **Accor

People who liked this also viewed

6 picks

Type

guiding-users

66installs59forks

View on GitHub

How to install guiding-users?

ancoleman/ai-design-components/guiding-users

$npx -y skills add ancoleman/ai-design-components --skill guiding-users

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Guiding Users Through Onboarding and Help Systems
2
3	## Purpose
4
5	This skill provides systematic patterns for onboarding users and delivering contextual help, from first-time product tours to ongoing feature discovery. It covers the complete spectrum of user guidance mechanisms, ensuring optimal user activation, feature adoption, and self-service support.
6
7	## When to Use
8
9	Activate this skill when:
10	- Building first-time user experiences or product tours
11	- Implementing feature discovery and announcements
12	- Creating interactive tutorials or guided tasks
13	- Adding tooltips, hints, or contextual help
14	- Designing setup flows or completion checklists
15	- Building help panels or documentation systems
16	- Implementing progressive disclosure patterns
17	- Measuring onboarding effectiveness and user activation
18	- Ensuring onboarding accessibility
19
20	## Quick Decision Framework
21
22	Select the appropriate guidance mechanism based on user state and content type:
23
24	```
25	First-time user → Product Tour (step-by-step)
26	New feature launch → Feature Spotlight (tooltip + animation)
27	Complex workflow → Interactive Tutorial (guided tasks)
28	Account setup → Checklist (progress tracking)
29	Contextual help needed → Tooltip/Hint system
30	Ongoing support → Help Panel (sidebar/searchable)
31	Feature unlock → Progressive Disclosure
32	```
33
34	Reference `references/selection-framework.md` for detailed selection criteria.
35
36	## Core Guidance Mechanisms
37
38	### Product Tours
39
40	Step-by-step walkthroughs that guide users through key features:
41	- Sequential spotlights with modal overlays
42	- Progress indicators (Step 2 of 5)
43	- Skip, Previous, and Next controls
44	- Dismiss and resume capability
45	- Context-sensitive activation
46
47	Implementation:
48	```bash
49	npm install react-joyride
50	```
51
52	See `examples/first-time-tour.tsx` for complete implementation.
53	Reference `references/product-tours.md` for patterns and best practices.
54
55	### Feature Spotlights
56
57	Announce new features to existing users:
58	- Pulsing hotspot animations
59	- Contextual tooltip with arrow
60	- "Got it" acknowledgment
61	- Auto-dismiss after first view
62	- Non-blocking overlay
63
64	See `examples/feature-spotlight.tsx` for implementation.
65	Reference `references/tooltips-hints.md` for patterns.
66
67	### Interactive Tutorials
68
69	Guided task completion with validation:
70	- "Complete these tasks to get started"
71	- Checkbox completion tracking
72	- Celebration animations on completion
73	- Sandbox mode with sample data
74	- Undo and reset capabilities
75
76	See `examples/guided-tutorial.tsx` for implementation.
77	Reference `references/interactive-tutorials.md` for patterns.
78
79	### Setup Checklists
80
81	Track multi-step onboarding progress:
82	- Visual progress indicators (3/4 complete)
83	- Direct links to each task
84	- Profile completion percentages
85	- Achievement badges and gamification
86	- Persistent until completed
87
88	See `examples/setup-checklist.tsx` for implementation.
89	Reference `references/checklists.md` for patterns.
90
91	### Contextual Tooltips and Hints
92
93	Just-in-time help when users need it:
94	- Hover or click-triggered tooltips
95	- Progressive hint levels (1, 2, 3)
96	- "Need help?" assistance triggers
97	- Context-aware suggestions
98	- Keyboard-accessible
99
100	See `examples/contextual-help.tsx` for implementation.
101	Reference `references/tooltips-hints.md` for complete patterns.
102
103	### Help Panels
104
105	Comprehensive help systems:
106	- Sidebar or drawer interface
107	- Contextual help based on current page
108	- Search help articles and docs
109	- Video tutorials and demos
110	- Contact support integration
111	- Collapsible and resizable
112
113	See `examples/help-panel.tsx` for implementation.
114	Reference `references/help-systems.md` for patterns.
115
116	## Timing and Triggering Strategies
117
118	### When to Show Onboarding
119
120	Appropriate triggers:
121	- First login (always)
122	- Immediately after signup
123	- New feature launch (to existing users)
124	- User appears stuck (smart triggering based on inactivity)
125	- User explicitly requests help
126
127	### When NOT to Show Onboarding
128
129	Avoid showing when:
130	- User is mid-task or focused
131	- Shown in every session (becomes annoying)
132	- Before allowing free exploration
133	- Tour exceeds 7 steps (too long)
134	- User already dismissed or completed
135
136	Auto-dismiss timing:
137	- Simple tooltips: 5-7 seconds
138	- Feature announcements: 10-15 seconds or manual dismiss
139	- Tours: User-controlled, no auto-dismiss
140	- Persistent hints: Until user acknowledges
141
142	Reference `references/timing-strategies.md` for detailed guidelines.
143
144	## Progressive Disclosure Patterns
145
146	Show only what's needed, when it's needed:
147
148	Techniques:
149	1. **Accor

People who liked this also viewed

6 picks

Type