search-filtering

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Search & Filtering

搜索与筛选

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

本Skill涵盖搜索与筛选模式——包括搜索用户体验（UX）、筛选类型、排序选项，以及筛选结果为空时的状态处理。

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

当以下情况时启用本Skill：

Agent 构建搜索界面
Agent 创建可筛选列表或表格
Agent 设计排序功能
Agent 处理搜索/筛选结果为空的情况

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

始终显示结果数量或“无结果”提示信息
始终提供清除筛选条件的选项
在会话期间始终保留筛选状态
对于小型数据集，优先使用即时搜索
对于可分享的筛选视图，优先使用URL参数

Common Agent Mistakes

Agent常见错误

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

✅ 正确示例

tsx

<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" />
)}

tsx

<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

❌ 错误示例

tsx

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

tsx

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

References

参考资料

Search UX

搜索UX