← ClaudeAtlas

driverjs-guidelisted

Complete reference for implementing Driver.js (driver.js) product tours, element highlighting, onboarding flows, and contextual help overlays. Use this skill whenever the user mentions "driver.js", "driverjs", "product tour", "onboarding tour", "guided tour", "element highlighting", "walkthrough", "feature introduction", "spotlight overlay", or asks to build step-by-step user guides, interactive walkthroughs, or highlight-and-explain UI flows in web applications. Also trigger when the user wants to add tooltips that walk users through a page, create async/dynamic tours, or implement "turn off the lights" focus effects. Do NOT use for unrelated tooltip libraries (Tippy.js, Floating UI) or for general CSS overlay questions that don't involve guided tours.
rvanbaalen/skills · ★ 0 · Web & Frontend · score 58
Install: claude install-skill rvanbaalen/skills
# Driver.js Complete Reference Driver.js is a lightweight (~5kb gzipped), dependency-free, vanilla TypeScript library for guiding user focus across a web page. It draws an SVG overlay and cuts out a portion above the highlighted element, avoiding z-index and stacking-context issues entirely. Use cases beyond product tours: contextual form help, feature announcements, focus-shifting overlays, simple modals, and "turn off the lights" effects. Documentation source: https://driverjs.com --- ## Pre-flight: Project Dependency Check Before writing any Driver.js code, check whether the current project already has `driver.js` installed: 1. **Check package.json** — Use Grep to search for `"driver.js"` in `package.json` (both `dependencies` and `devDependencies`). 2. **Check lock file** — If no match in `package.json`, also check `package-lock.json`, `yarn.lock`, or `pnpm-lock.yaml` for `driver.js`. 3. **Check existing imports** — Use Grep to search for `from "driver.js"` or `from 'driver.js'` across the codebase to see if it is already in use. Based on results: - **Already installed and imported:** Note the installed version. Skip installation instructions. Look at existing usage patterns in the project and follow the same conventions (import style, CSS import location, instance management). - **Installed but not yet imported:** Skip installation. Proceed with usage guidance, matching the project's existing import conventions. - **Not installed:** Include the appropriate instal