mobbin-ux_skill

Overview

This skill performs research-driven UI/UX improvements by searching Mobbin for real product patterns, extracting design principles, and producing an implementable spec. It requires a Mobbin account and browser automation (claude-in-chrome MCP) and is only used when you explicitly request Mobbin-backed research. After you approve the spec, I implement the changes following the researched patterns.

How this skill works

I clarify the exact UI component and platform, then automate a Mobbin search to collect screenshots from top examples. From those examples I extract layout, visual hierarchy, interaction, and navigation patterns and synthesize them into a concise design spec. I request approval on the spec and, once confirmed, implement the design updates to match the agreed patterns.

When to use it

• When you explicitly request Mobbin-based research (phrases like “use Mobbin”, “research design patterns”, “find UX patterns for X”).
• When you need design decisions grounded in real-world product examples.
• When preparing a design spec before implementation to reduce iteration.
• For platform-specific pattern research (web, iOS, Android).
• When you can provide or log into a Mobbin account for browsing.

Best practices

• Be specific about the UI component and platform (e.g., “mobile inbox iOS” or “web dashboard”).
• Provide access to a Mobbin account or handle authentication in the browser session. I don’t bypass paywalls.
• Confirm which patterns to include or exclude during approval to avoid wasted implementation.
• Allow 3–5 representative examples per query for a balanced synthesis.
• Prefer goal-oriented queries (e.g., “checkout conversion” vs. just “checkout”) to surface relevant interactions.

Example use cases

• Research mobile onboarding patterns for a new iOS app and produce a spec for A/B testing.
• Collect dashboard analytics patterns from modern productivity tools and recommend layout changes for a web product.
• Analyze inbox and message list patterns to improve read/unread hierarchy and quick actions.
• Generate a component-level spec for a settings page (grouping, search, toggles) before engineering implementation.
• Compare checkout flows across apps to recommend friction-reduction changes and implement them.