skills.rest
AkaraChen
AkaraChenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

onboard

Designs onboarding flows, empty states, and first-run experiences for product interfaces.

Updated Apr 4, 2026
Search Tags:#onboarding#product design#empty states#tooltips#user activation#first-run experience#guided tour
One-click install
npx skills add https://github.com/AkaraChen/proxy-up --skill onboard-akarachen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: onboard
Source: https://github.com/AkaraChen/proxy-up/tree/main/.agents/skills/onboard
Command: npx skills add https://github.com/AkaraChen/proxy-up --skill onboard-akarachen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? New users often abandon products before reaching value because onboarding is confusing, too long, or disconnected from the real interface. This Skill provides structured guidance for designing onboarding experiences that get users to their "aha moment" quickly. ## Core Features & Use Cases - Onboarding Flow Design: Create welcome screens, account setup flows, and core concept introductions with progressive disclosure. - Empty State Design: Turn blank screens into actionable starting points with clear value propositions, CTAs, and templates. - Guided Tours & Tooltips: Plan contextual tooltips, feature announcements, and interactive walkthroughs using libraries like Intro.js, Shepherd.js, or React Joyride. - Use Case: A team notices high drop-off during signup. Use this Skill to audit the first-run experience, design a 3-step onboarding flow with a skippable tour, and create empty states that drive users to create their first project. ## Quick Start Ask the AI to design an onboarding flow for your product's first-time users, including empty states and a skippable 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 new users?▼

Start by identifying the aha moment users must reach, then build a welcome screen, minimal account setup, and a guided first success with 1-3 core concepts. Always include a skip option and use progressive disclosure instead of teaching everything upfront.

What makes a good empty state design?▼

A good empty state explains 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 handle guided tours with step-by-step spotlights, while Tippy.js and Popper.js power contextual tooltips. Keep tours to 3-7 steps, make them dismissable, and let users replay them from a help menu.

How do I prevent showing the same onboarding twice?▼

Track completion and dismissal state in localStorage, for example setting onboarding-completed or per-feature tooltip flags. Check these flags before rendering any tour or tooltip so returning users never see repeated onboarding.

When should I use an interactive tutorial instead of a guided tour?▼

Use interactive tutorials when users need hands-on practice with complex or high-stakes concepts in a sandbox with sample data. Use guided tours for simpler feature discovery where spotlighting real UI elements is enough.

Related Skills

Explore More Design & Creative Skills→
bfree-trainerbfree-trainer
60

teach-impeccable

Capture project design context and persist it to AI configuration.

Official
Intermediate
tanaka-mambingetanaka-mambinge

onboard

Design onboarding flows with empty states, guided tours, and success metrics.

Community
Advanced
TheycallmehollaTheycallmeholla

ux-audit

Audit product flows by reconstructing user journeys to identify friction and drop-off points.

Community
Advanced
indigoai-usindigoai-us

onboard

Design onboarding flows for web and mobile interfaces.

Official
Intermediate