Define server-side and client-side filtering architecture for product lists.
npx skills add https://github.com/saleor/storefront --skill filtering-system
Please help me install this Agent Skill. Skill: filtering-system Source: https://github.com/saleor/storefront/tree/main/.claude/skills/filtering-system Command: npx skills add https://github.com/saleor/storefront --skill filtering-system
Product lists often require complex filters that span server-side data fetching and client-side presentation. This Skill provides a coherent architecture to define, implement, and reason about filtering and sorting for category, price, and attribute-based filters on e-commerce storefronts.
Implement server-side filtering with ProductFilterInput and ProductOrder, then enable client-side filtering with useProductFilters and the PLP components.
High-intent search queries and answers about installing and using this skill.
Product filtering for category pages is implemented through a shared architecture handling server-side category resolution, price filtering, and sort orders, alongside client-side refinements for attributes like color and size.
Server-side and client-side product list filtering is unified by resolving category slugs to IDs for server queries, then applying post-fetch client-side refinements using local helpers for attributes like color and size.
Category slugs are resolved to IDs during server-side filtering and used in GraphQL queries via ProductFilterInput, ensuring the correct product lists are fetched before applying client-side UI refinements.
Yes, client-side filtering for product attributes like color and size is supported through post-fetch refinement using local helpers and UI hooks, allowing dynamic product list updates without additional server requests.
Yes, the unified filtering architecture applies to category, collection, and product pages, providing a coherent structure to define, implement, and reason about sorting and filtering across e-commerce storefronts.
Building a responsive product filtering UI requires using ProductFilterInput and ProductOrder for server-side data fetching, then enabling client-side interactions with useProductFilters and PLP components.
januarfontiConvert client-side data fetching in Next.js to React Server Components.
tomtoto757Generate shareable side-by-side product comparison tables with grouped attributes.
LutimiIntegrate shadcn/ui, Radix primitives, and Tailwind CSS into React interfaces.
mcclowesImplement server-side navigation in Next.js Server Components using Link and redirect().
