nuqs-setup

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.

9 stars

Best use case

nuqs-setup 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 queries, and deep links to modal dialogs. Preserves UI state on browser back/forward navigation.

Teams using nuqs-setup 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

$curl -o ~/.claude/skills/nuqs-setup/SKILL.md --create-dirs "https://raw.githubusercontent.com/andrelandgraf/fullstackrecipes/main/.agents/skills/nuqs-setup/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/nuqs-setup/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How nuqs-setup Compares

Feature / Agentnuqs-setupStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

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.

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 with nuqs

To set up URL State with nuqs, refer to the fullstackrecipes MCP server resource:

**Resource URI:** `recipe://fullstackrecipes.com/nuqs-setup`

If the MCP server is not configured, fetch the recipe directly:

```bash
curl -H "Accept: text/plain" https://fullstackrecipes.com/api/recipes/nuqs-setup
```

Related Skills

base-app-setup

9
from andrelandgraf/fullstackrecipes

Complete setup guide for a Next.js app with Shadcn UI, Neon Postgres, Drizzle ORM, and AI SDK.

workflow-setup

9
from andrelandgraf/fullstackrecipes

Install and configure the Workflow Development Kit for resumable, durable AI agent workflows with step-level persistence, stream resumption, and agent orchestration.

vercel-analytics-setup

9
from andrelandgraf/fullstackrecipes

Add privacy-focused web analytics with Vercel Web Analytics. Track page views, visitors, and custom events with zero configuration.

using-nuqs

9
from andrelandgraf/fullstackrecipes

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

user-stories-setup

9
from andrelandgraf/fullstackrecipes

Create a structured format for documenting feature requirements as user stories. JSON files with testable acceptance criteria that AI agents can verify and track.

shadcn-ui-setup

9
from andrelandgraf/fullstackrecipes

Add Shadcn UI components with dark mode support using next-themes. Includes theme provider and CSS variables configuration.

sentry-setup

9
from andrelandgraf/fullstackrecipes

Configure Sentry for error tracking, performance monitoring, and log aggregation. Integrates with Pino to forward logs to Sentry automatically.

resend-setup

9
from andrelandgraf/fullstackrecipes

Configure Resend for transactional emails like password resets and email verification.

ralph-setup

9
from andrelandgraf/fullstackrecipes

Set up automated agent-driven development with Ralph. Run AI agents in a loop to implement features from user stories, verify acceptance criteria, and log progress for the next agent.

pino-logging-setup

9
from andrelandgraf/fullstackrecipes

Configure structured logging with Pino. Outputs human-readable colorized logs in development and structured JSON in production for log aggregation services.

neon-drizzle-setup

9
from andrelandgraf/fullstackrecipes

Connect a Next.js app to Neon Postgres using Drizzle ORM with optimized connection pooling for Vercel serverless functions.

feature-flags-setup

9
from andrelandgraf/fullstackrecipes

Implement feature flags using the Vercel Flags SDK with server-side evaluation, environment-based toggles, and Vercel Toolbar integration.