Agent skill

mobbin-ux

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.

View SKILL.md on GitHub Repository
Stars 19
Forks 1

Install this agent skill to your Project

npx add-skill https://github.com/rohunvora/cool-claude-skills/tree/main/skills/mobbin-ux

SKILL.md

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

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

rohunvora/cool-claude-skills

comment-mode

Granular feedback on drafts without rewriting. Generates highlighted HTML with click-to-reveal inline comments. Use when user says "comment on this", "leave comments on", "give feedback on", or asks for feedback on a draft. Supports multiple lenses—editor feedback, POV simulation ("as brian would react"), or focused angles ("word choice only", "weak arguments"). A granular alternative to rewrites that lets users review feedback incrementally without losing their voice.

19 1
Explore
rohunvora/cool-claude-skills

ai-loading-ux

Design AI loading, thinking, and progress indicator UX. Use when explicitly asked to improve AI waiting states, add thinking indicators, or design loading UX for AI interfaces. Covers reasoning display (chain-of-thought), progress steps, streaming states, and the "elevator mirror effect" for reducing perceived wait time.

19 1
Explore
rohunvora/cool-claude-skills

arena-cli

CLI tools for Are.na: export blocks, enrich with vision AI, generate views. Use when: (1) exporting Are.na blocks incrementally, (2) enriching images with AI-generated titles/tags/patterns, (3) generating browsable HTML views, (4) searching blocks by UI patterns or tags, (5) visual search results when terminal output is insufficient. Triggers: "export arena", "enrich arena", "sync arena", "arena view", "search arena for [pattern]", "show me [pattern]".

19 1
Explore
rohunvora/cool-claude-skills

unified-messages

Cross-platform messaging aggregator. Use as DEFAULT when user does NOT specify a platform (telegram/imessage). Provides unified inbox, search, and triage across both platforms. Triggers: "check messages" (no platform), "inbox", "who messaged me", "all my messages", "triage". NOT for platform- specific requests - use tg-ingest for "telegram X" or imsg-ingest for "imessage X".

19 1
Explore
rohunvora/cool-claude-skills

imsg-ingest

Primary iMessage interface. Full-featured CLI for message export, conversation management, contact resolution, and thread state. Use when user mentions "imessage", "imsg", "text message", "iphone messages", or phone numbers. Triggers: "imessage messages", "export imessage", "text from john", "imessage contacts", "sync imessage". This is STANDALONE - do not defer to unified-messages for iMessage operations.

19 1
Explore
rohunvora/cool-claude-skills

html-style

Apply opinionated styling to barebones HTML. Use when user has plain/unstyled HTML and wants to apply consistent visual styling. Triggers: style this HTML, apply styling, make this look good, /html-style, or when user shares HTML that needs CSS. Transforms tables, lists, status indicators, buttons, and layouts into a cohesive design system.

19 1
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results