list-search-box

What problem does it solve?

React list pages often lack search functionality, forcing users to manually scan through rows of data to find specific items. This Skill provides a standardized, production-ready pattern for adding client-side search boxes with proper empty states, responsive layouts, and accessibility features to any React list view.

Core Features & Use Cases

• Client-side filtering: Instant search using the useMemo hook over data and query dependencies with no server roundtrip for lists of 10-50 rows.
• Two-layer empty states: Distinguishes between raw empty (no data exists) and filter empty (search returned no results) for clearer user feedback.
• Responsive header layouts: Supports three variants—default single-row with create button, two-column sidebar (WikiTab pattern), and upload-bar-adjacent (AttachmentsTab pattern).
• Standalone page retirement: Includes a 3-step checklist for removing dedicated list pages when search replaces them, covering route removal, back-link updates, and E2E test deprecation.

Quick Start

Use the list-search-box skill to add a search input with client-side title filtering and two-layer empty states to the React list page at src/pages/ProjectsPage.tsx.