implementing-search-filter
This Claude Code skill provides production-ready patterns for implementing search and filtering functionality across frontend and backend systems. It covers React/TypeScript components for search inputs, autocomplete, and filter UIs, along with Python backend patterns using SQLAlchemy and Elasticsearch for query optimization. Use when building product search with filters, implementing autocomplete functionality, creating faceted search interfaces, optimizing search performance with debouncing, or integrating full-text search capabilities into applications.
git clone --depth 1 https://github.com/ancoleman/ai-design-components /tmp/implementing-search-filter && cp -r /tmp/implementing-search-filter/skills/implementing-search-filter ~/.claude/skills/implementing-search-filterSKILL.md
# Search & Filter Implementation Implement search and filter interfaces with comprehensive frontend components and backend query optimization. ## Purpose This skill provides production-ready patterns for implementing search and filtering functionality across the full stack. It covers React/TypeScript components for the frontend (search inputs, filter UIs, autocomplete) and Python patterns for the backend (SQLAlchemy queries, Elasticsearch integration, API design). The skill emphasizes performance optimization, accessibility, and user experience. ## When to Use - Building product search with category and price filters - Implementing autocomplete/typeahead search - Creating faceted search interfaces with dynamic counts - Adding search to data tables or lists - Building advanced boolean search for power users - Implementing backend search with SQLAlchemy or Django ORM - Integrating Elasticsearch for full-text search - Optimizing search performance with debouncing and caching - Creating accessible search experiences ## Core Components ### Frontend Search Patterns **Search Input with Debouncing** - Implement 300ms debounce for performance - Show loading states during search - Clear button (X) for resetting - Keyboard shortcuts (Cmd/Ctrl+K) - See `references/search-input-patterns.md` **Autocomplete/Typeahead** - Suggestion dropdown with keyboard navigation - Highlight matched text in suggestions - Recent searches and popular items - Prevent request flooding with debouncing - See `references/autocomplete-patterns.md` **Filter UI Components** - Checkbox filters for multi-select - Range sliders for numerical values - Dropdown filters for single selection - Filter chips showing active selections - See `references/filter-ui-patterns.md` ### Backend Query Patterns **Database Query Building** - Dynamic query construction with SQLAlchemy - Django ORM filter chaining - Index optimization for search columns - Full-text search in PostgreSQL - See `references/database-querying.md` **Elasticsearch Integration** - Document indexing strategies - Query DSL for complex searches - Faceted aggregations - Relevance scoring and boosting - See `references/elasticsearch-integration.md` **API Design** - RESTful search endpoints - Query parameter validation - Pagination with cursor/offset - Response caching strategies - See `references/api-design.md` ## Implementation Workflows ### Client-Side Search (<1000 items) 1. Load data into memory 2. Implement filter functions in JavaScript 3. Apply debounced search on text input 4. Update results instantly 5. Maintain filter state in React ### Server-Side Search (>1000 items) 1. Design search API endpoint 2. Validate and sanitize query parameters 3. Build database query dynamically 4. Apply pagination 5. Return results with metadata 6. Cache frequent queries ### Hybrid Approach 1. Use client-side filtering for immediate feedback 2. Fetch server results in background 3. Merge and deduplicate results 4. Update UI progressively 5. Cache recent searches locally ## Performance Optimization ### Frontend Optimization **Debouncing Implementation** - Use `debounce` from lodash or custom implementation - Cancel pending requests on new input - Show skeleton loaders during fetch - Script: `scripts/debounce_calculator.js` **Query Parameter Management** - Sync filters with URL for shareable searches - Use React Router or Next.js for URL state - Compress complex queries - See `references/query-parameter-management.md` ### Backend Optimization **Query Optimization** - Create appropriate database indexes - Use query analyzers to identify bottlenecks - Implement query result caching - Script: `scripts/generate_filter_query.py` **Validation & Security** - Sanitize all search inputs - Prevent SQL injection - Rate limit search endpoints - Script: `scripts/validate_search_params.py` ## Accessibility Requirements ### ARIA Patterns - Use `role="search"` for search regions - Implement `aria-live` for result updates - Provide clear labels for filters - Support keyboard-only navigation ### Keyboard Support - Tab through all interactive elements - Arrow keys for autocomplete navigation - Escape to close dropdowns - Enter to select/submit ## Technology Stack ### Frontend Libraries **Primary: Downshift (Autocomplete)** - Accessible autocomplete primitives - Headless/unstyled for flexibility - WAI-ARIA compliant - Install: `npm install downshift` **Alternative: React Select** - Full-featured select/filter component - Built-in async search - Multi-select support ### Backend Technologies **Python/SQLAlchemy** - Dynamic query building - Relationship loading optimization - Query result pagination **Python/Django** - Django Filter backend - Django REST Framework filters - Full-text search with PostgreSQL **Elasticsearch (Python)** - elasticsearch-py client - elasticsearch-dsl for query building ## Bundled Resources ### References - `references/search-input-patterns.md` - Input implementations - `references/autocomplete-patterns.md` - Typeahead patterns - `references/filter-ui-patterns.md` - Filter components - `references/database-querying.md` - SQL query patterns - `references/elasticsearch-integration.md` - Elasticsearch setup - `references/api-design.md` - API endpoint patterns - `references/performance-optimization.md` - Performance tips - `references/library-comparison.md` - Library evaluation ### Scripts - `scripts/generate_filter_query.py` - Build SQL/ES queries - `scripts/validate_search_params.py` - Validate inputs - `scripts/debounce_calculator.js` - Calculate debounce timing ### Examples - `examples/product-search.tsx` - E-commerce search - `examples/autocomplete-search.tsx` - Autocomplete implementation - `examples/sqlalchemy_search.py` - SQLAlchemy patterns - `examples/fastapi_search.py` - FastAPI search endpoint - `examples/django_filter_backend.py` - Django filters ### Assets - `assets/filter-config-schema.json` - Filter configuration - `assets/searc
Manage Linux systems covering systemd services, process management, filesystems, networking, performance tuning, and troubleshooting. Use when deploying applications, optimizing server performance, diagnosing production issues, or managing users and security on Linux servers.
Data pipelines, feature stores, and embedding generation for AI/ML systems. Use when building RAG pipelines, ML feature serving, or data transformations. Covers feature stores (Feast, Tecton), embedding pipelines, chunking strategies, orchestration (Dagster, Prefect, Airflow), dbt transformations, data versioning (LakeFS), and experiment tracking (MLflow, W&B).
Strategic guidance for designing modern data platforms, covering storage paradigms (data lake, warehouse, lakehouse), modeling approaches (dimensional, normalized, data vault, wide tables), data mesh principles, and medallion architecture patterns. Use when architecting data platforms, choosing between centralized vs decentralized patterns, selecting table formats (Iceberg, Delta Lake), or designing data governance frameworks.
Design cloud network architectures with VPC patterns, subnet strategies, zero trust principles, and hybrid connectivity. Use when planning VPC topology, implementing multi-cloud networking, or establishing secure network segmentation for cloud workloads.
Design comprehensive security architectures using defense-in-depth, zero trust principles, threat modeling (STRIDE, PASTA), and control frameworks (NIST CSF, CIS Controls, ISO 27001). Use when designing security for new systems, auditing existing architectures, or establishing security governance programs.
Assembles component outputs from AI Design Components skills into unified, production-ready component systems with validated token integration, proper import chains, and framework-specific scaffolding. Use as the capstone skill after running theming, layout, dashboard, data-viz, or feedback skills to wire components into working React/Next.js, Python, or Rust projects.
Builds AI chat interfaces and conversational UI with streaming responses, context management, and multi-modal support. Use when creating ChatGPT-style interfaces, AI assistants, code copilots, or conversational agents. Handles streaming text, token limits, regeneration, feedback loops, tool usage visualization, and AI-specific error patterns. Provides battle-tested components from leading AI products with accessibility and performance built in.
Constructs secure, efficient CI/CD pipelines with supply chain security (SLSA), monorepo optimization, caching strategies, and parallelization patterns for GitHub Actions, GitLab CI, and Argo Workflows. Use when setting up automated testing, building, or deployment workflows.