Search: AI Skill for UX Design

Search is an AI skill that designs the whole search journey: input, suggestions, results, and refinement. It never leaves users on a dead-end no-results page.

npx skills add Uxcel-Lab/product-skills --skill ux-search

Copied

What this skill does

Helps an AI assistant design the full search journey: formulate, suggest, results, and refine, with no dead ends.

Establishes how users seek, known-item or exploratory, and how central search is.
Places a visible search field where users look for it, on every page.
Adds auto-suggest capped at ten entries, plus recent searches for re-finding.
Keeps the query visible and editable on the results page, with a match count.
Blocks dead ends: every no-results page offers a way forward.
Sets up filters, sorting, and chips that match the content.
Uses skeleton screens so loading feels like progress.

When to use it

Use it when you need an AI assistant to:

design search for a product or site;
add auto-suggest to a search bar;
fix a results page users abandon;
design a no-results page;
lay out filters and sorting;
choose list or grid views for results;
adapt search for mobile.

Decisions this skill helps you make

Decision	Options
Rich auto-suggest	Thumbnails and previews for visual goods; plain query suggestions elsewhere
Trending searches	Discovery-driven products only; noise in task tools
Mobile search	Persistent bar in search-first apps; expandable icon elsewhere
Filters	5 to 7 visible, most-used first, the rest behind "More filters"
Filter layout	Vertical sidebar for many groups on desktop; a Filter button on mobile
Auto-update vs. Apply	Auto-update when results load fast; Apply with a match count when they don't
Sorting	A separate, visible control; never merged into the filter panel
List vs. grid	List for spec comparison; grid for visual goods; toggle for mixed content