SuperAPI AI Directory
Partner中文AI newsFavorites
Skillstour-guide-supademo

tour-guide-supademo

General & other

View repository

Updated 10-15 22:32

About this skill

tour-guide-supademo — Supademo-style tour

Distilled from the Supademo player (supademo.com, 2026-06). Their docs do not publish exact hex/px — this is the design language turned into a ready-to-use recipe. The base component comes from the skill tour-guide; this skill is the style layer overlaid on top.

Principle: brand color is a single token (--tour-brand), everything follows from it.

WHAT

Purpose and context

  • Purpose: layer Supademo-style styling (blinker hotspot, tooltip card, control bar, progress/timer bar, transition, theme tokens) onto the tour component of the skill tour-guide, as a ready-to-copy Tailwind/CSS recipe, following a single brand token.
  • Trigger (when to use): "/tour-guide-supademo", "Supademo-style tour", "supademo style", "blinker hotspot"; when already using or about to use the component tour-guide and want a Supademo-style interface.
  • Non-goals: does not contain UX mechanics (measure/scroll/step, branching, timer mechanism — those belong to the skill tour-guide); does not hardcode Supademo's original brand hex; styling for other products is a separate skill tour-guide-<tên>.

Mental model

--tour-brand (1 token) → blinker · tooltip card · control bar · progress bar · autoplay timer bar · transition · backdrop per-spot → map sang TOUR_THEME của tour-guide. This skill = style layer; tour-guide = base component + mechanics.

Input and output contract

Field Required? Meaning
In tour component from the skill tour-guide yes base to overlay style on
In brand color yes assign to --tour-brand
In theme light/dark, showProgress, showNav, showStepCount no theme tokens, map to TOUR_THEME
Out CSS/Tailwind for the tour per the recipe yes blinker + card + control bar + bars + transition
Out behavior of the "Skip menu section" checkbox + auto-open OFF yes per battle-tested lesson

Rules and capabilities

  • RULE-01 (MUST): Principle: brand color is a single token (--tour-brand), everything follows from it.
  • RULE-02 (MUST): Tooltip font fixed 1rem — don't make tooltip text as small as a hint; 3 width sizes S/M/L, don't auto-width to the text when the label is long.
  • RULE-03 (MUST): Don't auto-open the tour on load unless explicitly requested (Auto-open: OFF by default).
  • RULE-04 (MUST): The checkbox means "skip the frame step" — NOT "don't show the tour again"; persist 2 layers localStorage + window.name, wrap in try/catch.
  • RULE-05 (MUST): Extension convention — styles for other products are distilled into a separate skill tour-guide-<tên> according to this file format; UX mechanic send to skill tour-guide.
  • Capabilities: write CSS/Tailwind/TSX into the target project; read the tour-guide component. No network.

