Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/ancoleman/ai-design-components/guiding-usersnpx skills add ancoleman/ai-design-components --skill guiding-usersgit clone --depth 1 https://github.com/ancoleman/ai-design-componentsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/ancoleman/ai-design-components/guiding-users)<a href="https://agentmods.dev/skills/ancoleman/ai-design-components/guiding-users"><img src="https://agentmods.dev/badge/skills/ancoleman/ai-design-components/guiding-users.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00078 | $0.02931 |
| Opus 5 | $0.00039 | $0.01465 |
| Sonnet 5 | $0.00016 | $0.00586 |
| Haiku 4.5 | $0.00008 | $0.00293 |
Grade A, and why
guiding-users scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 6d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 434 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Guiding Users Through Onboarding and Help Systems
Purpose
This skill provides systematic patterns for onboarding users and delivering contextual help, from first-time product tours to ongoing feature discovery. It covers the complete spectrum of user guidance mechanisms, ensuring optimal user activation, feature adoption, and self-service support.
When to Use
Activate this skill when:
- Building first-time user experiences or product tours
- Implementing feature discovery and announcements
- Creating interactive tutorials or guided tasks
- Adding tooltips, hints, or contextual help
- Designing setup flows or completion checklists
- Building help panels or documentation systems
- Implementing progressive disclosure patterns
- Measuring onboarding effectiveness and user activation
- Ensuring onboarding accessibility
Quick Decision Framework
Select the appropriate guidance mechanism based on user state and content type:
First-time user → Product Tour (step-by-step)
New feature launch → Feature Spotlight (tooltip + animation)
Complex workflow → Interactive Tutorial (guided tasks)
Account setup → Checklist (progress tracking)
Contextual help needed → Tooltip/Hint system
Ongoing support → Help Panel (sidebar/searchable)
Feature unlock → Progressive Disclosure
Reference references/selection-framework.md for detailed selection criteria.
Core Guidance Mechanisms
Product Tours
Step-by-step walkthroughs that guide users through key features:
- Sequential spotlights with modal overlays
- Progress indicators (Step 2 of 5)
- Skip, Previous, and Next controls
- Dismiss and resume capability
- Context-sensitive activation
Implementation:
npm install react-joyride
See examples/first-time-tour.tsx for complete implementation.
Reference references/product-tours.md for patterns and best practices.
Feature Spotlights
Announce new features to existing users:
- Pulsing hotspot animations
- Contextual tooltip with arrow
- "Got it" acknowledgment
- Auto-dismiss after first view
- Non-blocking overlay
What ships with it
27 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- assets/celebration-animations/README.md 455 B
- assets/message-templates.json 1.0 KB
- assets/timing-config.json 683 B
- assets/tour-templates.json 1.4 KB
- examples/celebration-animation.tsx 245 B
- examples/contextual-help.tsx 242 B
- examples/feature-spotlight.tsx 323 B
- examples/first-time-tour.tsx 3.2 KB
- examples/guided-tutorial.tsx 274 B
- examples/help-panel.tsx 225 B
- examples/joyride-tour.tsx 246 B
- examples/setup-checklist.tsx 237 B
- outputs.yaml 9.1 KB
- references/accessibility-patterns.md 278 B
- references/checklists.md 243 B
- references/help-systems.md 254 B
- references/interactive-tutorials.md 294 B
- references/library-comparison.md 663 B
- references/measuring-success.md 242 B
- references/product-tours.md 13 KB
- references/progressive-disclosure.md 247 B
- references/selection-framework.md 911 B
- references/timing-strategies.md 264 B
- references/tooltips-hints.md 241 B
- scripts/analyze_onboarding_metrics.py 1.1 KB runs code
- scripts/generate_tour_config.js 705 B runs code
- scripts/validate_accessibility.js 864 B runs code
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 6d ago First seen · 434 lines · 78 tokens per session scan A 21a2bc1ee8d1
guiding-users is a skill published in the GitHub repository ancoleman/ai-design-components (518 stars, last pushed 8mo ago), licensed MIT. It adds 78 tokens to every session and 2,931 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
designer-ic-assessment
Facilitates a structured behavioral assessment interview for IC designer levels, incorporating AI fluency across competency areas. Use this skill when someone wants to run a designer self-assessment, a manager assessment of a designer, or set up an IC level calibration session. Trigger whenever someone mentions…
Brand
Complete brand development system with emotive foundation. Triggers on requests for brand identity, logos, visual systems, or design guidelines. Creates distinctive, anti-AI-slop design from strategy through delivery.
canvas-design
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Art
AI image generation tool. Use when you need to generate reference images, illustrations, or visual content from text prompts.
hps-bauhaus
A visual-design fundamentals course for new brand designers — grid, type, color, and the exercises that build the eye. Built as a decision-grade professional training deck for junior designers, new hires.