Can I use this for mobile-responsive tables?

Yes, the design rules emphasize a unified filter field and chip-based interaction model which are highly adaptable to both desktop and mobile responsive layouts.

How does the Table Filters skill determine which filter to use?

It analyzes the data pattern of each column, mapping text to 'Contains' search fields, finite lists to checkboxes, and numbers or dates to range selectors.

What happens when no results match the active filters?

The skill includes a dedicated 'Empty State' UX pattern that features a visual placeholder and a clear 'Clear All Filters' action to help users reset their search.

Does this skill provide CSS styling?

The skill generates semantic HTML and standardized class names designed to work perfectly with the html-style skill for rapid visual skinning.

Table Filter Designer

Name: Table Filter Designer
Author: shipshitdev

byshipshitdev

•

Design Tools

Designs high-conversion data table filtering systems by automatically mapping column types to optimal UI components.

The Table Filters skill automates the complex task of designing user-friendly data table interfaces by analyzing your data structure and generating optimal filtering patterns. It intelligently selects between text search, multi-select checkboxes, numeric ranges, date pickers, and toggles based on column content. This skill ensures a unified user experience with interactive chips, integrated sorting mechanisms, and a clean empty-state architecture, significantly reducing the time required to build professional-grade dashboards and data-heavy applications.

Key Features

01Pre-designed component patterns for text, range, checkbox, and date filters

02Automated data column analysis and filter type mapping

03Standardized HTML/CSS class generation for consistent frontend styling

04Unified filter bar design with interactive chips and integrated search

05Built-in UX logic for sorting dropdowns and filter-to-chip conversion

0610 GitHub stars

Use Cases

01Building administrative dashboards with complex searchable data sets

02Designing e-commerce product catalogs with dynamic attribute filtering

03Developing SaaS reporting tools requiring advanced data drill-down capabilities

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add shipshitdev/library table-filters

For use in Claude.ai and ChatGPT

Download Skill