Onboarding UX
Audit and generate in-app user guidance, onboarding flows, empty states, tooltips...
Install
npx skills add jezweb/claude-skills --skill onboarding-ux -g -a claude-code -y- Repository
- jezweb/claude-skills1.1k
- Category
- Design
- Updated
- 26d ago
- License
- MIT
- Context cost
- Mediumabout 2,910 tokens
- Runs scripts
- No, instructions only
What it does
Audit and generate in-app user guidance, onboarding flows, empty states, tooltips, feature tours, contextual help, defaults, and inline hints. Browses the app to find where new users would get stuck, then produces the actual content and code to fix it. Pairs with ux-audit: audit finds problems, this skill builds the solutions. Triggers: 'onboarding', 'help content', 'empty states', 'user guidance', 'first run experience', 'feature tour', 'app is confusing', 'new user experience', 'make the app welcoming'.
Onboarding UX
Audit a web app for onboarding gaps, then generate the in-app guidance to fix them. The goal: a new user should never stare at a blank screen wondering what to do.
The Problem This Solves
You've built the features. They work. But when a new user logs in for the first time, they see:
- Empty tables with column headers and nothing else
- Sidebars full of labels that mean nothing to them yet
- No indication of where to start or what the app is for
- Features they don't know exist because nothing points to them
This skill finds those gaps and produces the content and code to fill them.
Browser Tool Detection
Same as ux-audit, detect Chrome MCP, Playwright MCP, or playwright-cli. See ux-audit's browser-tools.md reference if needed.
URL Resolution
Same as ux-audit, prefer deployed/live URL over localhost. Check wrangler.jsonc, CLAUDE.md, or running dev server.
Workflow
Phase 1: Audit, Find the Gaps
Browse the app as a brand new user. On every page, evaluate:
Empty States
Navigate to every list/table/collection page. For each:
| Check | Good | Bad |
|---|---|---|
| What does a zero-data page show? | "No clients yet. Add your first client to get started." + CTA button | Empty table with column headers, or blank white space |
| Is there a clear action? | Button: "Add your first [thing]" | Nothing, user has to find the action in the nav or a menu |
| Does it explain the feature? | "Clients are the people and businesses you work with. Add one to start tracking your relationships." | Just an empty container |
| Is the empty state designed? | Illustration or icon, helpful copy, prominent CTA | Identical to the populated state minus the data |
First Impression
Log in as a new user (or clear state to simulate). Evaluate:
