More screenshots

    Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+21 more

    Toutour — Verified Onboarding Tours for Any Website

    3

    Analyzes your site's layout and UI, interviews you about preferences, then generates AND Playwright-verifies a spotlight onboarding tour — accessible, i18n-ready, colorblind-safe, MIT.

    Free

    8 usesSecurity scanned
    Toutour — Verified Onboarding Tours for Any Website

    Toutour — Verified Onboarding Tours for Any Website

    Example session with this skill installed

    Use toutour to add an onboarding tour to my dashboard app. First-time
    users can't find the export feature. The site is plain HTML + vanilla JS
    in ./src, bilingual zh/en with a dark mode toggle, and has three tabs
    (Design / Data / Export). I want it to auto-show on first visit.

    • Read your context and instructions
    • Compiled the toutour

    Phase 1 — Analysis: found 3 tab panels (click-driven, .tab-btn[data-tab]),
    14 interactive controls grouped into 6 cards; 2 conditional rows; dark mode
    via CSS variables; i18n via .zh/.en spans; max z-index on site: 100.

    Phase 2 — Interview: you chose: two-tier (8-step main tour + per-tab "?"
    mini-tours), mask ON, accent ring ON, zh+en, follow site dark mode,
    auto-show first visit + persistent "?" button.

    Phase 3 — Library: site has zero deps → bundled MIT engine (no AGPL risk).

    Phase 4 — Implemented: engine + styles vendored, 8-step map with tab
    auto-navigation, bare checkboxes widened to labels, localStorage key
    app_tour_seen, tour_step funnel events wired to your existing gtag().

    Phase 5 — Verified (Playwright, 1280×800 + 390×844): 41/41 assertions
    passed — every spotlight intersects its target, tooltip never overlaps
    the lit area, Esc/arrows work, reduced-motion clean, zero console errors.
    Screenshots attached. One fix applied during verification: the Export tab
    "?" was covered by your sticky footer (z-index raised to 110).

    Connects securely to your tools. The creator never sees your data.

    About this skill

    Toutour is an agent skill (universal SKILL.md format — works in Claude Code, Cursor, Gemini CLI, Codex CLI…) that analyzes a website's layout, tabs, and UI components, interviews the developer about their preferences, then generates, wires up, and verifies a spotlight onboarding tour — the dark-mask, step-by-step walkthrough pattern that most vibe-coded sites are missing.

    -Targets inside Shadow DOM or cross-origin iframes are not reachable (light-DOM selectors only).
    -Canvas-only UIs (games, drawing apps) don't suit spotlight semantics — the skill will recommend an in-experience tutorial instead.
    -RTL layouts are untested in the bundled engine.
    -Bundled engine i18n is per-locale dictionary swap (no pluralization framework).
    -The automated verification phase requires the site to be runnable locally and a browser-automation tool; otherwise a manual checklist is provided.

    Open docs

    How to use

    1. 1

      Connect your agent to the Agensi MCP

      Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup

    2. 2

      Sign in to Agensi

      Your agent shows a sign-in link. Sign in and click Allow.

    3. 3

      Ask for what you need

      Your agent loads this skill and uses it on your task. It always asks before any payment.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill goes through the trust checks below.

    Security scanned

    Checked by our 8-point scan before listing

    8 uses

    Times used to date

    Free to use

    No account required to browse

    Trust & safety

    Security scan

    Security scan passed 3 months ago

    • Free with an Agensi account

    Software
    PlaywrightNode.js

    Permissions

    Read Files
    Write Files
    Terminal / Shell
    Browser

    File Scopes

    src/**
    public/**
    **/*.html
    **/*.css
    **/*.js
    tests/tour-verify.*

    Shell + file access are used to analyze the target site's code, write the tour code/styles into the project, and serve the site locally for testing. Browser (Playwright/Chromium) is used only for the automated verification phase — stepping through the generated tour and asserting spotlight/tooltip geometry; the skill degrades to a manual checklist without it. No network calls are made by the skill itself and no environment variables are read.

    Listed3 months ago
    Updated3 months ago

    What's inside

    Frequently Asked Questions

    Toutour creates the familiar 'dark-mask' spotlight walkthroughs that guide users through a site. Unlike manual libraries, this skill automatically analyzes your UI, interviews you for context, and uses Playwright to verify that every step actually points to the correct element before finishing.

    Toutour is built in the universal SKILL.md format and is compatible with tool-use enabled agents like Claude Code, Cursor, Gemini CLI, and Codex. If your agent can read and execute local project files, it can use Toutour.

    The generated tours are framework-agnostic (Vanilla JS), meaning they work with React, Vue, Svelte, or flat HTML. They are built to be WCAG accessible, i18n-ready for global users, and include specific colorblind-safe contrast modes by default.

    You receive the full SKILL.md file and its associated logic. Once imported into your agent's library, the agent will have the persistent ability to scan your site, conduct the setup interview, and deploy the code and tests.

    Yes, the output includes a generated Playwright test suite. This ensures that as your website's UI evolves, you can automatically detect if a spotlight step has become 'orphaned' or if a UI element has moved, preventing broken tours.

    New in UX & UI Design

    Free