onboard

Designs onboarding flows, empty states, and first-time user experiences for web products.

Updated Jul 21, 2026
One-click install
npx skills add https://github.com/masakinihirota/2026src-ni --skill onboard-masakinihirota
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: onboard
Source: https://github.com/masakinihirota/2026src-ni/tree/main/.agents/skills/onboard
Command: npx skills add https://github.com/masakinihirota/2026src-ni --skill onboard-masakinihirota

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? New users often abandon products because they never reach the moment where the product's value becomes clear. This Skill helps you design onboarding flows, empty states, guided tours, and contextual tooltips that get users to their "aha moment" quickly without overwhelming them. ## Core Features & Use Cases - Onboarding Flow Design: Create welcome screens, account setup steps, and first-success experiences with progressive disclosure and skip options. - Empty State Patterns: Turn blank screens into teaching moments with clear value propositions, CTAs, and templates for first-use, no-results, and error states. - Feature Discovery: Design contextual tooltips, feature announcements, and guided tours using libraries like Intro.js, Shepherd.js, or React Joyride, with localStorage-based completion tracking. - Use Case: Your analytics show users sign up but never create their first project. Use this Skill to design an empty state with a template option and a 3-step interactive walkthrough that guides users to their first completed project. ## Quick Start Use the onboard skill to design an onboarding flow for new users of my project management app, including the welcome screen, empty states, and a short guided tour.

Frequently Asked Questions about onboard

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

FAQPage Schema
How do I design an onboarding flow for a new web app?▼

Start by identifying the aha moment you want users to reach, then design a welcome screen, minimal account setup, and a first-success action using progressive disclosure. Teach only the 20% of features that deliver 80% of value, and always provide a skip option.

What should an empty state include in a web app?▼

An empty state should explain what will appear there, why it matters, and how to get started with a clear CTA or template option. Add an illustration for visual interest and a contextual help link such as a short tutorial.

Which JavaScript libraries work for product tours and tooltips?▼

Intro.js, Shepherd.js, and React Joyride are common choices for guided tours, while Tippy.js and Popper.js handle tooltips. Keep tours to 3-7 steps, spotlight specific UI elements, and make them dismissable and replayable.

How do I prevent onboarding from showing repeatedly to returning users?▼

Track completion and dismissal states in localStorage, such as an onboarding-completed flag or per-feature tooltip-seen keys. Check these flags before rendering any onboarding UI so returning users never see the same flow twice.

When should I avoid using a guided product tour?▼

Avoid tours for simple interfaces where contextual tooltips or empty states suffice, and never block the entire UI or force users through long sequences. Tours fit best for complex interfaces, major redesigns, or domain-specific tools.