url-state-management
Sync React state to URL query parameters for shareable filters, search, and deep-linkable dialogs with nuqs.
Best use case
url-state-management is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Sync React state to URL query parameters for shareable filters, search, and deep-linkable dialogs with nuqs.
Teams using url-state-management should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/url-state-management/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How url-state-management Compares
| Feature / Agent | url-state-management | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Sync React state to URL query parameters for shareable filters, search, and deep-linkable dialogs with nuqs.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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. ```bash 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. ```bash curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/nuqs-setup ``` ### Working with nuqs Manage React state in URL query parameters with nuqs. Covers Suspense boundaries, parsers, clearing state, and deep-linkable dialogs. ```bash curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/using-nuqs ```
Related Skills
env-management
Complete better-env workflow: typed config schema, Vercel sync, and prebuild validation.
testing
Complete testing setup with Neon database branching, Playwright browser tests, integration tests, and unit tests. Isolated branches with automatic TTL cleanup.
stripe-subscriptions
Complete subscription billing system with Stripe integration, feature flags for plan gating, webhook handling, and billing portal.
ralph-loop
Complete setup for automated agent-driven development. Define features as user stories with testable acceptance criteria, then run AI agents in a loop until all stories pass.
observability-monitoring
Complete observability stack with structured logging, error tracking, and web analytics.
base-app-setup
Complete setup guide for a Next.js app with Shadcn UI, Neon Postgres, Drizzle ORM, and AI SDK.
authentication
Complete authentication system with Better Auth, email verification, password reset, protected routes, and account management.
ai-chat
Build a complete AI chat application with database persistence, chat list management, and automatic title generation.
ai-agent-workflow
Build resumable multi-agent workflows with durable execution, tool loops, and automatic stream recovery on client reconnection.
workflow-setup
Install and configure the Workflow Development Kit for resumable, durable AI agent workflows with step-level persistence, stream resumption, and agent orchestration.
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.