Skills

Tour

Add or refine a Sunboard product tour inside an existing spec.

/sunboard.tour adds or refines a focused product tour in an existing spec — use it when you want guided UI help for a specific screen, checklist step, hotspot, or product action.

When to use it

  • A step or screen needs a short, guided walkthrough.
  • Analyze shows a tour with low starts or completions.

What happens

  1. Reads the spec and identifies the experience, checklist, existing tours, and hotspots.
  2. Finds the target screen — a real route or {param} route, never an invented regex.
  3. Chooses stable selectors, adding a data-sunboard-id to the smallest stable element when needed.
  4. Adds a keyed tour under tours.<tour-key>, with each step's target, title, and optional body.
  5. Connects it to a checklist item or hotspot via action.type: startTour.
  6. Validates and previews so you can check route changes, slow targets, and hotspot behavior.
action:
  type: startTour
  tour: <tour-key>

Quiet by default

Tours don't auto-start — they launch from checklist items, hotspots, or your own UI. Keep them short (two to five steps), and once started, Sunboard auto-continues through route changes, async rendering, and modals.

Spec

Author the experience the tour lives in.

Implement

Wire the selectors the tour points at.

Analyze

See how users move through the tour.

CLI: preview

Preview the tour locally.

Checklist UI

Build a custom checklist component styled to your app's design system.

Preview

Preview a Sunboard onboarding spec in the local app.

On this page

When to use itWhat happensRelated