Jarvis Setup
ethanplusai/jarvis
A skill your agent uses when helping someone install, configure, or debug a fresh clone of JARVIS (this repo) — especially "the mic doesn't work", "JARVIS says his language systems are down", any…
Implements search and filter interfaces for both frontend (React/TypeScript) and backend (Python) with debouncing, query management, and database integration.
Install Implementing Search Filter
$ npx skills add ancoleman/ai-design-components --skill implementing-search-filter -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install ancoleman/ai-design-components implementing-search-filter --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/ancoleman/ai-design-components.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/implementing-search-filter .claude/skills/implementing-search-filter && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "implementing-search-filter" agent skill from https://github.com/ancoleman/ai-design-components/tree/main/skills/implementing-search-filter into .claude/skills/implementing-search-filter/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "implementing-search-filter", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/ancoleman/ai-design-components/tree/main/skills/implementing-search-filterType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add ancoleman/ai-design-components --skill implementing-search-filter -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install ancoleman/ai-design-components implementing-search-filter --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ancoleman/ai-design-components.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/implementing-search-filter .agents/skills/implementing-search-filter && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "implementing-search-filter" agent skill from https://github.com/ancoleman/ai-design-components/tree/main/skills/implementing-search-filter into .agents/skills/implementing-search-filter/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "implementing-search-filter", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add ancoleman/ai-design-components --skill implementing-search-filter -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install ancoleman/ai-design-components implementing-search-filter --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ancoleman/ai-design-components.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/implementing-search-filter .cursor/skills/implementing-search-filter && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "implementing-search-filter" agent skill from https://github.com/ancoleman/ai-design-components/tree/main/skills/implementing-search-filter into .cursor/skills/implementing-search-filter/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "implementing-search-filter", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/ancoleman/ai-design-components.git --path skills/implementing-search-filter--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add ancoleman/ai-design-components --skill implementing-search-filter -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install ancoleman/ai-design-components implementing-search-filter --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ancoleman/ai-design-components.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/implementing-search-filter .gemini/skills/implementing-search-filter && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "implementing-search-filter" agent skill from https://github.com/ancoleman/ai-design-components/tree/main/skills/implementing-search-filter into .gemini/skills/implementing-search-filter/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "implementing-search-filter", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install ancoleman/ai-design-components implementing-search-filterInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add ancoleman/ai-design-components --skill implementing-search-filter -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/ancoleman/ai-design-components.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/implementing-search-filter .github/skills/implementing-search-filter && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "implementing-search-filter" agent skill from https://github.com/ancoleman/ai-design-components/tree/main/skills/implementing-search-filter into .github/skills/implementing-search-filter/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "implementing-search-filter", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add ancoleman/ai-design-components --skill implementing-search-filter -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install ancoleman/ai-design-components implementing-search-filter --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ancoleman/ai-design-components.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/implementing-search-filter .opencode/skills/implementing-search-filter && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "implementing-search-filter" agent skill from https://github.com/ancoleman/ai-design-components/tree/main/skills/implementing-search-filter into .opencode/skills/implementing-search-filter/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "implementing-search-filter", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
implementing-search-filter- GitHub stars
- 526
- Token cost
- ~1.6k tokens
- SKILL.md length
- 607 words
- Files
- 22 (incl. scripts, references, assets)
- Skills in repo
- 75
- Repo updated
- First seen
- Licence
- MIT
At a glance
Implements search and filter interfaces for both frontend (React/TypeScript) and backend (Python) with debouncing, query management, and database integration.
- Works in 5 steps: Load data into memory → Implement filter functions in JavaScript → Apply debounced search on text input → …
- Adding search functionality
- SKILL.md covers Purpose, When to Use, Core Components and Implementation Workflows, plus 4 more sections
- Runs Python scripts from its folder; calls npm
What it does
Implementing Search Filter is an agent skill from ancoleman/ai-design-components. Implements search and filter interfaces for both frontend (React/TypeScript) and backend (Python) with debouncing, query management, and database integration. Use when adding search functionality, building filter UIs, implementing faceted search, or optimizing search performance.
Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 24 other files, including scripts, reference files and assets (for example `assets/filter-config-schema.json`, `assets/search-api-spec.json` and `examples/django_filter_backend.py`).
It sits in Frontend & Design, covering Accessibility. It works with React, Python, TypeScript and Elasticsearch. The repository describes itself as: Comprehensive UI/UX and Backend component design skills for AI-assisted development with Claude. The licence is MIT.
When your agent uses it
- Adding search functionality
- Building filter UIs
- Implementing faceted search
- Optimizing search performance
Example prompts
- “Use the implementing-search-filter skill to implement search and filter interfaces for both frontend (React/TypeScript) and backend (Python) with…”
- “/implementing-search-filter”
Requirements
- Python 3
- Node.js
Workflow steps
5 steps, taken from the first numbered list in SKILL.md.
- Load data into memory
- Implement filter functions in JavaScript
- Apply debounced search on text input
- Update results instantly
- Maintain filter state in React
What it can do on your machine
Read from SKILL.md and the folder at commit 76551b7. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/ (Python, from the files we listed), which the agent can run.
Shell commands in SKILL.md call:
npm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Implementing Search Filter loads about 1.6k tokens when it runs, and up to ~39k if it reads all its reference files. Until then it costs about 77 tokens; SKILL.md has 607 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
The full file from ancoleman/ai-design-components at commit 76551b7, republished under its MIT licence (© ancoleman). 607 words, ~1,594 tokens.
Download SKILL.mdSave it as
.claude/skills/implementing-search-filter/SKILL.md (or your agent's skills folder). This skill also uses 21 other files; get the full folder from GitHub.- name
- implementing-search-filter
- description
- Implements search and filter interfaces for both frontend (React/TypeScript) and backend (Python) with debouncing, query management, and database integration. Use when adding search functionality, building filter UIs, implementing faceted search, or optimizing search performance.
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)
- Load data into memory
- Implement filter functions in JavaScript
- Apply debounced search on text input
- Update results instantly
- Maintain filter state in React
Server-Side Search (>1000 items)
- Design search API endpoint
- Validate and sanitize query parameters
- Build database query dynamically
- Apply pagination
- Return results with metadata
- Cache frequent queries
Hybrid Approach
- Use client-side filtering for immediate feedback
- Fetch server results in background
- Merge and deduplicate results
- Update UI progressively
- Cache recent searches locally
Performance Optimization
Show full SKILL.md (250 more words)Show less
Frontend Optimization
Debouncing Implementation
- Use
debouncefrom 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-livefor 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 implementationsreferences/autocomplete-patterns.md- Typeahead patternsreferences/filter-ui-patterns.md- Filter componentsreferences/database-querying.md- SQL query patternsreferences/elasticsearch-integration.md- Elasticsearch setupreferences/api-design.md- API endpoint patternsreferences/performance-optimization.md- Performance tipsreferences/library-comparison.md- Library evaluation
Scripts
scripts/generate_filter_query.py- Build SQL/ES queriesscripts/validate_search_params.py- Validate inputsscripts/debounce_calculator.js- Calculate debounce timing
Examples
examples/product-search.tsx- E-commerce searchexamples/autocomplete-search.tsx- Autocomplete implementationexamples/sqlalchemy_search.py- SQLAlchemy patternsexamples/fastapi_search.py- FastAPI search endpointexamples/django_filter_backend.py- Django filters
Assets
assets/filter-config-schema.json- Filter configurationassets/search-api-spec.json- OpenAPI specification
© ancoleman, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 21 other files (scripts, references, assets) in skills/implementing-search-filter of ancoleman/ai-design-components.
- SKILL.md
- assets/filter-config-schema.json
- assets/search-api-spec.json
- examples/autocomplete-search.tsx
- examples/django_filter_backend.py
- examples/fastapi_search.py
- examples/product-search.tsx
- examples/sqlalchemy_search.py
- outputs.yaml
- references/api-design.md
- references/autocomplete-patterns.md
- references/database-querying.md
- references/elasticsearch-integration.md
- references/filter-ui-patterns.md
- references/library-comparison.md
- references/performance-optimization.md
- references/query-parameter-management.md
- references/search-input-patterns.md
- … and 4 more
Open the folder on GitHubat commit 76551b7
Compare with similar skills
Implementing Search Filter next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Implementing Search Filter this skillancoleman/ai-design-components | 526 | — | ~1.6k | Automated safety check: Pass | MIT | |
| Jarvis Setupethanplusai/jarvis | 838 | — | ~2.5k | Automated safety check: Notes | Custom licence | |
| React Ariaintentui/laravel | 162 | 1 repos | ~3.9k | Automated safety check: Pass | Apache-2.0 | |
| React Code Reviewgiuseppe-trisciuoglio/developer-kit | 355 | — | ~2.6k | Automated safety check: Notes | MIT | |
| Instui Docsinstructure/instructure-ui | 482 | — | ~498 | Automated safety check: Pass | Custom licence | |
| Morphous CatalogAmeyanagi/morphos | 102 | — | ~2.1k | Automated safety check: Pass | Apache-2.0 |
Similar skills
React Aria
intentui/laravel
Build accessible UI components with React Aria Components. An agent skill from intentui/laravel.
React Code Review
giuseppe-trisciuoglio/developer-kit
Provides comprehensive code review capability for React applications, validates component architecture, hooks usage, React 19 patterns, state management, performance optimization, accessibility…
Instui Docs
instructure/instructure-ui
Look up authoritative Instructure UI (InstUI, @instructure/ui-) documentation — component APIs, props, theme variables, usage examples, and guides — by querying instructure.design's plaintext docs.
Morphous Catalog
Ameyanagi/morphos
Create or refresh Morphous website design-system/theme bundles from animal, insect, plant, landscape, mineral, weather, or other nature motifs.
Connect Component To Figma
dequelabs/cauldron
Add a Figma Code Connect (.figma.tsx) file for a Cauldron React component.
More from ancoleman/ai-design-components
All 75 skills in this repoBuilding AI Chat
ancoleman/ai-design-components
Builds AI chat interfaces and conversational UI with streaming responses, context management, and multi-modal support.
Building Forms
ancoleman/ai-design-components
Builds form components and data collection interfaces including contact forms, registration flows, checkout processes, surveys, and settings pages.
Building Tables
ancoleman/ai-design-components
Builds tables and data grids for displaying tabular information, from simple HTML tables to complex enterprise data grids.
Creating Dashboards
ancoleman/ai-design-components
Creates comprehensive dashboard and analytics interfaces that combine data visualization, KPI cards, real-time updates, and interactive layouts.
Designing Layouts
ancoleman/ai-design-components
Designs layout systems and responsive interfaces including grid systems, flexbox patterns, sidebar layouts, and responsive breakpoints.
Displaying Timelines
ancoleman/ai-design-components
Displays chronological events and activity through timelines, activity feeds, Gantt charts, and calendar interfaces.
Related
Categories
Questions about Implementing Search Filter
What does Implementing Search Filter do?
Implements search and filter interfaces for both frontend (React/TypeScript) and backend (Python) with debouncing, query management, and database integration. Implementing Search Filter is an agent skill from ancoleman/ai-design-components. Implements search and filter interfaces for both frontend (React/TypeScript) and backend (Python) with debouncing, query management, and database integration.
When should I use Implementing Search Filter?
Implementing Search Filter fits situations like: adding search functionality; building filter UIs; implementing faceted search; optimizing search performance.
How do I install Implementing Search Filter in Claude Code?
Run `npx skills add ancoleman/ai-design-components --skill implementing-search-filter -a claude-code`. Or copy the skill folder (skills/implementing-search-filter in ancoleman/ai-design-components) into .claude/skills/implementing-search-filter in your project. Claude Code loads it when a task matches its description.
How do I install Implementing Search Filter in Codex?
Run `npx skills add ancoleman/ai-design-components --skill implementing-search-filter -a codex`. Or copy the skill folder (skills/implementing-search-filter in ancoleman/ai-design-components) into .agents/skills/implementing-search-filter in your project. Codex loads it when a task matches its description.
Can I use Implementing Search Filter in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ancoleman/ai-design-components --skill implementing-search-filter -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/implementing-search-filter, .gemini/skills/implementing-search-filter, .github/skills/implementing-search-filter and .opencode/skills/implementing-search-filter in your project.
What does Implementing Search Filter need to run?
Going by SKILL.md and its folder, Implementing Search Filter needs Python for the scripts in its folder and the command-line tools its instructions call (npm). Our summary lists: Python 3; Node.js.
Does Implementing Search Filter access the network?
SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Implementing Search Filter safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Implementing Search Filter use?
Implementing Search Filter is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Implementing Search Filter use?
About 1.6k tokens (SKILL.md is roughly 6.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 38k tokens, read only when the agent opens those files.
What are the alternatives to Implementing Search Filter?
Skills that share tags, products or a category with Implementing Search Filter: Jarvis Setup (ethanplusai/jarvis, 838 stars), React Aria (intentui/laravel, 162 stars), React Code Review (giuseppe-trisciuoglio/developer-kit, 355 stars) and Instui Docs (instructure/instructure-ui, 482 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Implementing Search Filter?
ancoleman (a GitHub user) maintains it in ancoleman/ai-design-components, which has 526 GitHub stars. The repository holds 75 skills in this directory. The repository was last updated on December 11, 2025.
Source: ancoleman/ai-design-components on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.