onboarding-ux

Audits web apps for onboarding gaps and generates empty states, tours, and help content.

1|Updated Aug 18, 2026
One-click install
npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill onboarding-ux-scsm-unrestrict
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: onboarding-ux
Source: https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent/tree/main/frontend-engineer/skills/onboarding-ux
Command: npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill onboarding-ux-scsm-unrestrict

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? New users often open a web app and face empty tables, unexplained labels, and no guidance on where to start. This Skill audits a running app for onboarding gaps and then generates the actual components, copy, and content needed to fix them. ## Core Features & Use Cases - Onboarding Gap Audit: Browses the app as a new user to evaluate empty states, first impressions, feature discoverability, and contextual help, producing a structured audit report. - Guidance Component Generation: Creates empty state components, welcome banners, onboarding checklists, feature tour configurations, tooltips, and dismissable contextual hints matched to the project's existing component patterns. - Content Production: Generates tooltip copy maps, FAQ help pages, and realistic seed data that teaches users what good data looks like. - Use Case: After shipping a dashboard app, run this Skill to find that the clients page shows a bare empty table, then receive a ready-to-integrate empty state component with CTA copy and a getting-started checklist. ## Quick Start Audit my running app for onboarding gaps and generate empty states, a welcome banner, and a feature tour for new users.

Frequently Asked Questions about onboarding-ux

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

FAQPage Schema
How do I improve the new user onboarding experience in my web app?

Run an onboarding audit that browses your app as a new user, checking empty states, first impressions, and feature discoverability. Then generate empty state components, welcome banners, and feature tours matched to your existing component library.

How to create empty state components for React apps?

Generate an EmptyState component with an icon, title, description, and CTA button, then write specific copy for each page explaining what the feature does and what action to take next. Match the project's existing patterns such as shadcn/ui components.

What tools are needed to audit onboarding UX in a running app?

The audit requires a browser automation tool: Chrome MCP, Playwright MCP, or playwright-cli. It navigates the deployed or local app URL, evaluating each page for guidance gaps and producing a structured audit report.

How long should a product feature tour be?

Feature tours should be a maximum of five steps to avoid annoying users. Configure tours with react-joyride or an equivalent library, targeting elements via data-tour attributes added to existing components.

What is the difference between ux-audit and onboarding-ux skills?

ux-audit finds usability problems across the app, while onboarding-ux builds the solutions: empty states, welcome flows, tooltips, and help content. Running ux-audit first provides findings that onboarding-ux uses as input.