skills.rest
Esdeveniments
EsdevenimentsOFFICIAL
Explore all skills by this author →
Website𝕏@esdeveniments_GitHub

filter-system-dev

Implement configuration-driven filter systems in config/filters.ts with FilterOperations.

2|Updated Apr 9, 2023
Search Tags:#testing#TypeScript#Next.js#filters#config-driven#URL parsing#FilterOperations
One-click install
npx skills add https://github.com/Esdeveniments/esdeveniments-frontend --skill filter-system-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: filter-system-dev
Source: https://github.com/Esdeveniments/esdeveniments-frontend/tree/main/.github/skills/filter-system-dev
Command: npx skills add https://github.com/Esdeveniments/esdeveniments-frontend --skill filter-system-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps developers understand and implement the configuration-driven filter system in the codebase.

Core Features & Use Cases

  • Guidance on editing config/filters.ts to add and manage filters
  • Instructions for understanding FilterOperations and how URL parsing/building syncs with the config
  • Validation and testing guidance for unit and E2E flows, plus examples

Quick Start

  1. Open config/filters.ts and review FILTER_CONFIGURATIONS
  2. Use the FilterOperations helper to inspect configurations and generate removal URLs
  3. Run unit tests for the filter system with yarn test test/filter-system.test.ts and, if needed, e2e tests with yarn test:e2e e2e/filters.flow.spec.ts

Frequently Asked Questions about filter-system-dev

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

FAQPage Schema
How do I build a config-driven filter system in Next.js?▼

A config-driven filter system uses a central configuration file like config/filters.ts as a single source of truth. You define filter rules there, and the system automatically handles URL parsing and building to keep the UI and URL parameters synced.

How do I add a new filter to my TypeScript web application?▼

To add a new filter, edit the FILTER_CONFIGURATIONS in config/filters.ts. You must understand the FilterOperations helper to ensure your new configuration correctly syncs with URL parsing and follows the established dependency rules.

How does URL parsing work with configuration-driven filters?▼

URL parsing reads URL parameters and maps them directly to your filter configurations. The FilterOperations helper manages this sync, allowing you to inspect configurations and generate removal URLs for active filters.

How do I test filter behavior in Next.js and TypeScript?▼

Test filter behavior by running unit tests with yarn test test/filter-system.test.ts. For broader coverage, execute E2E tests using yarn test:e2e e2e/filters.flow.spec.ts to validate the complete user flow.

What are the limitations of a single source of truth filter config?▼

The main limitation is strict dependency rules; removing or altering a filter in config/filters.ts requires careful validation to avoid breaking URL parsing. You must follow the enforced removal and dependency guidelines to maintain system integrity.

Related Skills

Explore More Software Engineering Skills→
csim-sgcsim-sg

better-auth

Implement better-auth authentication for Cloudflare Workers with D1.

Community
Advanced
soniqosoniqo
1.1k

test

Run Swift unit or end-to-end test suites against a local codebase.

Official
Basic
MacPhobosMacPhobos

Zustand State Management

Manage global React state with a minimal hook-based API.

Community
Intermediate
vertivolatamvertivolatam
1

Feature Flags & Remote Config

Manage feature flags and remote config in Flutter apps using Firebase Remote Config and LaunchDarkly.

Official
Intermediate