# Url State Patterns

> Sincroniza el estado de React con los query params de la URL usando nuqs (wrapper Suspense, parsers, limpieza, diálogos con deep link). Úsalo para filtros, búsqueda o diálogos compartibles.

Fuente: https://skillsagentes.com/skills/andrelandgraf/fullstackrecipes/url-state-patterns
Markdown: https://skillsagentes.com/skills/andrelandgraf/fullstackrecipes/url-state-patterns.md

Repositorio: https://github.com/andrelandgraf/fullstackrecipes
Autor: andrelandgraf
Licencia: no declarada
Actualizado: hace 3 meses
Coste de contexto: 44 tok instalada, 929 tok al activarse, 929 tok con todos los archivos del bundle
Bundle: 1 archivo, 4 KB
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add andrelandgraf/fullstackrecipes --skill url-state-patterns --agent claude-code
# Cursor
npx -y skills add andrelandgraf/fullstackrecipes --skill url-state-patterns --agent cursor
# Codex
npx -y skills add andrelandgraf/fullstackrecipes --skill url-state-patterns --agent codex
# Gemini CLI
npx -y skills add andrelandgraf/fullstackrecipes --skill url-state-patterns --agent gemini
# Windsurf
npx -y skills add andrelandgraf/fullstackrecipes --skill url-state-patterns --agent windsurf
# Cline
npx -y skills add andrelandgraf/fullstackrecipes --skill url-state-patterns --agent cline
```

## Qué hace

- Sincroniza el estado de React con los query params de la URL usando nuqs
- Envuelve componentes cliente con Suspense para que useSearchParams funcione correctamente
- Usa parsers (parseAsString, parseAsBoolean, parseAsArrayOf) con .withDefault() para valores por defecto
- Limpia parámetros de la URL asignando null
- Controla la visibilidad de diálogos mediante un parámetro de URL para que sean compartibles

## Cuándo usarla

- Al construir filtros, búsqueda o diálogos que deben ser compartibles mediante URL
- Al necesitar que el estado sobreviva a la navegación back/forward del navegador

## Qué la activa

- "Quiero que los filtros de búsqueda se guarden en la URL"
- "Necesito un diálogo de borrado que sea un deep link compartible"
- "Cómo sincronizo el estado de mi input de búsqueda con query params"

## Antes de instalar

- Requiere completar antes la receta de configuración 'URL State with nuqs'.

## Archivos

- SKILL.md — 4 KB

## SKILL.md

No se reproduce aquí. Léelo en https://github.com/andrelandgraf/fullstackrecipes/blob/main/skills/url-state-patterns/SKILL.md

## Dónde encaja

- Categoría: [Herramientas para desarrolladores](https://skillsagentes.com/categorias/herramientas-desarrollo.md) — Skills que cambian cómo tu agente escribe, revisa y despliega código.
- Creador: [andrelandgraf](https://skillsagentes.com/creators/andrelandgraf.md) — 0 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Authoring Recipes](https://skillsagentes.com/skills/andrelandgraf/fullstackrecipes/authoring-recipes.md): Guías para escribir contenido de fullstackrecipes: setup recipes, skills expuestas, cookbooks, templates y utilidades instalables del registro, pensadas para mantenedores del proyecto, no para consumidores del stack.
- [Use Fullstackrecipes](https://skillsagentes.com/skills/andrelandgraf/fullstackrecipes/use-fullstackrecipes.md): Descubre y sigue las recetas de fullstackrecipes (guías de setup, skills, cookbooks) obteniendo su Markdown; la meta-skill para encontrar y aplicar recetas correctamente.
- [Authentication Best Practices](https://skillsagentes.com/skills/andrelandgraf/fullstackrecipes/authentication-best-practices.md): Lee sesiones en cliente y servidor, protege rutas y ejecuta sign in/up/out con Better Auth. Úsalo al restringir páginas/APIs por autenticación o al conectar flujos de auth.
- [Better Auth Components](https://skillsagentes.com/skills/andrelandgraf/fullstackrecipes/better-auth-components.md): Añade componentes de UI y páginas para flujos de autenticación: inicio de sesión, registro, recuperación de contraseña, restablecimiento de contraseña y verificación de email.
- [Analytics Best Practices](https://skillsagentes.com/skills/andrelandgraf/fullstackrecipes/analytics-best-practices.md): Rastrea eventos personalizados y conversiones con Vercel Web Analytics mediante track(). Úsalo al instrumentar acciones de usuario, conversiones o envíos de formularios.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)