# Guiding Users

Implements onboarding and help systems including product tours, interactive tutorials...

- Repository: https://github.com/ancoleman/ai-design-components (526 stars)
- Category: Design
- License: MIT
- Last updated: 2025-12-11
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add ancoleman/ai-design-components --skill guiding-users -g -a claude-code -y`
Codex: `npx skills add ancoleman/ai-design-components --skill guiding-users -g -a codex -y`
Cursor: `npx skills add ancoleman/ai-design-components --skill guiding-users -g -a cursor -y`
Gemini CLI: `npx skills add ancoleman/ai-design-components --skill guiding-users -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add ancoleman/ai-design-components`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Guiding Users Through Onboarding and Help Systems

## Purpose

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.

## When to Use

Activate this skill when:
- Building first-time user experiences or product tours
- Implementing feature discovery and announcements
- Creating interactive tutorials or guided tasks
- Adding tooltips, hints, or contextual help
- Designing setup flows or completion checklists
- Building help panels or documentation systems
- Implementing progressive disclosure patterns
- Measuring onboarding effectiveness and user activation
- Ensuring onboarding accessibility

## Quick Decision Framework

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 Disclosure
```

Reference `references/selection-framework.md` for detailed selection criteria.

## Core Guidance Mechanisms

### Product Tours

Step-by-step walkthroughs that guide users through key features:
- Sequential spotlights with modal overlays
- Progress indicators (Step 2 of 5)
- Skip, Previous, and Next controls
- Dismiss and resume capability
- Context-sensitive activation

**Implementation:**
```bash
npm install react-joyride
```

See `examples/first-time-tour.tsx` for complete implementation.
Reference `references/product-tours.md` for patterns and best practices.

### Feature Spotlights

The rest: https://github.com/ancoleman/ai-design-components/blob/HEAD/skills/guiding-users/SKILL.md