Agent skill

Nuqs Scaffolder

by pproenca in pproenca/dot-skills

Scaffolds URL-state filters for a Next.js page — typed searchParams.ts parser map and a <Filters / client component backed by useQueryStates.

MITAuto-check passedTesting & QA

Install Nuqs Scaffolder

skills CLI
$ npx skills add pproenca/dot-skills --skill nuqs-scaffolder -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install pproenca/dot-skills nuqs-scaffolder --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/.curated/nuqs-scaffolder .claude/skills/nuqs-scaffolder && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
nuqs-scaffolder
GitHub stars
215
Token cost
~1.8k tokens
SKILL.md length
605 words
Files
11 (incl. references, assets)
Skills in repo
41
Repo updated
First seen
Licence
MIT

At a glance

Scaffolds URL-state filters for a Next.js page — typed searchParams.ts parser map and a <Filters / client component backed by useQueryStates.

  • Works in 4 steps: Read or create a spec. Start from… → Render each template by replacing… → Write each rendered file to the path… → …
  • Even when the user only says add filters to /search
  • SKILL.md covers When to Apply, How to Use, Spec Format and Available Templates, plus 5 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Nuqs Scaffolder is an agent skill from pproenca/dot-skills. Scaffolds URL-state filters for a Next.js page — typed searchParams.ts parser map and a <Filters / client component backed by useQueryStates. From a single JSON spec, generates four files in lockstep — client parser map, server loader/cache/serializer, client component, and Vitest test — all sharing the same parser definitions per the nuqs Standard Schema pattern. Trigger even when the user only says "add filters to /search" or "I need a typed query string for this page" — both are exactly this skill's job.

Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. The skill folder holds 13 other files, including reference files and assets (for example `AGENTS.md`, `config.json` and `gotchas.md`).

It sits in Testing & QA, covering Project scaffolding and Unit testing. It works with Next.js and Vitest. The repository describes itself as: A collection of AI agent skills following the Agent Skills open format. The licence is MIT.

When your agent uses it

  • Even when the user only says add filters to /search
  • I need a typed query string for this page — both are exactly this skills job

Example prompts

  • “add filters to /search”
  • “I need a typed query string for this page”
  • “Use the nuqs-scaffolder skill to scaffold URL-state filters for a Next.js page — typed searchParams.ts parser map and a <Filters / client component…”
  • “/nuqs-scaffolder”

Requirements

  • Node.js

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Read or create a spec. Start from assets/templates/spec.template.json and fill in name, module, and params. See "Spec Format" below.
  2. Render each template by replacing placeholders with values derived from the spec.
  3. Write each rendered file to the path computed from config.json (overridable per-call).
  4. Show the user the diff before committing — this skill never modifies existing files; if a target path exists, ask before overwriting.

What it can do on your machine

Read from SKILL.md and the folder at commit cf93c57. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are jsonc).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Nuqs Scaffolder loads about 1.8k tokens when it runs, and up to ~3.5k if it reads all its reference files. Until then it costs about 134 tokens; SKILL.md has 605 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~134
When it runs · the whole SKILL.md, loaded when a task matches
~1.8k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~3.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from pproenca/dot-skills at commit cf93c57, republished under its MIT licence (© pproenca). 605 words, ~1,803 tokens.