Failure boundaries

  • No tour-guide component in the project yet → blocked: build the foundation with skill tour-guide first.
  • The request is a UX mechanic (step mode, branching, timer) → out of scope, hand off to tour-guide.
  • Request for the style of another product (Intercom, Driver.js…) → don't stuff it in here; create tour-guide-<tên>.
  • Exact Hex/px of Supademo → not available (they don't publish docs); use the conversion recipe, state clearly that it's an estimate.

HOW

Main workflow

Step Type Inputs Action Outputs/exit Failure/next
W01 judgment request Confirm there is a tour-guide component + this is a styling task continue missing foundation → tour-guide first
W02 effect brand colors Set --tour-brand, theme tokens map to TOUR_THEME token —
W03 effect recipe Apply blinker, tooltip card, control bar (+ tickbox), progress + autoplay timer bar, transition, backdrop per-spot tour with Supademo style overflow control bar → tickbox goes to its own row
W04 judgment tour running Check: auto-open off, tickbox takes effect immediately, Esc closes, font 1rem pass off → fix, repeat W04

Details of each step (source of truth for W01–W04): recipe under the "Reference — Supademo design recipe" section.

Branches

ID Kind Guard Behavior Skip / failure Rejoin
B01 user_optional spot only needs ring + blinker, no dim flag noDim?: boolean on TourSpot default dim W04
B02 user_optional explicitly require auto-open the first time guard !overlay both before and after delay default OFF W04
B03 user_optional long label, demo-style typewriter effect for the label default no W04
B04 conditional_required page has no separate step while the tickbox is checked close tour — end

Validation and stopping

Eyes needed: card 280px does not overflow, font 1rem, blinker exactly at target center. Deterministic check possible: tickbox persists across reload (localStorage/window.name), Esc closes, background click goes to next step. Stop when W04 is met.

Examples

  • Positive: "Supademo-style tour in purple for the dashboard" → --tour-brand = purple, blinker animate-ping at button center, card M ≈ 280px rounded-xl, control bar 4 / 9 + [Back] [Next], progress bar 2–3px at the top edge of the overlay.
  • Boundary/failure: control bar crams tickbox + counter + 2 buttons on one row in a 280px card → overflow; fix by moving tickbox to its own row + white-space:nowrap. User wants an "Intercom-style tour" → do not modify this file, distill skill tour-guide-intercom.

Reference — Supademo design recipe

Blinker hotspot (signature look)

Round dot ~12px in brand color + ripple ring animate-ping spreading out, placed at the center of the element to click. Outer ring transparency ~25–30%.

<span className="absolute flex h-3 w-3" style={{ top: cy, left: cx }}>
  <span className="absolute inline-flex h-full w-full animate-ping rounded-full opacity-30"
    style={{ background: "var(--tour-brand)" }} />
  <span className="relative inline-flex h-3 w-3 rounded-full"
    style={{ background: "var(--tour-brand)" }} />
</span>

Suits step mode: blinker points at the spot to click, tooltip explains beside it.

Tooltip card

  • White background; dark theme: bg-slate-900 text-white.
  • Radius rounded-xl (~12px), soft shadow shadow-[0_4px_16px_rgba(0,0,0,0.12)], padding px-3.5 py-2.5.
  • Font fixed 1rem — Supademo deliberately does not allow size adjustment; do not make tooltip text tiny like a hint.
  • Small arrow pointing at the target.
  • 3 width sizes: S ≈ 200px / M ≈ 280px / L ≈ 360px — do not auto-width by text when the label is long.

Control bar (shared across all steps)

Bottom row of the tooltip card, fixed layout: [lối thoát] · i/n ……… [Quay lại] [Tiếp/Xong]

  • Left: counter 4 / 9 small gray text (text-xs text-slate-400); separate row below: tickbox "Skip the menu part next time" (see section below). Tickbox on its own row + white-space:nowrap — a 280px card cannot fit tickbox + counter + 2 buttons on 1 row (it will overflow).
  • Right: Back (ghost) + Next (brand background, rounded-lg px-3 py-1.5).
  • Button labels can be custom ("Next", "Done") instead of always Next/Previous.
  • Esc always closes; background click = next step (last step = close).

Tickbox "skip duplicate steps" (battle-tested lesson)

A multi-page tour always has 2 kinds of steps: frame (menu/sidebar/header — identical on every page) and page-specific. Users only need to see the frame once — forcing them to see it again every time they open the tour is the #1 source of frustration.

  • Tickbox = [ ] Bỏ qua phần menu (short label — user feedback: don't be wordy "next time…") — NOT "don't show the tour again". Tick → flag persists; measure() filters out the frame spot group, keeping only spots data-tour-* of the active view. The measurement/scroll/step mechanism lives in skill tour-guide.
  • Takes effect immediately on tick: re-measure + jump back to the first content step (steps=measure(); idx=0; render()), don't make the user walk through the rest of the frame. If the page has no separate steps → close the tour.
  • Untick (reopening the tour will show the box still ticked) → clear the flag, the menu returns to the list.
  • Persist in 2 layers: localStorage + window.name (on file:// some browsers block storage — window.name survives reload in the same tab). Wrap in try/catch.
  • Catch with change delegation on the overlay (innerHTML re-renders every step, don't attach the listener to the input).

Auto-open: OFF by default

Don't auto-open the tour on load unless explicitly requested. Lesson learned: auto-open + stale cache/multiple origins (file:// vs localhost = 2 different localStorages) creates the feeling of "I turned it off but it still shows up", and the user loses trust in the toggle. Opening the tour via the trigger button (?) is enough; if you really need auto-open on the first visit, guard !overlay both before and after the delay so you don't toggle-close a tour the user just opened themselves.

Progress bar

A slim 2–3px bar in the brand color running across the top edge of the overlay, width = (step+1)/total*100%, toggleable.

Autoplay timer bar

A 2px bar in the brand color running along the top edge of the tooltip card (different from the overall progress bar at the screen edge): fill 0→100% linearly for exactly the autoplay duration (default 2.5s/step — 1.75s tested in practice is too rushed to read), then automatically advance to the next step. The card needs overflow:hidden so the bar hugs the rounded corners. Hover the card → the bar stops (animationPlayState:paused), move the mouse away → the bar + clock restart from the beginning. The timer mechanism lives inside the tour-guide.

Transition

  • Tooltip in: fade + light slide-in (transition-all duration-200, translate-y 4px → 0).
  • Between steps: do NOT animate position (jump straight), only fade the content.
  • Typewriter effect for the label is optional — only worth it when the label is long, demo-style.

Per-spot backdrop

Supademo's "Default" style only rings the element without dimming the screen → map to the flag noDim?: boolean on TourSpot if you want the spot to have only the ring + blinker.

Theme tokens

Supademo workspace-level lets you adjust exactly the following things — map to TOUR_THEME of tour-guide and it's feature-equivalent:

token meaning
brand primary color (blinker, Next, progress)
theme "light" | "dark" for the tooltip card
showProgress enable/disable the progress bar
showNav enable/disable Back/Next
showStepCount enable/disable the counter "i / n"

Extension convention

If you want a style from another product (Intercom, Driver.js, Stripe…), distill it into a separate skill tour-guide-<tên> following exactly this file's format: a single brand token, copyable Tailwind/CSS recipes (not just prose descriptions), no hardcoded original brand hex, record the source + last distill date at the end of the file. UX mechanics (step mode, branching…) should go back to the tour-guideskill, not into the style skill.

Sources

Hotspot docs · HTML hotspots · Workspace theme — distill 2026-06-10