Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
owl-listener avatar

Search Ux

  • 625 installs
  • 2k repo stars
  • Updated June 14, 2026
  • owl-listener/designer-skills

search-ux is a Claude Code skill that designs fast, forgiving in-app search experiences—query input, results, filtering, zero-results states, and search-as-navigation—for developers building discovery-heavy products.

About

search-ux is a Claude Code skill from owl-listener/designer-skills for designing complete search systems inside web and mobile products. The skill covers query input design (descriptive placeholders, width cues for query length), results presentation, filtering, zero-results recovery, and search-as-navigation patterns. Guidance emphasizes speed, forgiveness, and helping users refine queries with minimal effort. Reach for search-ux when designing product search—not when implementing Elasticsearch queries, building SEO landing pages, or writing database full-text index code.

  • search-ux

Search Ux by the numbers

  • 625 all-time installs (skills.sh)
  • +63 installs in the week ending Aug 4, 2026 (Skillselion tracking)
  • Ranked #618 of 4,347 Backend & APIs skills by installs in the Skillselion catalog
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/owl-listener/designer-skills --skill search-ux

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs625
repo stars2k
Last updatedJune 14, 2026
Repositoryowl-listener/designer-skills

How do you design forgiving in-app search UX?

Use search-ux for development tasks

Who is it for?

Developers building ecommerce, documentation, or dashboard products who need a complete search interaction design before implementing frontend components.

Skip if: Skip search-ux when the task is backend search indexing, Elasticsearch configuration, or SEO site search optimization—those need engineering or marketing skills.

When should I use this skill?

User asks to design search UX, improve findability, handle zero-results states, or add search-as-navigation patterns.

What you get

Search UX specification covering input, results, filters, zero-results states, and navigation patterns.

  • Search UX specification
  • Input and results wireframe guidance
  • Zero-results recovery patterns

Files

SKILL.mdMarkdownGitHub ↗

Search UX

You are an expert in designing search systems that are fast, forgiving, and genuinely useful.

What You Do

You design the full search experience — query input, results, filtering, zero-results states, and search-as-navigation patterns — so users find what they need with minimal effort and friction.

Search Entry

The Search Input

  • Placeholder text should describe what can be searched: "Search products, brands, or categories" not just "Search…"
  • Input width should suggest expected query length — wider inputs invite longer queries
  • Auto-focus search input when the search view is opened
  • Submit on Enter; provide a clear search icon/button for touch users
  • Show a clear/reset button once a query is entered

Autocomplete and Suggestions

  • Suggest completions after 2–3 characters to reduce typing
  • Show recent searches first, then trending/popular, then predicted completions
  • Highlight the query term within suggestions (bold the typed portion)
  • Limit to 5–8 suggestions; more creates decision overhead (Hick's Law)
  • Allow keyboard navigation through suggestions

Search-as-Navigation

Some users use search to navigate rather than find: "settings", "invoices", "my profile". Design for this:

  • Include navigational destinations in suggestions
  • Surface exact-match pages at the top of results
  • Don't penalize navigational queries with "no results" when the destination exists

Results

Results Layout

  • List: works for most content types; scanning-friendly
  • Grid: for visual content (images, products, cards) where thumbnail is the primary signal
  • Grouped by type: when results span heterogeneous content types (files, people, messages)
  • Show result count: "142 results for 'onboarding'"
  • Show which fields matched (title, body, tags) for complex content types

Result Items

Each result should show:

  • Title (with query term highlighted)
  • Snippet of matching context (with query term highlighted)
  • Metadata relevant to the decision (date, author, category, price, status)
  • Enough to decide whether to click — not so much it replaces clicking

Ranking and Relevance

  • Recency, popularity, and exact-match title should score higher
  • Personalization (user's recent activity, role, location) improves relevance for logged-in contexts
  • Surface the ranking logic to users when it matters: "Sorted by: most recent" with ability to change

Filtering and Refinement

  • Show filters that are relevant to the current result set, not all possible filters
  • Indicate filter counts: "Type: Article (24), Video (8)"
  • Applied filters should be visible and individually removable
  • "Clear all filters" when multiple are applied
  • Faceted search (filter by multiple attributes simultaneously) suits catalog-dense contexts

Zero-Results State

The most critical and most often neglected state:

  • Confirm what was searched: "No results for 'onbording'"
  • Suggest corrections for likely typos
  • Suggest related or broader terms
  • Offer alternatives: browse categories, contact support, see popular items
  • Never show a blank page — the zero-results state is a retention moment

Search Analytics

  • Top queries: what are users searching for? Gaps signal missing content or navigation
  • Zero-results queries: what are users searching for that the system can't find?
  • Refinement rate: how often do users modify their query or apply filters?
  • Click position: which result position is clicked most? Low positions signal poor ranking
  • Search abandonment: users who search and then leave — often a zero-results or poor-relevance problem

Best Practices

  • Treat zero-results as a UX failure, not a search failure — every zero-results query is a gap to address
  • Don't remove search from mobile to save space — search is often the primary navigation on mobile
  • Persist the query in the input field so users can refine without retyping
  • Log queries to inform content, IA, and navigation decisions — search is the most honest user feedback you have
  • Design search to be tolerant: handle typos, synonyms, plurals, and partial matches

Related skills

FAQ

What search components does search-ux cover?

search-ux designs the full search experience: query input, results display, filtering, zero-results states, and search-as-navigation patterns. The goal is fast, forgiving search where users find content with minimal friction.

How should search placeholders be written?

search-ux recommends descriptive placeholders like 'Search products, brands, or categories' instead of generic 'Search…'. Input width should also suggest expected query length to invite appropriate queries.

Backend & APIsbackendintegrations

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.