Design System
affaan-m/ECC
Generate a design system from an existing codebase or audit one for visual consistency: extract tokens (colors, typography, spacing, shadows) into design-tokens.json and CSS custom properties with…
Designing in-product tours, tooltips, and contextual help that teach product capabilities without becoming friction.
$ npx skills add rampstackco/claude-skills --skill interactive-product-tour -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install rampstackco/claude-skills interactive-product-tour --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/rampstackco/claude-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/interactive-product-tour .claude/skills/interactive-product-tour && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "interactive-product-tour" agent skill from https://github.com/rampstackco/claude-skills/tree/main/skills/interactive-product-tour into .claude/skills/interactive-product-tour/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "interactive-product-tour", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/rampstackco/claude-skills/tree/main/skills/interactive-product-tourType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add rampstackco/claude-skills --skill interactive-product-tour -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install rampstackco/claude-skills interactive-product-tour --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/rampstackco/claude-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/interactive-product-tour .agents/skills/interactive-product-tour && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "interactive-product-tour" agent skill from https://github.com/rampstackco/claude-skills/tree/main/skills/interactive-product-tour into .agents/skills/interactive-product-tour/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "interactive-product-tour", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add rampstackco/claude-skills --skill interactive-product-tour -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install rampstackco/claude-skills interactive-product-tour --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/rampstackco/claude-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/interactive-product-tour .cursor/skills/interactive-product-tour && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "interactive-product-tour" agent skill from https://github.com/rampstackco/claude-skills/tree/main/skills/interactive-product-tour into .cursor/skills/interactive-product-tour/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "interactive-product-tour", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/rampstackco/claude-skills.git --path skills/interactive-product-tour--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add rampstackco/claude-skills --skill interactive-product-tour -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install rampstackco/claude-skills interactive-product-tour --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/rampstackco/claude-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/interactive-product-tour .gemini/skills/interactive-product-tour && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "interactive-product-tour" agent skill from https://github.com/rampstackco/claude-skills/tree/main/skills/interactive-product-tour into .gemini/skills/interactive-product-tour/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "interactive-product-tour", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install rampstackco/claude-skills interactive-product-tourInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add rampstackco/claude-skills --skill interactive-product-tour -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/rampstackco/claude-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/interactive-product-tour .github/skills/interactive-product-tour && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "interactive-product-tour" agent skill from https://github.com/rampstackco/claude-skills/tree/main/skills/interactive-product-tour into .github/skills/interactive-product-tour/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "interactive-product-tour", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add rampstackco/claude-skills --skill interactive-product-tour -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install rampstackco/claude-skills interactive-product-tour --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/rampstackco/claude-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/interactive-product-tour .opencode/skills/interactive-product-tour && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "interactive-product-tour" agent skill from https://github.com/rampstackco/claude-skills/tree/main/skills/interactive-product-tour into .opencode/skills/interactive-product-tour/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "interactive-product-tour", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
interactive-product-tourDesigning in-product tours, tooltips, and contextual help that teach product capabilities without becoming friction.
Interactive Product Tour is an agent skill from rampstackco/claude-skills. Designing in-product tours, tooltips, and contextual help that teach product capabilities without becoming friction. Trigger logic, tour architecture, contextual placement, completion tracking. Honest about tooltip-spam (visual noise that users develop blindness to), one-and-done (help invisible at the moment of need), and contextual-when-needed (surfaces help at the moment friction occurs) patterns. Triggers on product tour, in-product tooltip, contextual help, walkthrough, feature tour, hint system, in-app…
Its SKILL.md is about 4.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 11 other files, including reference files (for example `README.md`, `references/common-tour-failures.md` and `references/completion-tracking-and-re-trigger.md`).
The repository describes itself as: Stack-agnostic Claude Skills covering the full website lifecycle: brand, design, content, SEO, dev, ops, growth, and research. Build, ship, audit, optimize. The licence is MIT.
12 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit 482c9bf. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Interactive Product Tour loads about 4.4k tokens when it runs, and up to ~20k if it reads all its reference files. Until then it costs about 180 tokens; SKILL.md has 2,194 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from rampstackco/claude-skills at commit 482c9bf, republished under its MIT licence (© rampstackco). 2,194 words, ~4,429 tokens.
.claude/skills/interactive-product-tour/SKILL.md (or your agent's skills folder). This skill also uses 10 other files; get the full folder from GitHub.A senior product marketing director's playbook for designing in-product tours, tooltips, and contextual help that teach product capabilities without becoming friction. Trigger logic, tour architecture, contextual placement, completion tracking. The discipline of building help systems that surface at moments of need and disappear when not needed.
Most product tours fail in one of two ways. They paint every button, link, and feature with "click for tour" hints until the visual noise is so great that users develop blindness to the dots. Or they show a single first-login tour the user skips or skims, after which the same help never re-surfaces when the user actually hits a moment of friction. Help that is invisible at the moment of need is help that does not exist.
The tours that work do something different. They trigger when the user is at a moment of friction, not all the time. They surface contextual hints when the user enters a section they have not explored, clicks into a feature requiring setup, or returns after a long absence. The system knows what the user knows and surfaces help at the right moment.
The voice is the senior product marketing director who has watched feature adoption double when tours were redesigned and watched it collapse when more tooltips were piled onto every surface. Practical, opinionated about the trigger logic that distinguishes useful help from visual noise, willing to call out when no in-product tour at all is the right answer.
When to use this skill: scoping an in-product help system for the first time, auditing a tour system that produces engagement metrics with no adoption lift, designing the trigger logic that decides when help surfaces, or deciding which features warrant tours vs documentation.
This skill spans in-product tours, tooltips, and contextual help. The growth-tooling distinctions:
onboarding-wizard-design is the sequential first-run experience. This skill is contextual help WITHIN the product, surfacing across the lifecycle.chatbot-flow-design is conversational help. This skill is non-conversational tour and tooltip help.interactive-product-tour (this skill) is trigger logic, tour architecture, contextual placement, completion tracking, and the discipline of being absent until needed.discovery-research-synthesis is research that informs tour content. Input, not part of.pm-spec-writing is the spec for engineers building the tour. This skill is about WHAT to build; pm-spec-writing is about communicating it.The audience: product marketers, growth marketers, in-house product teams, agencies running activation work for SaaS clients.
Out of scope: first-run wizards (covered by onboarding-wizard-design); conversational help (covered by chatbot-flow-design); the engineering implementation; specific Userpilot/Pendo/Appcues platform configurations (those stay implementation-side).
Before designing the tour system, decide whether tours are the right tool.
Tours earn investment when:
Tours do NOT earn investment when:
The decision is not "should we have a tour system"; it is "is in-product tour the right tool for this product and audience."
Detail in references/tour-decision-criteria.md.
The keystone framing.
Tooltip-spam. Every button, link, and feature has a "click for tour" hint or pulsing dot. Visual noise. Users develop blindness to the dots; the tour system fails as a teaching surface. Cost: the design effort produces help nobody perceives; the visual clutter degrades the product overall.
One-and-done. A single tour shown on first login. Users skip or skim. The same tour never re-surfaces when the user actually hits a moment of friction. Cost: help that is invisible at the moment of need does not help. Feature adoption stays low; support tickets persist for features the tour covered.
Contextual-when-needed. Tours and tooltips trigger when the user is at a moment of friction (entered a section they have not explored, clicked into a feature requiring setup, returned after a long absence, hit a feature flag's first activation). The system knows what the user knows and surfaces help at the right moment. Cost: trigger logic is meaningful work; payoff is help that compounds adoption over time.
The litmus test. Watch a user encounter a feature for the first time. Does the help system surface useful guidance at that moment, or did it surface guidance at first-login that the user has long forgotten? If the former, contextual-when-needed. If the latter, one-and-done. If the help is competing with 14 other tooltip dots scattered across the page, tooltip-spam.
The mechanism that decides when help surfaces.
Event-based triggers. Help appears in response to a user action. Clicked a feature for the first time, entered a new section, completed a flow.
When to use. Default for most contextual help. The user did something; help responds.
Time-based triggers. Help appears after time elapsed. Returned to the product after 30 days of absence; been on this page for 60 seconds without acting.
When to use. Time can signal need (long absence; stuck on a page). Use sparingly; time alone is a noisy signal.
State-based triggers. Help appears based on user state. New user vs power user; account size; feature usage history.
When to use. When the help differs by user segment. State-based triggers personalize help.
Combined triggers. Most production tour systems combine all three. Event-driven, with time and state modulating frequency and content.
The discipline. The trigger answers "when does this help surface and why." Decorative triggers (showing help when it is not needed) become tooltip-spam.
Detail in references/trigger-logic-patterns.md.
How help is organized.
Single tour. One linear tour covering the product. Simple; rigid; rarely fits how users actually explore.
Branched tour. Tour adapts based on user choices or path through the product. More relevant; more complex.
Library of micro-tours. Dozens of small focused tours, each tied to a specific feature or workflow. Triggered contextually. Most flexible; most maintenance.
The choice. Most modern systems use the micro-tour library approach. Single tours feel canned; branched tours are hard to maintain at scale; a library of contextual micro-tours matches how users actually explore.
Detail in references/tour-architecture-patterns.md.
The visual design of help.
Placement patterns.
Dismissal mechanics.
Non-intrusion principle. Help should be findable when wanted, ignorable when not. Modal help that blocks the screen is intrusive; help that disappears too easily fails to teach.
Detail in references/contextual-placement-patterns.md and references/dismissal-and-non-intrusion-patterns.md.
Knowing what each user has seen, deciding when to show again.
Per-user state tracking.
Re-trigger logic.
The over-trigger trap. Showing the same tour to users who have completed it. Trust degrades; users disable tours.
The under-trigger trap. Tours never re-surfacing when the user hits the same friction again. Help fails at the moment of need.
Detail in references/completion-tracking-and-re-trigger.md.
Different users need different help.
The principle. Power users do not want tours on features they already use. New users need tours on features they are encountering for the first time. The help system should know the difference.
Differentiation signals.
Differentiation patterns.
The over-helping trap. Helping power users with features they mastered. Trust degrades.
The under-helping trap. Treating all users as power users. New users miss critical help.
Detail in references/power-user-vs-new-user-patterns.md.
Rapid-fire. Diagnoses in references/common-tour-failures.md.
When designing or auditing an in-product tour system, walk these 12 considerations.
The output of the framework is a tour system that earns the user's attention by being absent until needed, surfaces help at moments of relevance, and produces feature adoption.
references/tour-decision-criteria.md - When tours earn the build vs when documentation suffices.references/trigger-logic-patterns.md - Event-based, time-based, state-based, combined triggers. The discipline that distinguishes useful triggers from noise.references/tour-architecture-patterns.md - Single tour vs branched vs library of micro-tours. The architecture that fits how users actually explore.references/contextual-placement-patterns.md - Tooltip, spotlight, sidebar, inline. Placement and visual design.references/completion-tracking-and-re-trigger.md - Per-user state, re-trigger logic, the over-trigger and under-trigger traps.references/power-user-vs-new-user-patterns.md - Differentiation signals and patterns. The over-helping and under-helping traps.references/dismissal-and-non-intrusion-patterns.md - Dismissal mechanics. The non-intrusion principle.references/tour-anti-patterns.md - The patterns that look like tours but degrade the product.references/common-tour-failures.md - 9+ failure patterns with diagnoses and cures.The tour systems that work as compounding assets are the ones the user does not perceive as a tour system. Help surfaces at the moment of friction; disappears when the friction passes; never piles up as visual noise. The user encounters a feature for the first time, sees a brief contextual hint, takes the suggested action, and moves on. The system did its job; the user did not have to think about the system.
That is the bar. Below the bar are tooltip-spam (visual noise that users develop blindness to) and one-and-done (help invisible at the moment of need). Above the bar are contextual-when-needed systems where trigger logic, tour architecture, contextual placement, and re-trigger respect work together to make help feel ambient rather than imposed.
The discipline is in the design choices. The decision to build a tour system at all, or rely on documentation. The trigger logic that decides when help surfaces. The architecture that organizes micro-tours by feature and workflow. The placement and dismissal that make help non-intrusive. The completion tracking that prevents re-showing what users already know. The power-user differentiation that respects expertise. The maintenance cadence that keeps tours in sync with the product.
© rampstackco, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 10 other files (references) in skills/interactive-product-tour of rampstackco/claude-skills.
Open the folder on GitHubat commit 482c9bf
Interactive Product Tour next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Interactive Product Tour this skillrampstackco/claude-skills | 940 | — | ~4.4k | Automated safety check: Pass | MIT | |
| Design Systemaffaan-m/ECC | 275k | — | ~698 | Automated safety check: Pass | MIT | |
| Design Guidepaperclipai/paperclip | 99k | 1 repos | ~3.1k | Automated safety check: Pass | MIT | |
| Design Audit Against Rams' Principlesthedotmack/claude-mem | 98k | — | ~4.6k | Automated safety check: Pass | Apache-2.0 | |
| Figma Design to Codewarpdotdev/warp | 65k | 4 repos | ~2.9k | Automated safety check: Pass | AGPL-3.0 | |
| Design Consultationgarrytan/gstack | 136k | — | ~15k | Automated safety check: Notes | MIT |
affaan-m/ECC
Generate a design system from an existing codebase or audit one for visual consistency: extract tokens (colors, typography, spacing, shadows) into design-tokens.json and CSS custom properties with…
paperclipai/paperclip
Paperclip UI design system guide for building consistent, reusable frontend components.
thedotmack/claude-mem
Audits a design against Dieter Rams' ten principles of good design, scores each with evidence, and hands off a make-plan prompt for a new, refined or redesigned outcome.
warpdotdev/warp
Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.
garrytan/gstack
Learns about your product, studies the landscape and writes a DESIGN.md with a full design system covering type, color, layout, spacing and motion.
XiaomiMiMo/MiMo-Code
Entry point to a bundle of product design workflows covering context, research, audits, ideation, URL or image to code, design QA and sharing a prototype.
rampstackco/claude-skills
Run a structured after-action review (postmortem, retrospective) on a launch, incident, or completed project to capture timeline, root cause analysis, contributing factors, and actionable lessons.
rampstackco/claude-skills
Design measurement frameworks including event taxonomy, KPI hierarchy, dashboard architecture, attribution models, and analytics implementation strategy.
rampstackco/claude-skills
Build or audit a comprehensive brand style guide that documents the full brand system including story, logo system, color, typography, imagery, voice, applications, and dos/don'ts.
rampstackco/claude-skills
Develop or document a complete brand voice and tone system covering voice attributes, tone shifts by context, vocabulary preferences, grammar rules, and copy examples.
rampstackco/claude-skills
Write or edit website copy, blog content, and editorial pieces with attention to voice, structure, and goal.
rampstackco/claude-skills
Develop a content strategy covering editorial positioning, content pillars, formats, calendar, governance, and topical authority planning.
Designing in-product tours, tooltips, and contextual help that teach product capabilities without becoming friction. Interactive Product Tour is an agent skill from rampstackco/claude-skills. Designing in-product tours, tooltips, and contextual help that teach product capabilities without becoming friction.
Interactive Product Tour fits situations like: tour architecture; contextual placement; completion tracking; in-product tooltip.
Run `npx skills add rampstackco/claude-skills --skill interactive-product-tour -a claude-code`. Or copy the skill folder (skills/interactive-product-tour in rampstackco/claude-skills) into .claude/skills/interactive-product-tour in your project. Claude Code loads it when a task matches its description.
Run `npx skills add rampstackco/claude-skills --skill interactive-product-tour -a codex`. Or copy the skill folder (skills/interactive-product-tour in rampstackco/claude-skills) into .agents/skills/interactive-product-tour in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add rampstackco/claude-skills --skill interactive-product-tour -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/interactive-product-tour, .gemini/skills/interactive-product-tour, .github/skills/interactive-product-tour and .opencode/skills/interactive-product-tour in your project.
SKILL.md names no scripts, command-line tools or credentials: Interactive Product Tour is instructions for the agent only.
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
Interactive Product Tour is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 4.4k tokens (SKILL.md is roughly 18k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 16k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Interactive Product Tour: Design System (affaan-m/ECC, 275k stars), Design Guide (paperclipai/paperclip, 99k stars), Design Audit Against Rams' Principles (thedotmack/claude-mem, 98k stars) and Figma Design to Code (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
rampstackco (a GitHub organization) maintains it in rampstackco/claude-skills, which has 940 GitHub stars. The repository holds 103 skills in this directory. The repository was last updated on October 7, 2026.
Source: rampstackco/claude-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.