From shipshitdev-library
Designs optimal filtering UX for data tables by analyzing column types and selecting best filters: contains for text, checkboxes for categories, ranges for numbers/dates, toggles for booleans. Outputs unified chip field and header menus.
npx claudepluginhub shipshitdev/skillsThis skill uses the workspace's default tool permissions.
When the user is building a table that needs filters, analyze the columns and design the filtering UX.
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Analyzes competition with Porter's Five Forces, Blue Ocean Strategy, and positioning maps to identify differentiation opportunities and market positioning for startups and pitches.
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 |
| 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.