skills.rest
Albo-Club
Albo-ClubOFFICIAL
Explore all skills by this author →
WebsiteGitHub

search-params

Validate and manage TanStack Router search params with Zod, Valibot, or ArkType schemas.

Updated May 26, 2026
Search Tags:#react#zod#tanstack-router#url state#query validation#search params#validatesearch
One-click install
npx skills add https://github.com/Albo-Club/albo-os --skill search-params-albo-club
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: search-params
Source: https://github.com/Albo-Club/albo-os/tree/main/.agents/skills/tanstack-router-core/search-params
Command: npx skills add https://github.com/Albo-Club/albo-os --skill search-params-albo-club

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires zod, @tanstack/zod-adapter, valibot, arktype, and includes references (resource) components.

What problem does it solve? Managing URL search params in TanStack Router applications is error-prone: types get lost, defaults break, and navigation accidentally wipes existing params. This Skill provides correct patterns for typed, validated search param state. ## Core Features & Use Cases - Schema Validation: Define validateSearch with Zod (via @tanstack/zod-adapter and fallback()), Valibot, ArkType, or manual functions so params are fully typed and defaulted. - Reading & Writing Params: Use Route.useSearch(), useSearch({ from }), Link with function-form search, and useNavigate() to update params without losing existing state. - Middlewares & Serialization: Apply retainSearchParams and stripSearchParams middlewares, custom parseSearch/stringifySearch serialization, and loaderDeps for precise loader cache keys. - Use Case: Build a paginated, sortable product list where page, filter, and sort live in the URL, survive navigation, and trigger loader refetches only when relevant params change. ## Quick Start Add validated search params with Zod defaults to my TanStack Router products route and wire pagination links that preserve existing params.

Frequently Asked Questions about search-params

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

FAQPage Schema
How do I validate search params in TanStack Router?▼

Define a schema and pass it to the route's validateSearch option. With Zod v3 use zodValidator from @tanstack/zod-adapter with fallback() for defaults; Valibot and ArkType schemas can be passed directly since they implement Standard Schema.

Zod vs Valibot vs ArkType for TanStack Router search params?▼

Zod v3 requires the @tanstack/zod-adapter wrapper and fallback() instead of .catch() to preserve types. Valibot 1.0+ and ArkType 2.0+ implement Standard Schema, so their schemas pass directly to validateSearch without an adapter.

Why is my search param typed as unknown with zodValidator?▼

Using Zod v3's .catch() with zodValidator makes the output type unknown. Replace .catch() with fallback() from @tanstack/zod-adapter to keep full type inference. This does not apply to Zod v4, where .catch() is correct.

How do I update one search param without losing the others?▼

Use the function form of search on Link or navigate: search={(prev) => ({ ...prev, page: 2 })}. Passing a plain object replaces all params, wiping any existing ones.

Can I put Date objects in TanStack Router search params?▼

No. Dates do not serialize correctly to JSON in URLs. Convert them to ISO strings with toISOString() before navigating, and parse them back with new Date() inside the component.

Why does my loader re-run on every search param change?▼

Returning the entire search object from loaderDeps makes the loader re-run on any param change. Pick only the params the loader needs, for example loaderDeps: ({ search }) => ({ page: search.page }).

Related Skills

Explore More Software Engineering Skills→
sncollectivesncollective

tanstack-router-v1

Implement TanStack Router v1 file-based routes, loaders, and navigation.

Official
Intermediate
rockcookiesrockcookies
1

tanstack-router

Implements type-safe routing, data loading, and navigation patterns for TanStack Router in React applications.

Community
Intermediate
lespacemanlespaceman
4

router-core/path-params

Capture and manage dynamic URL segments in TanStack Router routes.

Community
Intermediate
dungle-scrubsdungle-scrubs

react-state-management

Orchestrate React state with useState, TanStack Query, Zustand, and URL parameters.

Community
Intermediate