jeff-url-state-nuqs

Étoiles0

Forks0

Mis à jour13 février 2026 à 01:26

Jeff's URL state conventions using nuqs. Use when working on pagination, search, filters, date/view modes, or route-level overlays.

Installation

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Source

yemyat

yemyat/tanstack-router-starter-kit

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Métiers associésSOC

Basé sur la classification professionnelle SOC

Développeurs de logicielsProfessions informatiques et mathématiques·SOC 15-1252

SKILL.md

readonly

name	jeff-url-state-nuqs
description	Jeff's URL state conventions using nuqs. Use when working on pagination, search, filters, date/view modes, or route-level overlays.

Jeff's URL State with nuqs

Use URL query state as the source of truth for route-level, shareable state.

Apply when

Table pagination/search/filter work.
Date or view-mode switching.
Route-level dialog/sheet/alert visibility.

Required conventions

Use nuqs query state for data-fetch-affecting state.
Always set clearOnDefault: true for clean URLs.
Reset page to 1 when search/filter/date changes.
Route-level overlays must be URL-driven, not local open-state.

Standard keys

p: page
ps: page size
q: search query
d: single date (yyyy-MM-dd)
df: date from
dt: date to
v: view mode

Common filter keys:

fp positions
fl locations
fd departments
fs statuses
fss system statuses
fas attendance statuses
fam attendance methods
fsn shift names

URL vs local state

Keep in URL:

page/pageSize/search
filters
date/date-range
view mode
route-level overlay mode/id

Keep local:

ephemeral UI (hover, dropdown search input, drag state)
file objects and upload intermediates
table row expansion/selection unless explicitly URL-driven by product requirement

Validation checklist

Back/Forward navigation restores state.
Shared URL reproduces the same screen state.
Defaults are omitted from URL output.

Plus depuis ce dépôt

même dépôt

jeff-design-skill

yemyat/tanstack-router-starter-kit

Jeff's design language for react-app. Includes the full component-level conventions from the original linear-design skill plus Jeff's-specific direction (typography-first, subtle separators, and strict light/dark parity). Use when building or styling frontend

2026-02-130

jeff-route-prefetch

yemyat/tanstack-router-starter-kit

Jeff's route prefetch conventions for TanStack Router + React Query. Use when implementing or refactoring any data-fetching route, loader, or hooks.

2026-02-130

jeff-cls-stability

yemyat/tanstack-router-starter-kit

Jeff's layout-stability conventions to prevent cumulative layout shift (CLS). Use when building loading states, image-heavy UIs, cards, tables, maps, and media containers.

2026-02-130

jeff-display-formatting

yemyat/tanstack-router-starter-kit

Jeff's display-formatting conventions for money, numbers, dates, and date visuals. Use whenever rendering API values in UI.

2026-02-130

jeff-forms-and-overlays

yemyat/tanstack-router-starter-kit

Jeff's conventions for TanStack Form and overlay UX (Dialog, Sheet, route-driven state). Use for add/edit flows and modal/sheet interactions.

2026-02-130

jeff-module-patterns

yemyat/tanstack-router-starter-kit

Jeff's cross-module implementation patterns for filter panels, table cells, status display, and employee-linked rows. Use for module-level route work across employees, leaves, dashboard, attendance, and similar list pages.

2026-02-130

name	jeff-url-state-nuqs
description	Jeff's URL state conventions using nuqs. Use when working on pagination, search, filters, date/view modes, or route-level overlays.

Jeff's URL State with nuqs

Use URL query state as the source of truth for route-level, shareable state.

Apply when

Table pagination/search/filter work.
Date or view-mode switching.
Route-level dialog/sheet/alert visibility.

Required conventions

Use nuqs query state for data-fetch-affecting state.
Always set clearOnDefault: true for clean URLs.
Reset page to 1 when search/filter/date changes.
Route-level overlays must be URL-driven, not local open-state.

Standard keys

p: page
ps: page size
q: search query
d: single date (yyyy-MM-dd)
df: date from
dt: date to
v: view mode

Common filter keys:

fp positions
fl locations
fd departments
fs statuses
fss system statuses
fas attendance statuses
fam attendance methods
fsn shift names

URL vs local state

Keep in URL:

page/pageSize/search
filters
date/date-range
view mode
route-level overlay mode/id

Keep local:

ephemeral UI (hover, dropdown search input, drag state)
file objects and upload intermediates
table row expansion/selection unless explicitly URL-driven by product requirement

Validation checklist

Back/Forward navigation restores state.
Shared URL reproduces the same screen state.
Defaults are omitted from URL output.