npx skills add https://github.com/shipshitdev/library --skill table-filters当用户构建需要筛选功能的表格时,分析各列并设计筛选交互体验。
针对表格中的每一列,确定其筛选类型:
| 数据模式 | 筛选类型 | 示例列 |
|---|---|---|
| 自由文本、名称、描述 | 包含 | 产品名称、备注、客户 |
| 固定值集合(<20 个选项) | 复选框 | 状态、类别、优先级、类型 |
| 数值 | 范围 | 价格、数量、年龄、分数 |
| 日期 | 日期范围 | 创建时间、更新时间、截止日期 |
| 布尔值 | 开关 | 活跃、已验证、已发布 |
┌─────────────────────────────────────────────────────────┐
│ [筛选标签在此...] [🔍 筛选或搜索...] [✕] │ ← 统一的筛选字段
└─────────────────────────────────────────────────────────┘
排序方式: [下拉菜单 ▾]
┌──────────────┬──────────────┬──────────────┬──────────────┐
│ 名称 ▼ │ 状态 ▼ │ 价格 ▼ │ 创建时间 ▼ │ ← 带筛选图标的可点击表头
├──────────────┼──────────────┼──────────────┼──────────────┤
│ ... │ ... │ ... │ ... │
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
关键布局规则:
┌─ 产品名称 ──────────── ✕ ─┐
│ ┌────────────────────────────┐│
│ │ 搜索... ││
│ └────────────────────────────┘│
└───────────────────────────────┘
标签结果:产品名称: system
┌─ 状态 ──────────────── ✕ ─┐
│ ☑ 活跃 │
│ ☑ 待处理 │
│ ☐ 已归档 │
│ ☐ 已删除 │
│ [清除] [应用] │
└──────────────────────────────┘
标签结果:状态: 活跃, 待处理 或 状态: 活跃, +2
┌─ 价格 ─────────────────── ✕ ─┐
│ 最小值 最大值 │
│ ┌─────┐ ┌─────┐ │
│ │ 0 │ - │ 100 │ │
│ └─────┘ └─────┘ │
│ ○───────────────●─────○ │ ← 可选滑块
│ [应用] │
└───────────────────────────────┘
标签结果:价格: $0 - $100
┌─ 创建时间 ─────────────────── ✕ ─┐
│ 起始 结束 │
│ ┌──────────┐ ┌──────────┐ │
│ │ 01/01/25 │ - │ 12/31/25 │ │
│ └──────────┘ └──────────┘ │
│ [今天] [本周] [本月]│
│ [应用] │
└─────────────────────────────────┘
标签结果:创建时间: 2025年1月1日 - 2025年12月31日
状态: 活跃, 待处理, +3当筛选未返回结果时:
┌─────────────┐
│ (╯°□°)╯ │
│ ︵ ┻━┻ │
└─────────────┘
未找到结果
请尝试调整筛选条件
[清除所有筛选器]
实现时请验证:
使用这些类以确保与 html-style 的样式兼容性:
| 元素 | 类名 | 用途 |
|---|---|---|
| 筛选容器 | .filter-bar | 顶层的筛选行 |
| 标签容器 | .filter-chips | 容纳所有活动标签 |
| 单个标签 | .chip | 单个筛选标签 |
| 标签移除按钮 | .chip-remove | 标签上的 X 按钮 |
| 搜索输入框 | .filter-search | 文本搜索字段 |
| 清除所有 | .filter-clear | 清除所有筛选器按钮 |
| 排序控件 | .sort-control | 排序下拉菜单容器 |
| 筛选菜单 | .filter-menu | 下拉筛选面板 |
| 空状态 | .empty-state | 无结果容器 |
数据属性:
data-column — 标签上的列标识符data-filter-type — 筛选类型(contains/checkbox/range/date)此技能输出带有类名的语义化 HTML。如需视觉样式,请在生成筛选 HTML 后调用 html-style 技能。
每周安装量
83
代码仓库
GitHub 星标数
19
首次出现
2026年1月20日
安全审计
安装于
codex63
opencode60
claude-code59
gemini-cli58
cursor55
github-copilot49
When the user is building a table that needs filters, analyze the columns and design the filtering UX.
For each column in the table, determine the filter type:
| Data Pattern | Filter Type | Example Columns |
|---|---|---|
| Free text, names, descriptions | Contains | Product Name, Notes, Customer |
| Fixed set of values (<20 options) | Checkboxes | Status, Category, Priority, Type |
| Numeric values | Range | Price, Quantity, Age, Score |
| Dates | Date Range | Created, Updated, Due Date |
| Boolean | Toggle | Active, Verified, Published |
┌─────────────────────────────────────────────────────────┐
│ [Filter chips go here...] [🔍 Filter or search...] [✕] │ ← Unified filter field
└─────────────────────────────────────────────────────────┘
Sort by: [Dropdown ▾]
┌──────────────┬──────────────┬──────────────┬──────────────┐
│ Name ▼ │ Status ▼ │ Price ▼ │ Created ▼ │ ← Clickable headers with filter icon
├──────────────┼──────────────┼──────────────┼──────────────┤
│ ... │ ... │ ... │ ... │
Key layout rules:
┌─ Product Name ──────────── ✕ ─┐
│ ┌────────────────────────────┐│
│ │ Search... ││
│ └────────────────────────────┘│
└───────────────────────────────┘
Chip result: Product Name: system
┌─ Status ──────────────── ✕ ─┐
│ ☑ Active │
│ ☑ Pending │
│ ☐ Archived │
│ ☐ Deleted │
│ [Clear] [Apply] │
└──────────────────────────────┘
Chip result: Status: Active, Pending or Status: Active, +2
┌─ Price ─────────────────── ✕ ─┐
│ Min Max │
│ ┌─────┐ ┌─────┐ │
│ │ 0 │ - │ 100 │ │
│ └─────┘ └─────┘ │
│ ○───────────────●─────○ │ ← Optional slider
│ [Apply] │
└───────────────────────────────┘
Chip result: Price: $0 - $100
┌─ Created ─────────────────── ✕ ─┐
│ From To │
│ ┌──────────┐ ┌──────────┐ │
│ │ 01/01/25 │ - │ 12/31/25 │ │
│ └──────────┘ └──────────┘ │
│ [Today] [This week] [This month]│
│ [Apply] │
└─────────────────────────────────┘
Chip result: Created: Jan 1 - Dec 31, 2025
Status: Active, Pending, +3When filters return no results:
┌─────────────┐
│ (╯°□°)╯ │
│ ︵ ┻━┻ │
└─────────────┘
No results found
Try adjusting your filters
[Clear all filters]
When implementing, verify:
Use these classes for styling compatibility with html-style:
| Element | Class | Purpose |
|---|---|---|
| Filter container | .filter-bar | Top-level filter row |
| Chip container | .filter-chips | Holds all active chips |
| Individual chip | .chip | Single filter chip |
| Chip remove | .chip-remove | X button on chip |
| Search input | .filter-search | Text search field |
Data attributes:
data-column — Column identifier on chipsdata-filter-type — Filter type (contains/checkbox/range/date)This skill outputs semantic HTML with class names. For visual styling, invoke the html-style skill after generating filter HTML.
Weekly Installs
83
Repository
GitHub Stars
19
First Seen
Jan 20, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex63
opencode60
claude-code59
gemini-cli58
cursor55
github-copilot49
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
118,000 周安装
| Clear all | .filter-clear | Clear all filters button |
| Sort control | .sort-control | Sort dropdown container |
| Filter menu | .filter-menu | Dropdown filter panel |
| Empty state | .empty-state | No results container |