mcpField
U
url-state-management

url-state-management

github.com/andrelandgrafDevelopment23123 installsUpdated 20w ago
Repository

About url-state-management

A skill for React developers that explains how to sync state with URL query parameters using nuqs. It covers shareable filters and searches, deep-linked dialogs, and preserving UI state through browser navigation.

Key features

  1. 01Sync React state with URL query parameters
  2. 02Create shareable filters and searches
  3. 03Deep-link to dialogs
  4. 04Preserve state across browser navigation

Use cases

  1. 01Share filter or search state
  2. 02Open a specific dialog from a link
  3. 03Restore UI state during browser navigation

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/andrelandgraf/fullstackrecipes --skill url-state-management

After installing, type/url-state-managementin Claude Code to confirm it loaded.

Details

From the project README

URL State Management

Sync React state to URL query parameters for shareable filters, search, and deep-linkable dialogs with nuqs.

Prerequisites

Complete these recipes first (in order):

Next.js on Vercel

Create a Next.js app running on Bun, configure the development environment, and deploy to Vercel with automatic deployments on push.

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/nextjs-on-vercel

Cookbook - Complete These Recipes in Order

URL State with nuqs

Sync React state to URL query parameters for shareable filters, search queries, and deep links to modal dialogs. Preserves UI state on browser back/forward navigation.

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/nuqs-setup
URL State Patterns

Manage React state in URL query parameters with nuqs. Covers Suspense boundaries, parsers, clearing state, and deep-linkable dialogs.

bunx skills add andrelandgraf/fullstackrecipes/skills -s url-state-patterns

Comments

Markdown supported