skills.rest
masermediagroup-stack
masermediagroup-stackCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

guiding-users

Implements product tours, tooltips, checklists, and help panels for user onboarding.

1|Updated Feb 24, 2026
Search Tags:#onboarding#accessibility#tooltips#feature discovery#user activation#product tour#react-joyride
One-click install
npx skills add https://github.com/masermediagroup-stack/maser-media --skill guiding-users-masermediagroup-stack
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: guiding-users
Source: https://github.com/masermediagroup-stack/maser-media/tree/main/.cursor/skills/community/ai-design-components/skills/guiding-users
Command: npx skills add https://github.com/masermediagroup-stack/maser-media --skill guiding-users-masermediagroup-stack

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react-joyride, driver.js, intro.js, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Users abandon products when they cannot discover features or understand workflows on their own. This Skill provides structured patterns for building onboarding experiences—product tours, feature spotlights, interactive tutorials, setup checklists, contextual tooltips, and help panels—so users reach their first value moment faster. ## Core Features & Use Cases - Product Tours & Feature Spotlights: Step-by-step walkthroughs with react-joyride, driver.js, or intro.js, including skip controls, progress indicators, and localStorage-based completion tracking. - Interactive Tutorials & Checklists: Guided task completion with validation, sandbox modes, progress tracking, and celebration animations for setup flows. - Contextual Help & Accessibility: Tooltips, progressive hints, searchable help panels, plus full keyboard navigation, screen reader ARIA patterns, and reduced-motion support. - Use Case: A SaaS team needs to onboard new users to a dashboard. Use this Skill to generate a 5-step react-joyride tour with design-token theming, analytics tracking for drop-off points, and a setup checklist that persists progress in localStorage. ## Quick Start Ask the AI to build a first-time product tour for your React dashboard using react-joyride with skip support, completion tracking, and accessible keyboard navigation.

Frequently Asked Questions about guiding-users

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a product tour in React?▼

Install react-joyride and define an array of Step objects with target selectors and content. Render the Joyride component with continuous, showProgress, and showSkipButton props, then persist completion state in localStorage so the tour does not repeat every session.

react-joyride vs driver.js vs intro.js for onboarding tours?▼

react-joyride offers the strongest accessibility with WAI-ARIA compliance and full keyboard navigation at about 15KB. driver.js is framework-agnostic and only about 5KB for minimal bundles. intro.js is a proven classic with JSON-based configuration and wide browser support.

How many steps should a product tour have?▼

Keep tours between 3 and 5 steps for optimal completion, with 7 steps as the absolute maximum before user fatigue sets in. Each step should take 5-15 seconds to read, keeping the total tour under 3 minutes.

How do I make onboarding tours accessible for screen readers?▼

Use role="dialog" with aria-labelledby and aria-describedby on tour modals, announce step numbers and totals, and trap focus within the tour. Support Tab, Enter, Escape, and arrow keys, and respect prefers-reduced-motion by disabling pulsing animations.

When should I not show a product tour to users?▼

Avoid showing tours when users are mid-task, in every session after completion, before allowing free exploration, or when the tour exceeds 7 steps. Always provide a skip option and remember dismissal state so returning users are not interrupted.

How do I measure onboarding tour completion rates?▼

Track events for tour started, per-step completion, tour finished, and skips, then calculate completion rate with a target above 60 percent. Analyze drop-off points per step to identify confusing content and run A/B tests on tour length and messaging.

Related Skills

Explore More Software Engineering Skills→
Hans3010Hans3010

onboarding-cro

Analyze user drop-off points and implement progress-based onboarding mechanics.

Community
Advanced
lofty-thoughtslofty-thoughts

signup-flow-cro

Audit signup flows to reduce drop-off and improve registration completion.

Official
Intermediate
ancolemanancoleman
503

theming-components

Manage design tokens and switch themes with CSS custom properties.

Community
Advanced
Tea-4-LifeTea-4-Life

onboard

Design onboarding flows with empty states, tooltips, and guided tours.

Official
Advanced