nazim-filters

Enforce standardized filter panels and state patterns for Nazim list pages.

Updated Nov 15, 2025
One-click install
npx skills add https://github.com/AHMADJAN-New/nazim-web --skill nazim-filters
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nazim-filters
Source: https://github.com/AHMADJAN-New/nazim-web/tree/main/.cursor/skills/nazim-filters
Command: npx skills add https://github.com/AHMADJAN-New/nazim-web --skill nazim-filters

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures a consistent and user-friendly experience for filtering data across Nazim's list and report pages, making it easier for users to find the information they need.

Core Features & Use Cases

  • Unified Filter Panel: Provides a collapsible filter panel component (FilterPanel) for desktop and mobile views.
  • State Management: Manages filter states (search, status, dates, etc.) using React's useState hook.
  • Query Integration: Seamlessly integrates filter states into API requests and query keys for dynamic data fetching.
  • Use Case: When viewing a list of students, use the filter panel to quickly narrow down results by status, school, or a specific date range.

Quick Start

Apply the nazim-filters skill to implement a filter panel for the student list page.

Frequently Asked Questions about nazim-filters

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I manage React state for UI filter panels?

Manage React state for UI filter panels by standardizing search, status, and date range inputs. This approach uses React's useState hook to persist filter states and synchronize them directly into API query parameters for dynamic data retrieval.

What is the best way to standardize data filtering across multiple list pages?

Standardize data filtering across multiple list pages by enforcing a unified filter panel component. This ensures a consistent user experience for narrowing down report results by dynamically mapping filter states to API requests.

Can I integrate filter state directly into API query parameters for dynamic data fetching?

Yes, you can integrate filter state directly into API query parameters. This skill connects React state management with API requests, allowing dynamic data fetching and query key updates whenever users apply search or dropdown filters.

How do I implement a collapsible filter panel for desktop and mobile views?

Implement a collapsible filter panel for desktop and mobile views using a unified FilterPanel component. This component manages search inputs, dropdowns, and date ranges while maintaining consistent filter state persistence across different screen sizes.

Does nazim-filters work without external state management dependencies?

Yes, nazim-filters works without external state management dependencies. It relies entirely on React's built-in useState hook to manage search, status, and date filter states, requiring no additional libraries to persist and synchronize filter data.