skills.rest
alongor666
alongor666COMMUNITY
Explore all skills by this author →
GitHub

user-guidance-flows

Create onboarding flows, tooltips, and help text for Vue 3 applications.

1|Updated Nov 4, 2025
Search Tags:#onboarding#UX#user guidance#tooltips#help text#feature introduction#Vue 3
One-click install
npx skills add https://github.com/alongor666/daylyreport --skill user-guidance-flows
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: user-guidance-flows
Source: https://github.com/alongor666/daylyreport/tree/main/.claude/skills/user-guidance-flows
Command: npx skills add https://github.com/alongor666/daylyreport --skill user-guidance-flows

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides templates and best practices for implementing user guidance systems in Vue 3 applications, including onboarding flows, tooltips, feature highlights, and help panels. It enhances user experience by making complex features easy to understand and navigate.

Core Features & Use Cases

  • Onboarding Flow: Guides first-time users through key features with a multi-step modal, tracking completion via localStorage.
  • Tooltip Component: Offers inline, contextual help for UI elements, improving discoverability and reducing confusion.
  • Feature Highlights: Introduces new functionalities with targeted, dismissible highlights.
  • Help Panel & Shortcuts: Provides an expandable panel for detailed help and documents keyboard shortcuts for power users.
  • Use Case: A new feature is launched on the dashboard. This skill can be used to create a feature highlight that points to the new element, explaining its benefits and guiding users on how to use it effectively.

Quick Start

Implement a 3-step onboarding flow for new users, introducing the main dashboard features.

Frequently Asked Questions about user-guidance-flows

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an onboarding flow for new Vue 3 users?▼

Build a multi-step onboarding flow using Vue 3 components that guides first-time users through key features. This Skill provides modal templates, localStorage-based completion tracking, and step-by-step workflows to introduce dashboard functionality without overwhelming new users.

Can I add tooltips and help text to Vue 3 components?▼

Yes. Implement inline, contextual tooltips as Vue 3 components that appear on hover or focus. This Skill includes reusable tooltip templates with positioning, accessibility support, and multi-language localization for reducing UI friction and improving feature discoverability.

What's the best way to highlight new features in Vue 3 applications?▼

Use feature highlights—dismissible, targeted overlays that point to new UI elements with explanations. This Skill provides highlight components, persistence logic to track which features users have seen, and templates for launching feature introductions without disrupting the user workflow.

How do I track whether users have completed onboarding in Vue 3?▼

Store onboarding completion state in localStorage and bind it to Vue 3 component logic. This Skill includes persistence patterns that detect returning users, skip completed steps, and conditionally display guidance, allowing seamless multi-session onboarding management.

Does this support keyboard shortcuts and accessibility for Vue 3?▼

Yes. This Skill includes accessible tooltip and modal components with ARIA attributes, keyboard navigation support, and a help panel documenting shortcuts for power users. All components follow accessibility best practices for inclusive Vue 3 applications.

Can I localize onboarding messages and help text in Vue 3?▼

Yes. The Skill supports multi-language onboarding flows, tooltips, and help panels through localization-ready component props. Extract text into locale files and bind them to components to serve guidance in users' preferred languages.

Related Skills

Explore More Design & Creative Skills→
skilld-devskilld-dev
174

shadcn-vue-skilld

Guide shadcn-vue component integration and debugging in Vue projects.

Official
Intermediate
pwv-vcpwv-vc
6

user-segmentation

Segment users into behavioral cohorts using engagement, feature usage, and value signals.

Official
Advanced
Nick777-PixelNick777-Pixel

modal

Create imperative modal dialogs with createModal from @lobehub/ui.

Community
Advanced
SL-A-SHSL-A-SH

onboard

Designs product onboarding flows with assessments, templates, and implementation guidance.

Community
Intermediate