Stats
Actions
Tags
From ui-ux
Battle-tested UX patterns from real products (Stripe, Duolingo, Airbnb, Notion, Monzo, etc.) — covering onboarding, activation, checkout, retention, error recovery, and psychology-driven design. Based on patterns documented by Built for Mars, Page Flows, and production case studies.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ui-ux:production-ux-playbookThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Patterns that ship in real products. Not theory — proven implementations from companies that have tested these with millions of users.
Patterns that ship in real products. Not theory — proven implementations from companies that have tested these with millions of users.
Don't ask for everything upfront. Collect information gradually as users need features that require it. Duolingo asks language preference → skill level → daily goal across separate, focused screens. Each step feels like progress, not a form.
The product IS the onboarding. Instead of a tutorial, show the empty product with inline prompts: "Create your first project" as a prominent CTA inside the empty project list. The interface teaches by inviting action, not showing slides.
Show 4-6 setup tasks as a checklist with progress. Key patterns:
Ask "What will you use this for?" early, then customize the entire experience: different dashboards, different onboarding steps, different empty states. One product, multiple tailored journeys.
Get the user to the "aha!" moment as fast as possible. Spotify: hear your first personalized playlist within 2 minutes. Dropbox: see a file sync across devices. Design the shortest path to demonstrating core value.
Don't just show the product — walk the user through creating their first thing. Canva opens a design immediately. Linear creates a sample project. The user has accomplished something within 60 seconds.
Pre-populate with realistic example content so the product looks alive, not empty. A sample project with tasks, a demo dashboard with charts, a template library with popular options. Users understand the product by seeing it in use.
Contextual tooltips and hints that appear when relevant, not before. "Tip: You can drag to reorder" appears when the user hovers near a draggable area — not during a tutorial.
Start with core features visible. Reveal advanced features as users demonstrate readiness: after their 5th project, show the template creator. After their first collaboration, show permission settings. Don't overwhelm new users with power-user features.
Place social proof exactly where anxiety peaks:
Show the premium tier first. Display savings as "Save 20%" not "Pay $8 less." Show monthly vs. annual with the annual savings highlighted. The first price a user sees anchors their expectations (Cognitive Bias: Anchoring).
Pre-select the most popular or recommended option. "Most popular" badge on the middle pricing tier. Pre-filled form fields where data can be inferred. Default to the simplest option with advanced settings expandable.
Visual streak counters create commitment. GitHub's contribution graph, Duolingo's flame icon. Key: make breaking the streak feel like a loss (Loss Aversion), but offer streak freezes/repairs to prevent rage-quitting.
Show users how much they've done and how much more they could do. LinkedIn's "Profile Strength" meter. Grammarly's weekly writing report. Progress creates motivation to continue.
"Here's what you missed" summaries. Personalized recommendations based on past behavior. "Continue where you left off" for interrupted flows (Zeigarnik Effect).
Validate as the user types, not on submit. Show green checkmarks for valid fields. Red border + specific message for invalid: "Email must include @" not "Invalid input." Clear the error as soon as the user starts correcting.
When something fails, preserve user's work:
Show the result immediately, sync in background. Like count updates instantly on tap. Card moves to new column on drop. If the server rejects it, smoothly revert with an explanation. Feels fast because it IS fast from the user's perspective.
"12 people are viewing this right now." "Only 3 left at this price." Place scarcity and social proof at decision points, not randomly. The pattern works because of Bandwagon Effect + Loss Aversion.
Give generous free access, then show what premium unlocks when users hit natural limits. The free tier creates gratitude and investment. When users hit the paywall, they're already committed.
Let users customize/create before asking them to pay. Once they've invested time building something (a design, a workspace, a playlist), they value it more and are more willing to pay to keep it.
Start with easy, low-commitment asks. Each yes makes the next yes easier. "What's your name?" → "What's your goal?" → "Create your account" → "Invite your team." The sequence of small commitments builds toward larger ones.
npx claudepluginhub connorbell133/ui-ux-plugins --plugin ui-uxCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.