implementing-search-filter

Implement search and filter interfaces with comprehensive frontend components and backend query optimization.

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.

ينفذ واجهات البحث والتصفية لكل من الواجهة الأمامية (React/TypeScript) والواجهة الخلفية (Python) مع الارتداد وإدارة الاستعلام وتكامل قاعدة البيانات. يُستخدم عند إضافة وظيفة البحث، أو إنشاء واجهات مستخدم للتصفية، أو تنفيذ البحث متعدد الأوجه، أو تحسين أداء البحث. المصدر: ancoleman/ai-design-components.

افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/ancoleman/ai-design-components --skill implementing-search-filter بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw