Spotlight Tour
Use for a short, skippable sequence that points to a few product targets.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Rest
Active
Spotlight Tour · one controlled state
Purpose
Use for a short, skippable sequence that points to a few product targets.
Use when
A new workflow needs context that cannot be explained beside the target.
Avoid
Long forced tours, cursor-dependent behavior, or blocking the whole product indefinitely.
Accessibility
Manage dialog focus, provide Back/Next/Skip, support Escape, and scroll targets into view.
Keyboard and touch
All tour controls are buttons; the target need not be hovered or clicked.
Reduced motion and performance
Use a static spotlight and avoid per-frame position tracking.
Composition and anti-patterns
Use Coach Mark for one contextual hint and Progressive Disclosure for optional detail.
Source: packages/skills/onboarding/spotlight-tour.md