Search ux
Search interface design, autocomplete, filters, results display, and zero-results handling.From its SKILL.md
npx -y skills add Dragoon0x/everything-design-taste --skill search-uxAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 9 stars9 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
1.2 KB, 245 tokens by cl100k_base, as published. Nobody here has run it
Search Ux
Search Input
- Prominent placement. Top of page or header bar.
- Placeholder text: specific to content. "Search products..." not "Search..."
- Magnifying glass icon inside or beside the input.
- Clear button appears when text is entered.
- Keyboard shortcut (Cmd+K or /) for power users.
Autocomplete
- Show suggestions after 2-3 characters.
- Debounce: 200-300ms after last keystroke.
- Categorize results (Products, Articles, Users).
- Highlight the matching text in suggestions.
- Recent searches above suggestions.
- Max 7-10 suggestions visible.
Results Page
- Show result count. "42 results for 'design systems'"
- Snippet/preview for each result with query terms highlighted.
- Sort options: Relevance (default), Date, Popularity.
- Filters: sidebar on desktop, drawer on mobile.
Zero Results
Never show just "No results found." Always provide:
- Spelling suggestions ("Did you mean...?")
- Related categories or tags
- Popular/trending content
- Clear search and browse option
- Contact support link if appropriate
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.