skills.rest
junnv93
junnv93COMMUNITY
Explore all skills by this author →
GitHub

verify-filters

Validate URL-driven list filters against a three-layer SSOT pattern.

Updated Aug 23, 2026
Search Tags:#typescript#frontend#react#validation#filters#ssot
One-click install
npx skills add https://github.com/junnv93/equipment_management_system --skill verify-filters
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: verify-filters
Source: https://github.com/junnv93/equipment_management_system/tree/main/.claude/skills/verify-filters
Command: npx skills add https://github.com/junnv93/equipment_management_system --skill verify-filters

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures that URL-driven list filters adhere to a strict Single Source of Truth (SSOT) 3-layer pattern by validating tooling, hooks, and server parsing points across dashboard pages.

Core Features & Use Cases

  • Validates that each filter-utils file exports the required four functions
  • Ensures there is a corresponding filter hook that consumes those utilities
  • Checks that server-side parsing is invoked in page.tsx and that client components do not manage filter state with useState
  • Applies to adding or modifying list filters on equipment, calibration, checkouts, teams, and related pages to maintain consistency in UI behavior

Quick Start

Run this check after adding or modifying list page filters to verify SSOT compliance and report any missing exports, hooks, or server parsing violations.

Frequently Asked Questions about verify-filters

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

FAQPage Schema
How do I validate URL filter state against a single source of truth in React?▼

URL filter SSOT validation checks that filter-utils files export required functions, hooks consume them, and page.tsx handles server parsing. It prevents client components from managing filter state with useState, ensuring consistent URL-driven behavior across dashboard pages.

What is the single source of truth pattern for URL-driven list filters in TypeScript?▼

The SSOT pattern for URL filters is a 3-layer TypeScript architecture enforcing specific filter-utils exports, a matching hook consuming those utilities, and server-side parsing in page.tsx. It strictly prohibits client components from managing filter state with useState.

How do I check if my React client components are violating server-side filter parsing rules?▼

Check server-side filter parsing violations by confirming page.tsx invokes the server-side parse function and verifying client components do not use useState for filter state. This enforces the SSOT architecture and ensures consistent filter behavior.

Can I use this SSOT filter validation across different dashboard pages?▼

Yes, you can apply this SSOT filter validation across equipment, calibration, checkouts, and teams dashboard pages. It ensures consistent UI behavior when adding or modifying list filters across various dashboard sections.

Why does my React list filter fail the SSOT compliance check?▼

Your list filter fails SSOT compliance if filter-utils files miss required exports, the matching hook is absent, page.tsx lacks server-side parsing, or client components incorrectly manage filter state with useState.

Related Skills

Explore More Software Engineering Skills→
agusmdevagusmdev
5

add-frontend-feature

Scaffold React/TypeScript frontend features with types, API endpoints, hooks, components, and routes.

Community
Intermediate
h4v1dh4v1d

rsc-data-optimizer

Convert Next.js client-side data fetching to React Server Components.

Community
Advanced
pproencapproenca
193

nuqs

Manage type-safe URL query state in Next.js applications with hooks and server utilities.

Community
Intermediate
mwathibenmwathiben

typescript-review

Review TypeScript and JavaScript diffs against Metabase coding standards.

Community
Intermediate