nextstep-tours
Installation
SKILL.md
NextStep Tours Skill
Build product tours, onboarding flows, and — most importantly — interactive tutorials with NextStep v2 (nextstepjs) in Next.js. This skill makes the action-gated lesson pattern the default rather than generic welcome popups.
Quick Reference
| Task | Approach | Reference |
|---|---|---|
| Install & wire provider | 3-step Quick Start | this file |
| Define a tour | Tour / Step schema |
this file |
| Multi-page tour | nextRoute / prevRoute |
references/multi-page-tours.md |
| Scrollable container | NextStepViewport |
references/multi-page-tours.md |
| Custom card UI | cardComponent prop |
references/custom-card.md |
| Gate progress on user action | Custom card + validation registry | references/tutorial-authoring.md |
| Full props & types | NextStep / Step / CardComponentProps |
references/api-reference.md |
| Element not found, SSR, z-index | Troubleshooting table | references/troubleshooting.md |
Core principle: A tour that just shows tooltips teaches nothing. A tutorial that requires the user to perform each action before advancing teaches. Reach for the validation-gated pattern whenever the word "tutorial" or "lesson" appears.