What problem does it solve?
New users landing on an unfamiliar Lightdash page often lack guidance on what the feature does or how to use it, and empty pages give them nothing to explore. This Skill provides a repeatable recipe for adding first-run guided tours, spotlight coachmarks, and deterministic example data to any frontend feature without pulling in third-party tour libraries.
Core Features & Use Cases
- Guided tour wiring: Uses the shared
useGuidedTour hook and GuidedTour spotlight component to auto-open a step-by-step walkthrough on first visit, with localStorage seen-flags and a replay button.
- Co-located onboarding content: Enforces a fixed
onboarding/ folder layout per feature (steps, example data, visuals) so tour copy and mock rows stay out of page components.
- Deterministic example data: Injects clearly-labelled mock rows via a react-query
select while the tour runs, so empty pages always highlight the same content.
- Use Case: When shipping a new admin settings page, use this Skill to add a "Take the tour" flow that spotlights key UI elements and shows sample rows, so first-time users understand the page immediately.
Quick Start
Add a first-run guided tour with example data to my new Lightdash frontend feature page following the onboarding kit conventions.