Download SKILL.mdSave it as .claude/skills/nuqs-scaffolder/SKILL.md (or your agent's skills folder). This skill also uses 10 other files; get the full folder from GitHub.
name
nuqs-scaffolder
description
Scaffolds URL-state filters for a Next.js page — typed `searchParams.ts` parser map and a `<Filters />` client component backed by `useQueryStates`. From a single JSON spec, generates four files in lockstep — client parser map, server loader/cache/serializer, client component, and Vitest test — all sharing the same parser definitions per the nuqs Standard Schema pattern. Trigger even when the user only says "add filters to /search" or "I need a typed query string for this page" — both are exactly this skill's job.

nuqs Scaffolder

Generate a coherent set of nuqs files from one spec. The skill is template-driven — you read the spec, copy the templates, and substitute placeholders. No build step, no codegen runtime; the templates ARE the artifact.

When to Apply

Use this skill when:

  • A new Next.js page needs URL-backed filters, pagination, search, or sort state
  • You're standardising an existing page's ad-hoc useState filters onto nuqs
  • A code review keeps catching client/server drift in parser definitions — this skill makes drift mechanically impossible because both sides import the same map
  • A user asks to "add Standard Schema validation to these query params for tRPC" — the generated searchParams.server.ts already exports the schema

If the codebase has legacy nuqs patterns instead, run the nuqs-codemod-runner skill first.

How to Use

  1. Read or create a spec. Start from assets/templates/spec.template.json and fill in name, module, and params. See "Spec Format" below.
  2. Render each template by replacing placeholders with values derived from the spec.
  3. Write each rendered file to the path computed from config.json (overridable per-call).
  4. Show the user the diff before committing — this skill never modifies existing files; if a target path exists, ask before overwriting.

The agent does the rendering — Claude is the templating engine. Each template is annotated with markers (/*= ... =*/) that name the placeholder slot and document the substitution rule.

Spec Format

jsonc
{
  "name":   "Search",                    // PascalCase — drives the exported symbol names
  "module": "search",                    // kebab-case — drives file paths and the "module" folder

  "params": {
    "q":          { "type": "string",                                    "default": "" },
    "page":       { "type": "integer",                                   "default": 1 },
    "limit":      { "type": "integer",                                   "default": 10 },
    "categories": { "type": "array-of-string-native",                    "default": [] },
    "sort":       { "type": "string-literal", "values": ["asc","desc"],  "default": "asc" },
    "minPrice":   { "type": "float",                                     "default": null },
    "lastSeen":   { "type": "iso-date",                                  "default": null }
  }
}
Supported type values
typeParser usedNotes
stringparseAsString
integerparseAsInteger
floatparseAsFloat
booleanparseAsBoolean
iso-dateparseAsIsoDateDate-only
iso-date-timeparseAsIsoDateTimeDate + time
timestampparseAsTimestampms since epoch
hexparseAsHexNumeric value, hex URL form
indexparseAsIndex0-based in code, 1-based in URL
array-of-stringparseAsArrayOf(parseAsString)?tags=a,b,c
array-of-string-nativeparseAsNativeArrayOf(parseAsString)?tag=a&tag=b — requires nuqs ≥ 2.7
string-literalparseAsStringLiteral(values)Requires values: string[]
number-literalparseAsNumberLiteral(values)Requires values: number[]
jsonparseAsJson(SchemaName.parse)Generates a Zod schema stub; mark default separately

If default is null, the param is nullable; otherwise the template uses .withDefault(...).

Available Templates

TemplateRenders to (default)Loaded when
searchParams.ts.templatelib/{module}-search-params.tsAlways
searchParams.server.ts.templatelib/{module}-search-params.server.tsAlways
filters.tsx.templatecomponents/{module}/{name}-filters.tsxAlways
filters.test.tsx.templatecomponents/{module}/{name}-filters.test.tsxIf config.generate_tests is true
spec.json.templateAnywhere — starter for the userFirst-run prompt

Template files end in .template so editors don't apply syntax highlighting to placeholder markers — the original extension is preserved as the suffix-before-.template so you can still tell at a glance what the rendered file will be.

Paths are configurable in config.json — override globs, file naming style (kebab vs PascalCase), and whether tests are emitted.

Show full SKILL.md (214 more words)Show less

Placeholder Reference

All templates use the same placeholder syntax. The agent substitutes them in one pass:

PlaceholderSourceExample
__NAME__spec.nameSearch
__name__camelCase form of spec.namesearch
__module__spec.modulesearch
/*= PARSERS =*/Iterate spec.params → key: parseAsXxx.withDefault(...) linessee template
/*= COMPONENT_FIELDS =*/Iterate spec.params → one input/select per typesee template
/*= TEST_CASES =*/Iterate spec.params → one assertion per defaultsee template
/*= NULLABLE_IMPORTS =*/Add Nullable helper import if any param is nullableconditional
/*= ZOD_SCHEMAS =*/For json type params, emit a Zod schema stubconditional

/*= ... =*/ markers are instructions to the agent, not literal substitutions. Replace the entire marker (including the /*= =*/ delimiters) with the expanded content.

Conventions

Read references/conventions.md for:

  • File naming (kebab-case) and why
  • Import ordering (external → nuqs → internal → relative) and why
  • Why the server file exists as a sibling, not inside app/
  • When to fork the templates (you usually shouldn't)

Setup

config.json is pre-populated with sensible Next.js App Router defaults. Override only if your repo uses different conventions:

jsonc
{
  "lib_dir": "lib",
  "components_dir": "components",
  "generate_tests": true,
  "test_runner": "vitest"
}

On first use, the agent should ask the user for the spec via AskUserQuestion if no spec file is provided.

  • nuqs — Best-practice reference these templates encode. Read it to understand WHY the templates are shaped this way.
  • nuqs-codemod-runner — Run BEFORE this skill if migrating an existing page from pre-v2.5 nuqs.

Gotchas

See gotchas.md for edge cases discovered during use.

© pproenca, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 10 other files (references, assets) in skills/.curated/nuqs-scaffolder of pproenca/dot-skills.

  • SKILL.md
  • AGENTS.md
  • assets/templates/filters.test.tsx.template
  • assets/templates/filters.tsx.template
  • assets/templates/searchParams.server.ts.template
  • assets/templates/searchParams.ts.template
  • assets/templates/spec.json.template
  • config.json
  • gotchas.md
  • metadata.json
  • references/conventions.md

Open the folder on GitHubat commit cf93c57

Compare with similar skills

Nuqs Scaffolder next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Nuqs Scaffolder compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Nuqs Scaffolder this skillpproenca/dot-skills215—~1.8kAutomated safety check: PassMIT
Senior QAalirezarezvani/claude-skills28k1 repos~2.1kAutomated safety check: PassMIT
Npx CLIjwynia/agent-skills166—~2.4kAutomated safety check: PassNone
VitestAsymmetric-al/core381—~1.1kAutomated safety check: PassAGPL-3.0
Test GenerationEmeaAppGbb/spec2cloud100—~5.5kAutomated safety check: PassMIT
Senior QAborghei/Claude-Skills881—~1.6kAutomated safety check: PassMIT

Similar skills

  • Senior QA

    alirezarezvani/claude-skills

    Generates unit tests, integration tests, and E2E tests for React/Next.js applications.

    28k GitHub starsUsed in 1 repo~2.1k tokens
    Testing & QAAuto-check passed
  • Npx CLI

    jwynia/agent-skills

    Build and publish npx-executable CLI tools using Bun as the primary toolchain with npm-compatible output.

    166 GitHub stars~2.4k tokensUpdated 7 mo ago
    DevelopmentAuto-check passed
  • Vitest

    Asymmetric-al/core

    Write, review, filter, mock, and debug Core unit tests with the repository's installed Vitest 4 configuration.

    381 GitHub stars~1.1k tokensUpdated today
    Testing & QAAuto-check passed
  • Test Generation

    EmeaAppGbb/spec2cloud

    Generate BDD test code from Gherkin scenarios. An agent skill from EmeaAppGbb/spec2cloud.

    100 GitHub stars~5.5k tokensUpdated 5 mo ago
    Testing & QAAuto-check passed
  • Senior QA

    borghei/Claude-Skills

    Testing for React/Next.js with Jest, React Testing Library, and Playwright.

    881 GitHub stars~1.6k tokensUpdated yesterday
    Testing & QAAuto-check passed
  • Nextjs Testing

    HoangNguyen0403/agent-skills-standard

    Write Jest or Vitest unit tests with React Testing Library and Playwright E2E tests for Next.js projects.

    571 GitHub stars~768 tokensUpdated yesterday
    Testing & QAAuto-check passed

More from pproenca/dot-skills

All 41 skills in this repo
  • Audio Voice Recovery

    pproenca/dot-skills

    Audio forensics and voice recovery guidelines for CSI-level audio analysis.

    215 GitHub stars~3.3k tokensUpdated 1 mo ago
    Auto-check passed
  • Codemod React Pipeline

    pproenca/dot-skills

    Guided, scripted pipeline for running JSX/TSX/React codemods safely across large legacy codebases.

    215 GitHub stars~1.6k tokensUpdated 1 mo ago
    Auto-check passed
  • Dev Rfc

    pproenca/dot-skills

    Create well-structured RFCs and technical proposals for software projects.

    215 GitHub stars~3.8k tokensUpdated 1 mo ago
    Auto-check passed
  • Dx Harness

    pproenca/dot-skills

    Developer-experience friction auditing and fixing — slow onboarding, repeated manual setup steps, missing bootstrap/reset/seed scripts, undiscoverable conventions.

    215 GitHub stars~1.5k tokensUpdated 1 mo ago
    Auto-check passed
  • Language Spec Author

    pproenca/dot-skills

    Turn a rough idea for a language into a complete, implementable specification — a DSL, query, config/data, template, or protocol language — by interviewing the author dimension by dimension until…

    215 GitHub stars~2.4k tokensUpdated 1 mo ago
    Auto-check passed
  • Python Pep Author

    pproenca/dot-skills

    Drafting Python Enhancement Proposals (PEPs) — proposing a Python language feature, a standard library change, an interoperability standard, or an informational/process document for the Python…

    215 GitHub stars~2.1k tokensUpdated 1 mo ago
    Auto-check passed

Works with

Questions about Nuqs Scaffolder

What does Nuqs Scaffolder do?

Scaffolds URL-state filters for a Next.js page — typed searchParams.ts parser map and a <Filters / client component backed by useQueryStates. Nuqs Scaffolder is an agent skill from pproenca/dot-skills.ts parser map and a <Filters / client component backed by useQueryStates.

When should I use Nuqs Scaffolder?

Nuqs Scaffolder fits situations like: even when the user only says add filters to /search; I need a typed query string for this page — both are exactly this skills job.

How do I install Nuqs Scaffolder in Claude Code?

Run `npx skills add pproenca/dot-skills --skill nuqs-scaffolder -a claude-code`. Or copy the skill folder (skills/.curated/nuqs-scaffolder in pproenca/dot-skills) into .claude/skills/nuqs-scaffolder in your project. Claude Code loads it when a task matches its description.

How do I install Nuqs Scaffolder in Codex?

Run `npx skills add pproenca/dot-skills --skill nuqs-scaffolder -a codex`. Or copy the skill folder (skills/.curated/nuqs-scaffolder in pproenca/dot-skills) into .agents/skills/nuqs-scaffolder in your project. Codex loads it when a task matches its description.

Can I use Nuqs Scaffolder in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add pproenca/dot-skills --skill nuqs-scaffolder -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/nuqs-scaffolder, .gemini/skills/nuqs-scaffolder, .github/skills/nuqs-scaffolder and .opencode/skills/nuqs-scaffolder in your project.

What does Nuqs Scaffolder need to run?

SKILL.md names no scripts, command-line tools or credentials: Nuqs Scaffolder is instructions for the agent only. Our summary lists: Node.js.

Does Nuqs Scaffolder access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Nuqs Scaffolder safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Nuqs Scaffolder use?

Nuqs Scaffolder is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Nuqs Scaffolder use?

About 1.8k tokens (SKILL.md is roughly 7.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.7k tokens, read only when the agent opens those files.

What are the alternatives to Nuqs Scaffolder?

Skills that share tags, products or a category with Nuqs Scaffolder: Senior QA (alirezarezvani/claude-skills, 28k stars), Npx CLI (jwynia/agent-skills, 166 stars), Vitest (Asymmetric-al/core, 381 stars) and Test Generation (EmeaAppGbb/spec2cloud, 100 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Nuqs Scaffolder?

pproenca (a GitHub user) maintains it in pproenca/dot-skills, which has 215 GitHub stars. The repository holds 41 skills in this directory. The repository was last updated on August 15, 2026.

Source: pproenca/dot-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.