Use this skill whenever the user mentions SaaS, dashboard, web application, app interface, onboarding, notifications, settings page, empty states, sidebar navigation, command palette, user retention, feature adoption, or any application interface where users log in and perform tasks repeatedly. Also use when designing or reviewing any authenticated web app — even if the user doesn't say "SaaS". If it has a sidebar, a dashboard, or user settings, this skill applies.
From ux-expertnpx claudepluginhub williamfontaine/claude-plugins-marketplace --plugin ux-expertThis skill uses the workspace's default tool permissions.
references/data-display.mdreferences/navigation-patterns.mdreferences/onboarding.mdGuides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Details PluginEval's skill quality evaluation: 3 layers (static, LLM judge), 10 dimensions, rubrics, formulas, anti-patterns, badges. Use to interpret scores, improve triggering, calibrate thresholds.
This skill provides a complete framework for designing, evaluating, and optimizing SaaS application interfaces. It covers navigation architecture, onboarding flows, dashboard layouts, data display, notification systems, settings pages, and the UX metrics that drive SaaS retention and growth.
Apply these principles to any web application whose primary purpose is delivering ongoing software value to users -- including B2B tools, productivity apps, internal platforms, analytics products, and collaboration software.
Select the navigation pattern based on product complexity and usage context:
| Condition | Pattern | Rationale |
|---|---|---|
| 5-15+ sections, deep hierarchy, frequent tab-switching | Left sidebar | Vertical scanning is faster; accommodates growth; remains visible during scroll |
| Fewer than 7 primary sections, content-focused product | Top navigation | Takes approximately 6% of screen real estate vs. 15-20% for sidebar; cleaner for simple structures |
| Enterprise platform with multiple modules, each with deep features | Hybrid (top + side) | Top bar for module switching, sidebar for feature-level navigation within active module |
| Power users performing repetitive actions across many pages | Command palette (Cmd+K) | 10x faster than menu navigation; improves power user retention by 40%+ |
The collapsible left sidebar is the dominant SaaS navigation pattern, used by Slack, Notion, Linear, and Asana.
Full navigation reference with breadcrumbs, tabs, mobile patterns, and audit checklists: see
references/navigation-patterns.md
Track these five metrics to measure the health of a SaaS application's user experience:
Measure the duration from signup to first meaningful outcome. Target under 3 minutes for the core activation event. Under 15 minutes yields 4-5x improved Day 7 retention compared to over 24 hours.
| TTV Range | Assessment |
|---|---|
| Under 15 minutes | Excellent |
| 15-60 minutes | Good for most products |
| 1-24 hours | Acceptable for complex products only |
| Over 24 hours | High abandonment risk |
Track the percentage of signups who reach the "aha moment." Target 60%+ for excellent performance. Every 1% increase in activation correlates with roughly 2% lower churn. Non-activated users retain at only 10-20% by Day 30, while activated users retain at 60-80%.
Measure unique users of a feature divided by total active users. Target 60%+ for core features and 20%+ for advanced features. Track breadth (how many use it), depth (how frequently), and time to adopt (how long after signup).
Target 90%+ for core tasks. Below 80% indicates significant usability issues. Define critical user tasks, track completion, abandonment, and error rates, and use funnel analysis to identify drop-off points.
Track form validation errors per session, failed action attempts, rage clicks (multiple rapid clicks on the same element), and support tickets containing "how do I" questions. Every error is a design opportunity -- map errors to UI elements and prioritize redesign by frequency and severity.
40-60% of SaaS users who sign up never return after their first login. Strong onboarding reduces 30-day churn from 15-20% to 7-10%.
Get users to the core value ("aha moment") within 3 minutes or 3 steps. Interactive walkthroughs where users perform real actions cut time-to-value by 40% compared to passive tours.
Ask 1-2 questions about role or intent upfront to customize the onboarding path. Personalized onboarding lifts 7-day retention by approximately 35%. Never exceed 3 personalization questions.
Display a visible onboarding checklist with 5-7 items. Show progress (3/5 completed). Pre-complete the first task to create momentum (endowed progress effect). Persist the checklist across sessions. Mix required and optional tasks. Checklists with visible progress bars increase completion rates by 20-30%.
Design every empty state as an onboarding opportunity. Include an explanation of what appears in the area, a clear CTA button, and an optional illustration or sample data. Handle three types: first-use empty (no data yet), user-cleared empty (all tasks done), and error empty (something failed).
Always allow users to skip or dismiss onboarding. Power users want to explore independently. Provide "Skip for now" or "I'll do this later" on every step. Make onboarding re-accessible from help menus.
Full onboarding reference with setup wizards, skeleton screens, recovery sequences, and measurement frameworks: see
references/onboarding.md
Place the North Star Metric in the top-left position (highest attention zone in F-pattern scanning). Limit primary dashboards to 5-7 core metrics. Apply the 5-Second Test: users must grasp key insights within 5 seconds.
Each KPI card must include:
| Data Type | Best Chart | Constraint |
|---|---|---|
| Trends over time | Line chart | Limit to 2-3 lines maximum |
| Category comparison | Bar chart | Sort by value; Y-axis starts at zero |
| Parts of a whole | Donut chart | Maximum 5 slices; avoid pie charts with 6+ categories |
| Precise values | Data table | Include sorting, filtering, pagination |
| Single metrics | Large number card | Always include comparison context |
Make every notification specific and actionable. "Sarah approved your design" outperforms "Update: status changed." Batch related notifications into summaries. Provide per-category notification preferences with channel controls (in-app, email, push). Place the notification bell icon in the top-right with an unread count badge.
Organize settings into clear categories: Profile/Account, Billing, Team/Permissions, Notifications, Integrations, Security, and a visually separated Danger Zone at the bottom. Use a left sidebar or vertical tab navigation within settings. Apply consistent save behavior throughout -- either auto-save with visual confirmation or explicit Save button, never both in the same product.
Full data display reference with dashboard layouts, visualization rules, settings patterns, notification design, and loading states: see
references/data-display.md
Flag these issues as high-severity problems in any SaaS application audit:
For detailed, audit-ready content on each topic, consult:
| File | Contents |
|---|---|
references/navigation-patterns.md | Sidebar navigation, top navigation, command palettes, breadcrumbs, tabs, mobile navigation, grouping and hierarchy with checkable audit items |
references/onboarding.md | Time-to-value optimization, checklists, personalization, walkthroughs, empty states, skeleton screens, and measurement metrics with checkable audit items |
references/data-display.md | Dashboard layouts, KPI cards, chart selection, settings pages, notification systems, loading states, and error/success feedback with checkable audit items |