Search & Filtering

This skill covers search and filter patterns — search UX, filter types, sort options, and empty states for filtered results.

Use-When

This skill activates when:

• •Agent builds search interfaces
• •Agent creates filterable lists or tables
• •Agent designs sort functionality
• •Agent handles empty search/filter results

Core Rules

• •ALWAYS show results count or "no results" message
• •ALWAYS allow clearing filters
• •ALWAYS maintain filter state during session
• •PREFER instant search for small datasets
• •PREFER URL params for shareable filtered views

Common Agent Mistakes

• •No feedback for empty results
• •Filters that can't be cleared
• •No indication of active filters
• •Search that only triggers on submit (when instant is better)

Examples

✅ Correct

<SearchInput 
  value={query} 
  onChange={setQuery}
  placeholder="Search items..."
/>

<div className="flex gap-2">
  <FilterChip active={filter === 'all'} onClick={() => setFilter('all')}>
    All
  </FilterChip>
  <FilterChip active={filter === 'active'} onClick={() => setFilter('active')}>
    Active
  </FilterChip>
</div>

{results.length === 0 && (
  <EmptyState message="No results found" />
)}

❌ Wrong

<input placeholder="Search" />
{/* No feedback when empty */}

References

• •Search UX