table-filters

The table-filters skill is designed to help software agents create intuitive and highly functional filtering systems for data-heavy applications. When tasked with building a data table, this skill analyzes individual data columns to determine the most effective filtering mechanism—whether it be free-text search, checkbox-based category filtering, numeric range sliders, or date-range pickers. By implementing a standardized, unified filter bar that resides above the table, it ensures that users can perform complex queries without cluttering the UI or header row. The output includes semantic HTML structured with specific classes that are fully compatible with the html-style skill, allowing for a seamless transition from functional layout to polished design.

• Automatically maps column data patterns (text, boolean, numeric, dates) to optimized filter components.

• Implements a unified filter layout featuring chip-based state management, clear-all functionality, and sort controls.

• Supports complex user interactions such as multi-select checkbox filters, date range inputs, and range sliders.

• Outputs clean, semantic HTML following established component patterns, ready for styling or direct integration into web-based agents.

• Provides a responsive empty state UI to handle zero-result scenarios gracefully with clear reset actions.

• When working on front-end generation, identify the table structure first to allow this skill to map the columns accurately.

• Use the provided class names like .filter-bar, .filter-chips, and .filter-menu to maintain styling consistency across your application.

• Combine this skill with the html-style skill as a final step to ensure the generated components match your project's design system.

• The skill treats filter menus as floating components that appear above the table to ensure optimal visibility and layout integrity.

• Designed for use in scenarios where users need to manipulate large datasets within a browser-based agent interface, improving overall data accessibility and developer productivity.