OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add shipshitdev/skills --skill table-filters
Designs filtering UX for data tables: picks a filter type per column and builds a unified filter field with inline header filters. Use when building a table that needs filters.
npx skills add shipshitdev/skills --skill table-filters
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 |
Key layout rules:
Chip result: Product Name: system
Chip result: Status: Active, Pending or Status: Active, +2
Chip result: Price: $0 - $100
Chip result: Created: Jan 1 - Dec 31, 2025
Status: Active, Pending, +3When filters return no results:
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 |
| 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 |
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.
┌─ Product Name ──────────── ✕ ─┐
│ ┌────────────────────────────┐│
│ │ Search... ││
│ └────────────────────────────┘│
└───────────────────────────────┘┌─ Status ──────────────── ✕ ─┐
│ ☑ Active │
│ ☑ Pending │
│ ☐ Archived │
│ ☐ Deleted │
│ [Clear] [Apply] │
└──────────────────────────────┘┌─ Price ─────────────────── ✕ ─┐
│ Min Max │
│ ┌─────┐ ┌─────┐ │
│ │ 0 │ - │ 100 │ │
│ └─────┘ └─────┘ │
│ ○───────────────●─────○ │ ← Optional slider
│ [Apply] │
└───────────────────────────────┘┌─ Created ─────────────────── ✕ ─┐
│ From To │
│ ┌──────────┐ ┌──────────┐ │
│ │ 01/01/25 │ - │ 12/31/25 │ │
│ └──────────┘ └──────────┘ │
│ [Today] [This week] [This month]│
│ [Apply] │
└─────────────────────────────────┘ ┌─────────────┐
│ (╯°□°)╯ │
│ ︵ ┻━┻ │
└─────────────┘
No results found
Try adjusting your filters
[Clear all filters]