Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →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 activation features. Provides timing strategies, accessibility patterns (keyboard, screen readers, reduced motion), and metrics for measuring onboarding success.
.claude/skills/ancoleman-guiding-users/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-05 | ✗→✓ | ▲ Improved | 184% | 0% |
| case-07 | ✗→✓ | ▲ Improved | 156% | 0% |
| case-13 | ✗→✓ | ▲ Improved | 187% | 0% |
| case-01 | ✓→✓ | ＝ Same ✓ | 213% | 0% |
| case-02 | ✓→✓ | ＝ Same ✓ | 254% | 0% |
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.
Activate this skill when:
Select the appropriate guidance mechanism based on user state and content type:
First-time user → Product Tour (step-by-step)
New feature launch → Feature Spotlight (tooltip + animation)
Complex workflow → Interactive Tutorial (guided tasks)
Account setup → Checklist (progress tracking)
Contextual help needed → Tooltip/Hint system
Ongoing support → Help Panel (sidebar/searchable)
Feature unlock → Progressive DisclosureReference references/selection-framework.md for detailed selection criteria.
Step-by-step walkthroughs that guide users through key features:
Implementation:
bashnpm install react-joyride
See examples/first-time-tour.tsx for complete implementation. Reference references/product-tours.md for patterns and best practices.
Announce new features to existing users:
See examples/feature-spotlight.tsx for implementation. Reference references/tooltips-hints.md for patterns.
Guided task completion with validation:
See examples/guided-tutorial.tsx for implementation. Reference references/interactive-tutorials.md for patterns.
Track multi-step onboarding progress:
See examples/setup-checklist.tsx for implementation. Reference references/checklists.md for patterns.
Just-in-time help when users need it:
See examples/contextual-help.tsx for implementation. Reference references/tooltips-hints.md for complete patterns.
Comprehensive help systems:
See examples/help-panel.tsx for implementation. Reference references/help-systems.md for patterns.
Appropriate triggers:
Avoid showing when:
Auto-dismiss timing:
Reference references/timing-strategies.md for detailed guidelines.
Show only what's needed, when it's needed:
Techniques:
Reference references/progressive-disclosure.md for implementation patterns.
Essential keyboard support:
ARIA patterns for announcements:
Respect prefers-reduced-motion:
To validate accessibility:
bashnode scripts/validate_accessibility.js
Reference references/accessibility-patterns.md for complete implementation.
Library: /gilbarbara/react-joyride Trust Score: 9.6/10 Code Snippets: 29+
Best for comprehensive product tours:
bashnpm install react-joyride
See examples/joyride-tour.tsx for complete setup.
Best for minimal bundle size:
bashnpm install driver.js
Best for traditional tours:
bashnpm install intro.js
Reference references/library-comparison.md for detailed analysis and selection criteria.
All onboarding components use the design-tokens skill for consistent theming:
Token categories used:
Supports light, dark, high-contrast, and custom brand themes. Reference the design-tokens skill for complete theming documentation.
Track these indicators:
Iterate based on data:
To analyze onboarding metrics:
bashpython scripts/analyze_onboarding_metrics.py
Reference references/measuring-success.md for complete analytics implementation.
Common mistakes that harm user experience:
❌ Forced Tours: Requiring tour completion before product use ❌ Too Long: Tours exceeding 7 steps lose user attention ❌ Every Session: Showing same tour repeatedly ❌ No Skip Option: Preventing users from exploring independently ❌ Wall of Text: Using lengthy explanations instead of visuals ❌ Blocking Everything: Preventing interaction during tours ❌ Premature Guidance: Showing help before users explore ❌ Poor Timing: Interrupting focused work ❌ No Context: Generic tips without specific relevance
Identify key moments:
Match mechanisms to moments:
Build incrementally:
Verify compliance:
Run validation:
bashnode scripts/validate_accessibility.js
Track and improve:
Start with the example matching the use case:
first-time-tour.tsx # Product walkthrough with react-joyride
feature-spotlight.tsx # New feature announcement
guided-tutorial.tsx # Interactive task completion
setup-checklist.tsx # Multi-step onboarding progress
contextual-help.tsx # Tooltips and progressive hints
help-panel.tsx # Sidebar help with search
celebration-animation.tsx # Completion feedbackscripts/generate_tour_config.js - Generate tour configurations from user flowsscripts/analyze_onboarding_metrics.py - Analyze completion and drop-off ratesscripts/validate_accessibility.js - Test keyboard and screen reader supportreferences/product-tours.md - Tour patterns, step design, navigationreferences/interactive-tutorials.md - Guided tasks and sandbox modesreferences/tooltips-hints.md - Contextual help and progressive hintsreferences/checklists.md - Progress tracking and gamificationreferences/help-systems.md - Help panels, videos, and documentationreferences/progressive-disclosure.md - Advanced patterns and feature unlockingreferences/timing-strategies.md - When and how to trigger guidancereferences/accessibility-patterns.md - WCAG compliance and ARIA patternsreferences/measuring-success.md - Analytics and optimizationreferences/library-comparison.md - Detailed library evaluationreferences/selection-framework.md - Decision trees for choosing mechanismsassets/celebration-animations/ - Success animations and confettiassets/tour-templates.json - Reusable tour configurationsassets/message-templates.json - Tooltip and hint copy templatesassets/timing-config.json - Recommended timing valuesThis skill works with other component skills:
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | pass→pass | 8,681 | 6,606 | -24% | 1 | 1 | 0% | 1,316 | 4,125 | +213% | 0 | 0 | — |
case-02 | pass→pass | 7,117 | 5,355 | -25% | 1 | 1 | 0% | 1,112 | 3,933 | +254% | 0 | 0 | — |
case-03 | pass→pass | 11,548 | 13,497 | +17% | 1 | 1 | 0% | 1,751 | 5,404 | +209% | 0 | 0 | — |
case-04 | pass→pass | 10,408 | 8,488 | -18% | 1 | 1 | 0% | 1,538 | 4,475 | +191% | 0 | 0 | — |
case-05 | fail→pass | 9,140 | 5,461 | -40% | 1 | 1 | 0% | 1,321 | 3,752 | +184% | 0 | 0 | — |
case-06 | pass→pass | 9,900 | 3,634 | -63% | 1 | 1 | 0% | 1,612 | 3,460 | +115% | 0 | 0 | — |
case-07 | fail→pass | 13,223 | 14,350 | +9% | 1 | 1 | 0% | 2,041 | 5,220 | +156% | 0 | 0 | — |
case-08 | pass→pass | 12,940 | 16,541 | +28% | 1 | 1 | 0% | 2,046 | 5,789 | +183% | 0 | 0 | — |
case-09 | pass→pass | 10,732 | 6,812 | -37% | 1 | 1 | 0% | 1,681 | 3,978 | +137% | 0 | 0 | — |
case-10 | pass→pass | 11,015 | 16,460 | +49% | 1 | 1 | 0% | 1,617 | 6,289 | +289% | 0 | 0 | — |
case-11 | pass→pass | 5,803 | 4,024 | -31% | 1 | 1 | 0% | 871 | 3,561 | +309% | 0 | 0 | — |
case-12 | pass→pass | 9,926 | 8,898 | -10% | 1 | 1 | 0% | 1,473 | 4,390 | +198% | 0 | 0 | — |
case-13 | fail→pass | 7,508 | 2,237 | -70% | 1 | 1 | 0% | 1,147 | 3,297 | +187% | 0 | 0 | — |
case-14 | pass→pass | 14,188 | 11,418 | -20% | 1 | 1 | 0% | 2,328 | 4,953 | +113% | 0 | 0 | — |
case-15 | pass→pass | 9,727 | 8,350 | -14% | 1 | 1 | 0% | 1,386 | 4,219 | +204% | 0 | 0 | — |
case-16 | pass→pass | 4,358 | 8,787 | +102% | 1 | 1 | 0% | 599 | 4,391 | +633% | 0 | 0 | — |
case-17 | pass→pass | 11,077 | 10,370 | -6% | 1 | 1 | 0% | 1,535 | 4,563 | +197% | 0 | 0 | — |
case-18 | pass→pass | 5,976 | 5,221 | -13% | 1 | 1 | 0% | 904 | 3,803 | +321% | 0 | 0 | — |
case-19 | pass→pass | 4,758 | 4,741 | -0% | 1 | 1 | 0% | 747 | 3,699 | +395% | 0 | 0 | — |
case-20 | pass→pass | 13,639 | 9,655 | -29% | 1 | 1 | 0% | 1,952 | 4,230 | +117% | 0 | 0 | — |
case-21 | fail→fail | 16,008 | 12,001 | -25% | 1 | 1 | 0% | 2,333 | 4,848 | +108% | 0 | 0 | — |
case-22 | pass→pass | 12,338 | 14,210 | +15% | 1 | 1 | 0% | 2,006 | 5,488 | +174% | 0 | 0 | — |
case-23 | pass→pass | 8,385 | 8,086 | -4% | 1 | 1 | 0% | 1,425 | 4,363 | +206% | 0 | 0 | — |
case-24 | pass→pass | 13,293 | 13,099 | -1% | 1 | 1 | 0% | 2,201 | 5,321 | +142% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 24 cases were attempted. The headline lift of +13 percentage points is the difference between those two pass rates over the 24 comparable cases.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.