playbooks

home / skills / rohunvora / cool-claude-skills / mobbin-ux

mobbin-ux skill

/skills/mobbin-ux

This skill discovers Mobbin UX patterns, generates a design spec for approval, then implements research-backed interfaces.

npx playbooks add skill rohunvora/cool-claude-skills --skill mobbin-ux

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
2.4 KB
---
name: mobbin-ux
description: >
  Research-driven UI/UX improvement using Mobbin. Use when user explicitly requests
  design pattern research ("use Mobbin", "research design patterns", "find UX patterns for X").
  Requires Mobbin account and browser automation (claude-in-chrome MCP). Searches Mobbin
  for relevant UI patterns, extracts design principles, generates a spec document for
  approval, then implements. NOT for general UI work—only when user wants research-backed design.
---

# Mobbin UX Research

Research UI/UX patterns on Mobbin, generate a design spec, then implement after approval.

## Workflow

### 1. Clarify the UI component

Ask what type of UI to research:
- "inbox", "dashboard", "settings", "onboarding", "checkout", "profile", etc.
- Platform: web or mobile (iOS/Android)

### 2. Search Mobbin

Use browser automation:

```
1. tabs_context_mcp → get/create tab
2. navigate → mobbin.com
3. Log in if needed (user handles auth)
4. navigate → mobbin.com/search/apps/{web|ios|android}?q={query}
5. screenshot → capture search results
6. Click 3-5 top results, screenshot key screens
```

Search tips:
- Component names: "inbox", "notification", "settings"
- Add qualifiers: "inbox email", "dashboard analytics"

### 3. Extract design patterns

From screenshots, identify:

**Layout:** Column structure, sidebar placement, content organization

**Visual hierarchy:** Typography, colors, spacing, theme (light/dark)

**Interactions:** Hover states, action buttons, progress indicators

**Navigation:** Tabs, filtering, view switching

### 4. Generate design spec

Create spec with `/quick-view`:

```markdown
## Design Patterns for [Component]

**Sources:** [App1], [App2], [App3] via Mobbin

### Layout
- [Pattern]: [Why it works]

### Visual Hierarchy
- [Pattern]: [Why it works]

### Interactions
- [Pattern]: [Why it works]

### Recommended Changes
1. [Specific change]
2. [Specific change]
```

### 5. Get approval

Ask user: "Should I implement these patterns? Any to skip or modify?"

### 6. Implement

After approval, rebuild UI following the spec.

## Example searches

| UI Type | Query |
|---------|-------|
| Email inbox | `inbox email` |
| Task list | `todo inbox` |
| Dashboard | `dashboard analytics` |
| Settings | `settings preferences` |

## Reference apps

- **Inbox:** Superhuman, Spark, Twist
- **Tasks:** Linear, Asana, Todoist
- **Dashboards:** Stripe, Notion, Figma

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.

FAQ

Do you need my Mobbin credentials?

I require a logged-in Mobbin session to access examples. You can authenticate in the automated browser; I don’t store or transmit credentials outside the session.

Can this be used for general UI work?

No. This skill is strictly for research-driven work that explicitly requests Mobbin-sourced patterns. For general UI or wireframing, request a different design task.

How many examples do you inspect?

I typically capture 3–5 top results for the query to identify consistent patterns while avoiding noise.

Will you implement changes automatically?

I will only implement after you review and approve the generated design spec. Implementation follows the approved spec.