skills.rest
prowler-cloud
prowler-cloudOFFICIAL
Explore all skills by this author →
Website𝕏@ProwlerCloudGitHub

prowler-tour

Detects drift between product tour definitions and the UI components they describe.

14.7k|2.4k|Updated Aug 24, 2016
Search Tags:#drift detection#Driver.js#prowler#ui alignment#product tours#Code review#data-tour-id
One-click install
npx skills add https://github.com/prowler-cloud/prowler --skill prowler-tour
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prowler-tour
Source: https://github.com/prowler-cloud/prowler/tree/main/skills/prowler-tour
Command: npx skills add https://github.com/prowler-cloud/prowler --skill prowler-tour

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

Product tours silently decay as the UI evolves: renamed data-tour-id attributes, removed panels, and outdated popover copy break guided walkthroughs without anyone noticing. This Skill inspects UI changes and reports misalignment between tour definitions (*.tour.ts) and the components they cover.

Core Features & Use Cases

  • Drift Detection: Checks six drift categories including orphan selectors, renamed data-tour-id attributes, outdated copy, obsolete steps, missing steps, and reordered flows.
  • Early-Exit Filtering: Matches changed files against each tour's coversFiles globs and skips the check entirely when no tour is affected.
  • Version-Bump Guidance: Applies a decision tree to recommend whether a tour's version should be bumped based on whether the user-visible flow materially changed.
  • Use Case: After renaming a data-tour-id attribute on a scans page, run this Skill to get a structured Tour Alignment Report listing the broken step target and the recommended fix, without it editing any files.

Quick Start

Check whether my current UI changes affect any product tours and report any drift between the tour definitions and the components they cover.

Frequently Asked Questions about prowler-tour

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check if UI changes break product tours?▼

Run the drift check after editing UI files: it matches changed files against each tour's coversFiles globs, then verifies every step target resolves to a real data-tour-id attribute. It reports orphan selectors, outdated copy, and missing steps without modifying any files.

What is a data-tour-id attribute used for in product tours?▼

A data-tour-id attribute anchors a tour step to a DOM element, composed as data-tour-id="<tour-id>-<step.target>". The tour hook builds the CSS selector at runtime, so class-based or structural selectors are forbidden to keep tours decoupled from styling.

When should a product tour version be bumped?▼

Bump the version when the user-visible flow changes materially, such as adding or removing steps, reordering them, or retargeting an anchor to a different panel. Cosmetic edits like typo fixes or selector renames that keep the same step do not require a bump.

Can this skill edit tour definition files automatically?▼

No. The skill is strictly report-only: it never edits *.tour.ts files, never adds or renames data-tour-id attributes in UI code, and never authors new tours. It only inspects changes and recommends actions for the developer to apply.

Why does the tour alignment check skip my change?▼

The early-exit rule skips the check when no tour's coversFiles glob matches any file in the current change. Most UI edits are not tour-related, so the skill responds that no tour is affected and exits without running the drift checklist.

Related Skills

Explore More Software Engineering Skills→
ROYCE-8425ROYCE-8425
1

code-tour

Create persona-specific codebase tours with file and line anchors in JSON.

Community
Advanced
dshearerdshearer
2

misatay-review

Plan and execute narrated code review tours with file-level highlights.

Community
Advanced
ilamanovilamanov

brief

Generate a one-pager summary of pull request changes with code tour.

Community
Intermediate
naviktnavikt
1

onboard

Design onboarding experiences with empty states, guided tours, and progressive disclosure.

Official
Advanced