Toutour

Add a spotlight onboarding tour to any website. Analyzes the site's layout, tabs and UI components, interviews the developer (step granularity, mask, languages, theming, trigger mode, library), then generates and Playwright-verifies a guided tour. Use when the user asks for an onboarding tour, product tour, guided walkthrough, coach marks, feature introduction overlay, or says users can't figure out their site.

5 stars 1 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add matt-ye/Toutour --skill toutour

Manual install

git clone --depth 1 https://github.com/matt-ye/Toutour.git /tmp/Toutour
mkdir -p ~/.claude/skills
cp -r /tmp/Toutour/. ~/.claude/skills/toutour

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Toutour — generate a verified spotlight onboarding tour

You are adding a step-by-step guided tour (dark mask + spotlight + tooltip) to the user's website. Follow all five phases in order. Do not skip the interview and do not skip verification — an unverified tour that covers its own target is worse than no tour.

## Phase 1 — Analyze the site (before proposing anything)

Read the code and, if a browser tool (Playwright/Chromium) is available, load the real page. Build an inventory:

1. **Stack & render model**: static HTML / SPA framework / SSR+hydration. For SPAs note route changes and lazy-mounted components — targets may not exist at tour-start time; steps need `waitFor` logic or route navigation hooks.
2. **Layout regions**: header/nav, panels, canvas/content area, footer. Note `position: sticky/fixed` elements and every explicit `z-index` in the codebase (you must render above ALL of them — pick tour z-indexes above the max found, and record the max in a comment).
3. **Tab systems & disclosure**: every tab bar, accordion, drawer, modal. Record: the trigger element selector, the panel shown, and HOW switching works (click handler? URL hash? framework state?). The tour must programmatically reveal a target's container before spotlighting it — prefer dispatching a real `click()` on the existing trigger over re-implementing state changes.

Read the full skill on GitHub

Details

Skill name: toutour
Repository: matt-ye/Toutour
License: MIT
Repo updated: 6 August 2026

FAQ

What does the Toutour skill do?

How do I install the Toutour skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add matt-ye/Toutour --skill toutour. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Toutour popular?

It lives in matt-ye/Toutour, which has 5 GitHub stars and 1 forks.

Related skills

AI UIconfig Skill

voderment/AI-UIconfig-skill

Refactor an existing SwiftUI project into a governed UI architecture with render-state boundaries, tokenized styling, preview mocks, and a debug-only runtime tuning + writeback tool. Use when the user wants to improve UI maintainability, live-tune styles, or build a reusable UI debugging workflow without changing the product's visual intent.

Frontend & Design

Sprite Forge

isabellagreco1997/sprite-forge

Turn any pixel-art image (real or AI-generated) into clean game sprites, new poses and animations (idle, walk) that keep the character consistent. Use when asked to extract a character from a screenshot, make a sprite, re-pose a sprite, animate a pixel character, build a walk/idle cycle, or put an animated sprite back into its scene.

Frontend & Design

Ascii Shader Tsx

Codeptor/ascii-shader-tsx

Generate animated ASCII art, dithered visuals, and shader-like effects as self-contained React/TSX components. Use when the user wants to create ASCII backgrounds, dithered image/video effects, CRT/retro overlays, matrix rain, noise fields, halftone patterns, particle systems, braille art, terminal aesthetics, or any text/character-based visual effect for the web. Supports both generative (procedural, no input) and source-based (images, video, webcam to ASCII) modes. Also triggers when the user wants to convert an image to ASCII, add a dither effect, create a canvas shader component, build a r

Frontend & Design

Mente Designer

eulucasduty/mente-designer

DNA de design de 20 sites premium (engenharia reversa via DevTools) — a fórmula Webflow/HTML + Lenis + GSAP/ScrollTrigger destilada em leis, calibres medidos e 22 efeitos nomeados com código. Use ao criar landing pages animadas, sites com scrollytelling, heroes tipográficos, vídeo-fundo, marquees, pin/scrub ou qualquer página que precise de "feel" de agência de elite.

Frontend & Design

Design Mapper Skill

bilioveloso/design-mapper-skill

Intelligent design brief router. Takes any design request and emits a structured routing plan — which skills to load, in what order, with what focus parameters. Always load this skill FIRST when receiving a design brief. It is the entry point for the entire modular design system. Trigger on: "design a", "create UI for", "branding for", "what should it look like", "color scheme for", "design brief", "visual identity", "/design", intent=design_brief.

Frontend & Design

Frontend

adamholter/frontend-skill

Always read anytime you're making any UI the user will see, whether that's a one-off HTML file or a tool they're building. Any visual artifact at all.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.