search-ux — Claude Code skill: design the search experience
Guides the agent through search design: query input, suggestions, filters, results and the empty state. Useful when people retrieve instead of browse.
npx skills add Owl-Listener/designer-skills --skill search-ux -a claude-codeWhat search-ux does
The skill puts the agent in the role of a search interface designer. It walks the whole path: what the input field looks like, what shows up in autocomplete, how results are laid out, and how the states with and without matches differ. One section covers search-as-navigation, where someone types "settings" or "my profile" to get somewhere rather than find something.
The rules are concrete. Start suggestions after 2–3 characters, keep them to 5–8, bold the typed portion, support keyboard navigation. Results come in three layouts: list, grid, and grouped by content type. Filters should match the current result set, with counts next to each value.
The zero-results state gets the most attention. The skill asks for the query to be echoed back, a typo correction, broader terms, and alternatives such as categories. Analytics are covered too: top queries, zero-results queries, refinement rate, click position. It is meant to sit alongside navigation-patterns, which handles browse structure — for a purely navigational layout, install both.
What it helps with
- design a search field with a descriptive placeholder and a reset button
- set up autocomplete with recent and popular queries
- turn a zero-results page into something that keeps people around
- pick between list, grid and grouped result layouts
- read query logs to find content gaps
Example prompts for the agent
- Design search for a product catalog: input field, autocomplete and a list of results
- The user typed a misspelled query and got nothing — what should the screen show?
- Add filters to the results page with counts for each value
How to install search-ux
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill search-ux -a claude-code2Manually: put the files in place
~/.claude/skills/search-ux/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/search-ux/
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill search-ux -a codex2Manually: put the files in place
.agents/skills/search-ux/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill search-ux -a cursor2Manually: put the files in place
.cursor/skills/search-ux/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills search-ux2Manually: put the files in place
.github/skills/search-ux/SKILL.md1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill search-ux -a gemini-cli2Platform CLI
gemini skills install https://github.com/Owl-Listener/designer-skills --path interaction-design/skills/search-uxManually: put the files in place
.devin/skills/search-ux/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill search-ux -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about search-ux
How do I install search-ux in Claude?
Run npx skills add Owl-Listener/designer-skills --skill search-ux -a claude-code. The skill lands in ~/.claude/skills/search-ux/SKILL.md.
What does search-ux do?
It lays out how to design a search interface: query input, suggestions, result layout, filters and the zero-results state. The agent follows those rules when you ask for search work.
How is search-ux different from navigation-patterns?
search-ux covers the case where a user retrieves something and gets a result. Browse and navigation structure belong to navigation-patterns, so the two complement each other on navigational queries.
Source text
SKILL.md · MIT
--- name: search-ux description: Design search — query input, zero results, refinement, and result presentation. Use when users retrieve rather than browse. For browse structure, use `navigation-patterns`. --- # 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
© Owl-Listener · MIT · Owl-Listener/designer-skills