Create Next.js product tours with Driver.js and NextStep.js.
npx skills add https://github.com/jorgeochipinti97/dublin-skills --skill product-tour
Please help me install this Agent Skill. Skill: product-tour Source: https://github.com/jorgeochipinti97/dublin-skills/tree/main/skills/frontend/product-tour Command: npx skills add https://github.com/jorgeochipinti97/dublin-skills --skill product-tour
Guides developers to create interactive product tours and onboarding flows for Next.js apps, reducing user friction and accelerating feature adoption.
Install the skill in your Next.js project and drop a guided tour powered by Driver.js to start onboarding in minutes.
High-intent search queries and answers about installing and using this skill.
Multi-page product tours in a Next.js app use NextStep.js with App Router navigation to guide users across routes. The tour maintains state and progress tracking as users move between pages, ensuring a continuous onboarding experience.
The best way to highlight UI elements during onboarding is using Driver.js to create accessible single-page tours. It overlays popovers on specific features, managing focus and ARIA roles to ensure the interface remains usable.
You need Next.js App Router to build route-aware onboarding flows that navigate between pages. Multi-page tours rely on App Router navigation to sync tour steps with route changes and track progress across different views.
Accessible onboarding tours handle screen readers by implementing ARIA roles, managing focus transitions, and supporting reduced motion preferences. These patterns ensure popovers and guided flows remain navigable for users relying on assistive technologies.
Use Driver.js for single-page UI highlighting tours, and NextStep.js for multi-page route-aware tours. NextStep.js integrates with Next.js App Router navigation, whereas Driver.js focuses on overlaying accessible popovers within a single view.
You can track onboarding progress and reuse step definitions across routes by implementing state management hooks. This allows tours to maintain consistent step configurations and resume correctly when users navigate between different pages.
PouriaRouzrokhIntegrates a visual feedback toolbar into Next.js projects for development-time UI inspection.
ricardocidaleGuide new users through an application interface with step-by-step interactive tours.
launchapp-devModel UI components as finite state machines with states, events, and transitions.
CodenburgOptimize React 19 components using the React Compiler without manual memoization.
