Agent skill

Guiding Users

by ancoleman in ancoleman/ai-design-components

Implements onboarding and help systems including product tours, interactive tutorials, tooltips, checklists, help panels, and progressive disclosure patterns.

MITAuto-check passedFrontend & Design

Install Guiding Users

skills CLI
$ npx skills add ancoleman/ai-design-components --skill guiding-users -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install ancoleman/ai-design-components guiding-users --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/ancoleman/ai-design-components.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/guiding-users .claude/skills/guiding-users && rm -rf skills-src

Use ~/.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/

Facts

Skill name
guiding-users
GitHub stars
526
Token cost
~3.5k tokens
SKILL.md length
1,392 words
Files
29 (incl. scripts, references, assets)
Skills in repo
75
Repo updated
First seen
Licence
MIT

At a glance

Implements onboarding and help systems including product tours, interactive tutorials, tooltips, checklists, help panels, and progressive disclosure patterns.

  • Works in 5 steps: Map User Journey → Choose Guidance Mechanisms → Implement with Progressive Enhancement → …
  • Building first-time experiences
  • SKILL.md covers Purpose, When to Use, Quick Decision Framework and Core Guidance Mechanisms, plus 8 more sections
  • Calls npm, node and python

What it does

Guiding Users is an agent skill from ancoleman/ai-design-components. Implements onboarding and help systems including product tours, interactive tutorials, tooltips, checklists, help panels, and progressive disclosure patterns. Use when building first-time experiences, feature discovery, guided walkthroughs, contextual help, setup flows, or user activation features. Provides timing strategies, accessibility patterns (keyboard, screen readers, reduced motion), and metrics for measuring onboarding success.

Its SKILL.md is about 3.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 32 other files, including scripts, reference files and assets (for example `assets/celebration-animations/README.md`, `assets/message-templates.json` and `assets/timing-config.json`).

It sits in Frontend & Design, covering Accessibility. The repository describes itself as: Comprehensive UI/UX and Backend component design skills for AI-assisted development with Claude. The licence is MIT.

When your agent uses it

  • Building first-time experiences
  • Feature discovery
  • Guided walkthroughs
  • Contextual help

Example prompts

  • “Use the guiding-users skill to implement onboarding and help systems including product tours, interactive tutorials, tooltips, checklists, help…”
  • “/guiding-users”

Requirements

  • Python 3
  • Node.js

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Map User Journey
  2. Choose Guidance Mechanisms
  3. Implement with Progressive Enhancement
  4. Test Accessibility
  5. Monitor and Optimize

What it can do on your machine

Read from SKILL.md and the folder at commit 76551b7. It shows what the files ask for, not the result of running them.

  • Tool permissions

    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.

  • Runs code

    Ships 1 file in scripts/, which the agent can run.

    Shell commands in SKILL.md call:

    • npm
    • node
    • python

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Guiding Users loads about 3.5k tokens when it runs, and up to ~7.8k if it reads all its reference files. Until then it costs about 114 tokens; SKILL.md has 1,392 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~114
When it runs · the whole SKILL.md, loaded when a task matches
~3.5k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~7.8k

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.

Safety

Auto-check passed

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); the scripts in this folder are not scanned.

SKILL.md

The full file from ancoleman/ai-design-components at commit 76551b7, republished under its MIT licence (© ancoleman). 1,392 words, ~3,478 tokens.

