AddThisFeature

Guided Product Tour

Walk new users through the interface without a video.

moderate Onboarding

What it adds

A short, skippable tour that highlights the parts of the UI that matter.

What your agent is told to do

4
  1. 1

    Keep it to 3–5 stops. A long tour gets skipped, and a skipped tour teaches nothing.

  2. 2

    Anchor each stop to a real element, and highlight it by dimming everything else.

  3. 3

    Let the user leave at any point, and remember that they did.

  4. 4

    Make it restartable from settings or a help menu.

Edge cases it handles

4
  • An anchor element that doesn't exist on the current page or plan must be skipped, not crash the tour.
  • The highlight must reposition on scroll and resize.
  • The tour must not fire on top of a modal or a loading screen.
  • On mobile, anchored popovers often don't fit — adapt or skip those stops.

Definition of done

7
  • The tour is 3–5 stops and fully skippable.
  • Missing anchors are skipped gracefully.
  • Highlights track their element on scroll and resize.
  • It runs once, and is restartable on demand.
  • It's keyboard navigable and screen-reader friendly.
  • The feature matches the existing design system.
  • No existing functionality is broken.

Related features

How it works

  1. 1

    Copy the link

    Grab the Markdown instruction URL for this feature.

  2. 2

    Give it to your AI

    Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.

  3. 3

    It inspects, then implements

    Your agent reads your existing app first, then adds the feature to fit it.

Works with your stack

These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.

Need it tighter than that? Customize the feature and tell it exactly what you're running.