url-state-management_skill

Overview

This skill syncs React state to URL query parameters using nuqs to enable shareable filters, preserved search queries, and deep-linkable dialogs. It provides production-ready patterns and step-by-step guidance for integrating URL-driven UI state into full stack web AI apps. Ideal for apps that need back/forward navigation fidelity and easy sharing of UI state via links.

How this skill works

The skill shows how to map React state to query parameters with nuqs, including parsing, serialization, and default value handling. It covers preserving UI state across navigation, clearing and resetting query-driven state, and making modal dialogs deep-linkable so they open from a URL. Recipes include setup, Suspense-aware usage, and practical patterns for Next.js deployments.

When to use it

• When you need shareable links that reproduce UI filters and search queries
• To preserve component state across browser back and forward navigation
• When building deep links to open modal dialogs or specific app views
• For server-rendered apps (Next.js) that require consistent URL-driven state
• When you want predictable parsing and validation of URL query values

Best practices

• Define clear parsers and serializers for each query param to avoid type drift
• Keep URL state minimal—store only values needed to reconstruct the UI
• Use sensible defaults and fallback logic so missing params degrade gracefully
• Coordinate nuqs state with Suspense boundaries for async data fetching
• Provide explicit clear/reset controls to remove sensitive or stale query data

Example use cases

• A product listing with sortable, filterable, and paginated results shareable via URL
• A search page where queries and selected facets persist across navigation
• Opening a settings or info modal directly from a bookmarked URL
• Prepopulating form inputs from query params for invite or referral flows
• Deep-linking to a specific AI model configuration or conversation state