Download SKILL.mdSave it as .claude/skills/guiding-users/SKILL.md (or your agent's skills folder). This skill also uses 28 other files; get the full folder from GitHub.
name
guiding-users
description
Implements onboarding and help systems including product tours, interactive tutorials, tooltips, checklists, help panels, and progressive disclosure patterns. Use when building first-time experiences, feature discovery, guided walkthroughs, contextual help, setup flows, or user activation features. Provides timing strategies, accessibility patterns (keyboard, screen readers, reduced motion), and metrics for measuring onboarding success.

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:

bash
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

See examples/feature-spotlight.tsx for implementation. Reference references/tooltips-hints.md for patterns.

Interactive Tutorials

Guided task completion with validation:

  • "Complete these tasks to get started"
  • Checkbox completion tracking
  • Celebration animations on completion
  • Sandbox mode with sample data
  • Undo and reset capabilities

See examples/guided-tutorial.tsx for implementation. Reference references/interactive-tutorials.md for patterns.

Setup Checklists

Track multi-step onboarding progress:

  • Visual progress indicators (3/4 complete)
  • Direct links to each task
  • Profile completion percentages
  • Achievement badges and gamification
  • Persistent until completed

See examples/setup-checklist.tsx for implementation. Reference references/checklists.md for patterns.

Contextual Tooltips and Hints

Just-in-time help when users need it:

  • Hover or click-triggered tooltips
  • Progressive hint levels (1, 2, 3)
  • "Need help?" assistance triggers
  • Context-aware suggestions
  • Keyboard-accessible

See examples/contextual-help.tsx for implementation. Reference references/tooltips-hints.md for complete patterns.

Help Panels

Comprehensive help systems:

  • Sidebar or drawer interface
  • Contextual help based on current page
  • Search help articles and docs
  • Video tutorials and demos
  • Contact support integration
  • Collapsible and resizable

See examples/help-panel.tsx for implementation. Reference references/help-systems.md for patterns.

Timing and Triggering Strategies

When to Show Onboarding

Appropriate triggers:

  • First login (always)
  • Immediately after signup
  • New feature launch (to existing users)
  • User appears stuck (smart triggering based on inactivity)
  • User explicitly requests help
When NOT to Show Onboarding

Avoid showing when:

  • User is mid-task or focused
  • Shown in every session (becomes annoying)
  • Before allowing free exploration
  • Tour exceeds 7 steps (too long)
  • User already dismissed or completed

Auto-dismiss timing:

  • Simple tooltips: 5-7 seconds
  • Feature announcements: 10-15 seconds or manual dismiss
  • Tours: User-controlled, no auto-dismiss
  • Persistent hints: Until user acknowledges

Reference references/timing-strategies.md for detailed guidelines.

Progressive Disclosure Patterns

Show only what's needed, when it's needed:

Techniques:

  1. Accordion Help: Collapsed by default, expand for details
  2. "Learn More" Links: Deep dive content optional
  3. Advanced Settings: Hidden behind "Show advanced" toggle
  4. Gradual Feature Introduction: Unlock features as user progresses
  5. Contextual Hints: Show based on user actions

Reference references/progressive-disclosure.md for implementation patterns.

Accessibility Requirements

Keyboard Navigation

Essential keyboard support:

  • Tab through tour steps and controls
  • ESC to dismiss tours and tooltips
  • Arrow keys for Previous/Next navigation
  • Enter/Space to activate buttons
  • Focus visible indicators
Screen Reader Support

ARIA patterns for announcements:

  • Announce step number and total (Step 2 of 5)
  • Read tooltip and help content
  • Describe highlighted UI elements
  • Announce progress completion
  • Alert on errors or blockers
Reduced Motion

Respect prefers-reduced-motion:

  • Disable pulsing animations
  • Use instant transitions instead of animations
  • Remove parallax and complex effects
  • Maintain functionality without motion

To validate accessibility:

bash
node scripts/validate_accessibility.js

Reference references/accessibility-patterns.md for complete implementation.

Library Recommendations

Primary: react-joyride (Feature-Rich, Accessible)

Library: /gilbarbara/react-joyride Trust Score: 9.6/10 Code Snippets: 29+

Best for comprehensive product tours:

  • WAI-ARIA compliant out of the box
  • Full keyboard navigation support
  • Highly customizable styling
  • Programmatic control
  • Localization support
  • Active maintenance
bash
npm install react-joyride

See examples/joyride-tour.tsx for complete setup.

Alternative: driver.js (Lightweight, Modern)

Best for minimal bundle size:

  • Vanilla JavaScript (framework agnostic)
  • ~5KB gzipped
  • Modern API design
  • No dependencies
bash
npm install driver.js
Alternative: intro.js (Classic, Proven)

Best for traditional tours:

  • Battle-tested library
  • Wide browser support
  • JSON-based tour configuration
  • Extensive plugin ecosystem
bash
npm install intro.js

Reference references/library-comparison.md for detailed analysis and selection criteria.

Design Token Integration

All onboarding components use the design-tokens skill for consistent theming:

Token categories used:

  • Colors: Tour spotlight, overlay, tooltip backgrounds, hotspot colors
  • Spacing: Tour padding, tooltip spacing, arrow size
  • Typography: Title sizes, body text, help content
  • Borders: Border radius for modals and tooltips
  • Shadows: Elevation for tour spotlights and tooltips
  • Motion: Transition durations, pulse animations

Supports light, dark, high-contrast, and custom brand themes. Reference the design-tokens skill for complete theming documentation.

Measuring Success

Key Metrics

Track these indicators:

  • Tour completion rate (target: >60%)
  • Time to first value (faster = better)
  • Feature adoption rate post-tour
  • Support ticket reduction
  • User activation rate (completed key actions)
  • Drop-off points in tours
Optimization Strategies

Iterate based on data:

  • A/B test tour length (shorter often better)
  • Test different messaging and copy
  • Measure drop-off at each step
  • Simplify steps with high abandonment
  • Add skip options for returning users
  • Personalize based on user type

To analyze onboarding metrics:

bash
python scripts/analyze_onboarding_metrics.py

Reference references/measuring-success.md for complete analytics implementation.

Show full SKILL.md (550 more words)Show less

Anti-Patterns to Avoid

Common mistakes that harm user experience:

❌ Forced Tours: Requiring tour completion before product use ❌ Too Long: Tours exceeding 7 steps lose user attention ❌ Every Session: Showing same tour repeatedly ❌ No Skip Option: Preventing users from exploring independently ❌ Wall of Text: Using lengthy explanations instead of visuals ❌ Blocking Everything: Preventing interaction during tours ❌ Premature Guidance: Showing help before users explore ❌ Poor Timing: Interrupting focused work ❌ No Context: Generic tips without specific relevance

Implementation Workflow

Step 1: Map User Journey

Identify key moments:

  1. First login and account creation
  2. Core value delivery (aha moment)
  3. Feature discovery points
  4. Potential confusion or abandonment
  5. Achievement and progress milestones
Step 2: Choose Guidance Mechanisms

Match mechanisms to moments:

  • First login → Product tour (3-5 steps max)
  • Core features → Interactive tutorial
  • Setup requirements → Checklist
  • New features → Spotlight + tooltip
  • Ongoing help → Help panel
Step 3: Implement with Progressive Enhancement

Build incrementally:

  1. Start with essential guidance only
  2. Add contextual help based on user behavior
  3. Implement analytics to measure effectiveness
  4. Iterate based on data
  5. A/B test variations
Step 4: Test Accessibility

Verify compliance:

  • Keyboard navigation works completely
  • Screen reader announces properly
  • Reduced motion preference honored
  • Focus management correct
  • ARIA labels descriptive

Run validation:

bash
node scripts/validate_accessibility.js
Step 5: Monitor and Optimize

Track and improve:

  • Monitor completion rates
  • Identify drop-off points
  • Gather user feedback
  • A/B test improvements
  • Update based on findings

Working Examples

Start with the example matching the use case:

first-time-tour.tsx           # Product walkthrough with react-joyride
feature-spotlight.tsx         # New feature announcement
guided-tutorial.tsx           # Interactive task completion
setup-checklist.tsx           # Multi-step onboarding progress
contextual-help.tsx           # Tooltips and progressive hints
help-panel.tsx                # Sidebar help with search
celebration-animation.tsx     # Completion feedback

Resources

Scripts (Token-Free Execution)
  • scripts/generate_tour_config.js - Generate tour configurations from user flows
  • scripts/analyze_onboarding_metrics.py - Analyze completion and drop-off rates
  • scripts/validate_accessibility.js - Test keyboard and screen reader support
References (Detailed Documentation)
  • references/product-tours.md - Tour patterns, step design, navigation
  • references/interactive-tutorials.md - Guided tasks and sandbox modes
  • references/tooltips-hints.md - Contextual help and progressive hints
  • references/checklists.md - Progress tracking and gamification
  • references/help-systems.md - Help panels, videos, and documentation
  • references/progressive-disclosure.md - Advanced patterns and feature unlocking
  • references/timing-strategies.md - When and how to trigger guidance
  • references/accessibility-patterns.md - WCAG compliance and ARIA patterns
  • references/measuring-success.md - Analytics and optimization
  • references/library-comparison.md - Detailed library evaluation
  • references/selection-framework.md - Decision trees for choosing mechanisms
Examples (Implementation Code)
  • Complete working implementations for all guidance types
  • Integration examples with common frameworks
  • Accessibility-compliant patterns
  • Design token integration examples
Assets (Templates and Configs)
  • assets/celebration-animations/ - Success animations and confetti
  • assets/tour-templates.json - Reusable tour configurations
  • assets/message-templates.json - Tooltip and hint copy templates
  • assets/timing-config.json - Recommended timing values

Cross-Skill Integration

This skill works with other component skills:

  • Forms: Guided form completion, validation hints
  • Dashboards: Feature tours, widget explanations
  • Tables: Data grid tutorials, feature discovery
  • AI Chat: Chat interface walkthroughs
  • Navigation: Menu and navigation guidance
  • Feedback: Success celebrations, progress notifications
  • Design Tokens: All visual styling and theming

Key Principles

  1. Respect User Time: Keep tours under 7 steps, make skippable
  2. Show, Don't Tell: Use visuals and interactions over text
  3. Progressive Enhancement: Start simple, add guidance as needed
  4. Context is King: Show help when and where it's relevant
  5. Measure Everything: Track completion, iterate based on data
  6. Accessibility First: Keyboard, screen reader, reduced motion support
  7. Celebrate Progress: Acknowledge completion and achievements
  8. Allow Exploration: Don't force tours, enable discovery

Next Steps

  1. Map the user journey and identify key moments
  2. Choose appropriate guidance mechanisms for each moment
  3. Install react-joyride or preferred library
  4. Start with one critical flow (usually first-time experience)
  5. Implement with accessibility built-in
  6. Add analytics tracking
  7. Test with real users
  8. Iterate based on metrics and feedback

© ancoleman, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 28 other files (scripts, references, assets) in skills/guiding-users of ancoleman/ai-design-components.

  • SKILL.md
  • assets/celebration-animations/README.md
  • assets/message-templates.json
  • assets/timing-config.json
  • assets/tour-templates.json
  • examples/celebration-animation.tsx
  • examples/contextual-help.tsx
  • examples/feature-spotlight.tsx
  • examples/first-time-tour.tsx
  • examples/guided-tutorial.tsx
  • examples/help-panel.tsx
  • examples/joyride-tour.tsx
  • examples/setup-checklist.tsx
  • outputs.yaml
  • references/accessibility-patterns.md
  • references/checklists.md
  • references/help-systems.md
  • … and 12 more

Open the folder on GitHubat commit 76551b7

Compare with similar skills

Guiding Users 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.

Guiding Users compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Guiding Users this skillancoleman/ai-design-components526—~3.5kAutomated safety check: PassMIT
Web Interface Guidelines Reviewervercel-labs/openreview1.7k98 repos~308Automated safety check: PassNone
Accessibility Reviewmarkmead/hyperui12k1 repos~1.1kAutomated safety check: PassMIT
Web Animation DesignbaptisteArno/typebot.io11k2 repos~2.7kAutomated safety check: PassCustom licence
Accessibility Fixeribelick/ui-skills9.4k4 repos~1.2kAutomated safety check: PassMIT
Wcag Audit PatternsvmDeshpande/ai-agent-automation17810 repos~610Automated safety check: PassApache-2.0

Similar skills

  • Web Interface Guidelines Reviewer

    vercel-labs/openreview

    Official

    Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…

    1.7k GitHub starsUsed in 98 repos~308 tokens
    Frontend & DesignAuto-check passed
  • Accessibility Review

    markmead/hyperui

    Run a WCAG 2.1 AA accessibility audit on a design or page. An agent skill from markmead/hyperui.

    12k GitHub starsUsed in 1 repo~1.1k tokens
    Frontend & DesignAuto-check passed
  • Web Animation Design

    baptisteArno/typebot.io

    Guides easing, timing and animation choices for UI motion, based on a web animation course, and reviews existing animations in a before-and-after table.

    11k GitHub starsUsed in 2 repos~2.7k tokens
    Frontend & DesignAuto-check passed
  • Accessibility Fixer

    ibelick/ui-skills

    Audits and fixes HTML accessibility problems such as ARIA labels, keyboard navigation, focus management, contrast and form errors with minimal changes.

    9.4k GitHub starsUsed in 4 repos~1.2k tokens
    Frontend & DesignAuto-check passed
  • Wcag Audit Patterns

    vmDeshpande/ai-agent-automation

    Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance.

    178 GitHub starsUsed in 10 repos~610 tokens
    Frontend & DesignAuto-check passed
  • Baseline UI

    ibelick/ui-skills

    Applies a fixed set of UI rules for stack, components, interaction, animation, typography and layout, or reviews a file against them with concrete fixes.

    9.4k GitHub starsUsed in 8 repos~855 tokens
    Frontend & DesignAuto-check passed

More from ancoleman/ai-design-components

All 75 skills in this repo
  • Building AI Chat

    ancoleman/ai-design-components

    Builds AI chat interfaces and conversational UI with streaming responses, context management, and multi-modal support.

    526 GitHub starsUsed in 1 repo~3.4k tokens
    Auto-check passed
  • Building Forms

    ancoleman/ai-design-components

    Builds form components and data collection interfaces including contact forms, registration flows, checkout processes, surveys, and settings pages.

    526 GitHub stars~3.7k tokensUpdated 10 mo ago
    Auto-check passed
  • Building Tables

    ancoleman/ai-design-components

    Builds tables and data grids for displaying tabular information, from simple HTML tables to complex enterprise data grids.

    526 GitHub stars~1.8k tokensUpdated 10 mo ago
    Auto-check passed
  • Creating Dashboards

    ancoleman/ai-design-components

    Creates comprehensive dashboard and analytics interfaces that combine data visualization, KPI cards, real-time updates, and interactive layouts.

    526 GitHub stars~3.5k tokensUpdated 10 mo ago
    Auto-check passed
  • Designing Layouts

    ancoleman/ai-design-components

    Designs layout systems and responsive interfaces including grid systems, flexbox patterns, sidebar layouts, and responsive breakpoints.

    526 GitHub stars~1.7k tokensUpdated 10 mo ago
    Auto-check passed
  • Displaying Timelines

    ancoleman/ai-design-components

    Displays chronological events and activity through timelines, activity feeds, Gantt charts, and calendar interfaces.

    526 GitHub stars~2.7k tokensUpdated 10 mo ago
    Auto-check passed

Questions about Guiding Users

What does Guiding Users do?

Implements onboarding and help systems including product tours, interactive tutorials, tooltips, checklists, help panels, and progressive disclosure patterns. Guiding Users is an agent skill from ancoleman/ai-design-components. Implements onboarding and help systems including product tours, interactive tutorials, tooltips, checklists, help panels, and progressive disclosure patterns.

When should I use Guiding Users?

Guiding Users fits situations like: building first-time experiences; feature discovery; guided walkthroughs; contextual help.

How do I install Guiding Users in Claude Code?

Run `npx skills add ancoleman/ai-design-components --skill guiding-users -a claude-code`. Or copy the skill folder (skills/guiding-users in ancoleman/ai-design-components) into .claude/skills/guiding-users in your project. Claude Code loads it when a task matches its description.

How do I install Guiding Users in Codex?

Run `npx skills add ancoleman/ai-design-components --skill guiding-users -a codex`. Or copy the skill folder (skills/guiding-users in ancoleman/ai-design-components) into .agents/skills/guiding-users in your project. Codex loads it when a task matches its description.

Can I use Guiding Users in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ancoleman/ai-design-components --skill guiding-users -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/guiding-users, .gemini/skills/guiding-users, .github/skills/guiding-users and .opencode/skills/guiding-users in your project.

What does Guiding Users need to run?

Going by SKILL.md and its folder, Guiding Users needs the command-line tools its instructions call (npm, node and python). Our summary lists: Python 3; Node.js.

Does Guiding Users access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Guiding Users safe to install?

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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Guiding Users use?

Guiding Users is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Guiding Users use?

About 3.5k tokens (SKILL.md is roughly 14k 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 4.3k tokens, read only when the agent opens those files.

What are the alternatives to Guiding Users?

Skills that share tags, products or a category with Guiding Users: Web Interface Guidelines Reviewer (vercel-labs/openreview, 1.7k stars), Accessibility Review (markmead/hyperui, 12k stars), Web Animation Design (baptisteArno/typebot.io, 11k stars) and Accessibility Fixer (ibelick/ui-skills, 9.4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Guiding Users?

ancoleman (a GitHub user) maintains it in ancoleman/ai-design-components, which has 526 GitHub stars. The repository holds 75 skills in this directory. The repository was last updated on December 11, 2025.

Source: ancoleman/ai-design-components on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.