MCPInstall

search-ux

Design search — query input, zero results, refinement, and result presentation. Use when users retrieve rather than browse. For browse structure, use navigation-patterns.

Installs
1.8K
Last 24h
+22
Trending rank
#5542
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/owl-listener/designer-skills --skill search-ux
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads search-ux automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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

FAQ

What does the search-ux skill do?

Design search — query input, zero results, refinement, and result presentation. Use when users retrieve rather than browse. For browse structure, use navigation-patterns.

How do I install search-ux?

Run npx skills add https://github.com/owl-listener/designer-skills --skill search-ux in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/search-ux/ (personal) or .claude/skills/search-ux/ (project).

Which AI agents can use search-ux?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is search-ux safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains search-ux?

It is published by owl-listener in owl-listener/designer-skills. It has 1,779 recorded installs.

More from owl-listener/designer-skills

View all →

presentation-deck

owl-listener/designer-skills

Structure a design presentation for a specific audience and decision. Use when presenting internally. For a portfolio narrative use case-study; for the written argument use design-rationale.

Docs & Writing3.1K installs

typography-scale

owl-listener/designer-skills

Create a modular type scale with size, weight, and line-height relationships. Use when establishing typographic structure. For line length only use readable-measure; for judging type on an existing screen use critique-typography (visual-critique).

Frontend & Design2.6K installs

illustration-style

owl-listener/designer-skills

Define an illustration style guide — visual language, colour usage, and application rules. Use when commissioning or standardising illustration. For icons, use icon-system (design-systems).

Media & Creative2.6K installs

visual-hierarchy

owl-listener/designer-skills

Establish hierarchy through size, weight, colour, spacing, and position so the eye lands in the intended order. Use when composing new work. For judging an existing screen, use critique-visual-hierarchy (visual-critique).

Frontend & Design2.5K installs

color-system

owl-listener/designer-skills

Build a product colour system — tonal scales, semantic roles, and contrast compliance. Use when defining or rebuilding colour from scratch. For dark-mode adaptation use dark-mode-design; for chart palettes use data-visualization; for multi-brand token architecture use theming-system (design-systems).

Frontend & Design2.5K installs

dark-mode-design

owl-listener/designer-skills

Adapt an existing palette to dark mode — surface elevation, contrast rebalancing, and desaturation rules. Use when you already have a light palette to translate. For building the base palette first, use color-system.

Frontend & Design2.5K installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs