appintoss-coachmark-tutorial

To build an onboarding tour, define a set of steps and render a SpotlightOverlay with a CoachmarkTooltip, then invoke the tour starter on app load. This architecture uses reusable hooks and data-driven steps for scalable in-context guidance.

Use carousel onboarding for first-time orientation and feature introductions using fullscreen slides. Use spotlight step tours to guide users contextually by highlighting real UI elements during their actual workflow.

A coachmark is an in-context guidance element that helps users adopt features and reduce confusion during onboarding. It accelerates time-to-value by providing reusable, data-driven tooltips that highlight specific UI components.

Yes, you can create accessible and keyboard-friendly onboarding flows. The architecture includes safe defaults for accessibility, storage-persistent flows with skip options, and state management to ensure usable in-context guidance.

You manage onboarding state using storage-persistent flows built into the architecture. This includes safe defaults for storage and state management, allowing users to skip options and resume spotlight tours or carousel progress across sessions.

Data-driven steps for mobile and web onboarding require a valid skill unit with a SKILL.md frontmatter and optional references. While highly scalable, you must ensure the reusable hooks and components align correctly with your specific UI elements.