nuxt4-patterns

Descripción general de la skill nuxt4-patterns

Para qué sirve nuxt4-patterns

nuxt4-patterns es una skill centrada en Nuxt 4 para elegir los patrones correctos de SSR, hidratación, routing y obtención de datos antes de publicar una página. Resulta útil cuando necesitas orientación práctica para decisiones de Frontend Development que afectan a la corrección y al rendimiento, no solo ayuda con la sintaxis.

Quién debería usarla

Usa la skill nuxt4-patterns si estás construyendo o corrigiendo aplicaciones con Nuxt 4 y necesitas ayuda con desajustes de hidratación, route rules, carga diferida o obtención de datos segura para SSR. Es especialmente útil para engineers que quieren un flujo de trabajo instalable y reutilizable en páginas y componentes, en lugar de reescribir un prompt nuevo cada vez.

Qué la hace diferente

El valor de nuxt4-patterns está en su apoyo a la toma de decisiones: cuándo conviene mantener el renderizado determinista, cuándo mover la lógica al cliente, cuándo usar useFetch frente a useAsyncData y cuándo ssr: false es una solución real y cuándo es solo un parche. Eso hace que la skill nuxt4-patterns sea más útil que un prompt genérico de Nuxt porque pone el foco en los tradeoffs que suelen bloquear la adopción.

Cómo usar la skill nuxt4-patterns

Instalación de nuxt4-patterns y primera revisión

Instala la skill nuxt4-patterns con:

npx skills add affaan-m/everything-claude-code --skill nuxt4-patterns

Después de instalarla, lee primero SKILL.md. Este repo de la skill es pequeño e independiente, así que el mayor valor viene de entender la guía y aplicarla a tu base de código, no de perseguir un árbol grande de soporte.

Qué incluir en tu solicitud

Para usar bien nuxt4-patterns, dale al modelo el objetivo de la página o la funcionalidad, el modo de renderizado y la clase exacta del problema. Un prompt sólido sería: “Arregla una página dashboard de Nuxt 4 con un desajuste de hidratación SSR causado por formateo de fechas solo en el cliente; mantén la página renderizada con SSR y conserva el SEO existente.” Eso es mejor que “Ayuda con la hidratación” porque le dice a la skill qué no debe cambiar.

Mejor flujo de trabajo para aplicar la guía

Usa nuxt4-patterns como un filtro de decisión: identifica si el problema es seguridad de hidratación, route rules, carga diferida o obtención de datos, y luego pide el cambio más pequeño y seguro. Si la página se renderiza en el servidor, pide primero markup seguro para SSR; si de verdad necesita comportamiento solo del navegador, pide el límite más estrecho posible con ClientOnly o un boundary .client.vue.

Archivos y secciones que conviene leer primero

Empieza por SKILL.md, especialmente los criterios de activación y las secciones sobre seguridad de hidratación y obtención de datos. Son las partes con más señal de la guía nuxt4-patterns porque explican qué causa el bug y qué patrón suele resolverlo. Si vas a adaptar la skill a tu propio proyecto, inspecciona también la estructura del repo para buscar notas específicas de la funcionalidad antes de copiar ejemplos.

Preguntas frecuentes sobre la skill nuxt4-patterns

¿nuxt4-patterns es solo para apps SSR con Nuxt 4?

No. La skill nuxt4-patterns es especialmente útil para apps con Nuxt 4 que mezclan SSR y comportamiento en el cliente, pero también ayuda en páginas híbridas, rutas prerenderizadas y componentes que obtienen datos o dependen del estado de la ruta. Si tu app es puramente client-side, la skill aporta menos valor.

¿Cuándo no debería usarla?

No recurras a nuxt4-patterns cuando el problema no tenga relación con el renderizado o el flujo de datos, como estilos puros, gestión de estado de Vue sin relación o diseño de la API del backend. Es más fuerte cuando el problema tiene que ver con consistencia del markup, comportamiento del payload o decisiones de renderizado a nivel de ruta.

¿Es mejor que un prompt normal?

Por lo general, sí, porque la skill nuxt4-patterns incorpora las restricciones que importan en Frontend Development con Nuxt 4: primer render determinista, fetches seguros para SSR y límites cuidadosos para solo-cliente. Un prompt normal puede dar una respuesta que funcione, pero es más probable que pase por alto problemas de hidratación o de payload.

¿Es apta para principiantes?

Sí, siempre que puedas describir la página y el síntoma. La guía nuxt4-patterns es lo bastante práctica para principiantes, pero los principiantes obtienen mejores resultados cuando incluyen un componente concreto, una ruta o un mensaje de error en lugar de pedir consejos amplios sobre arquitectura.

Cómo mejorar la skill nuxt4-patterns

Dale al modelo la restricción real

El uso más sólido de nuxt4-patterns empieza por la limitación que debes preservar: SSR, SEO, comportamiento de la ruta o tamaño del bundle. Indica si puedes aceptar renderizado solo en cliente, si la página debe seguir siendo rastreable y si los datos deben obtenerse en el servidor. Eso permite que la skill elija el patrón correcto en lugar de corregir de más.

Describe con precisión el desajuste o el tradeoff

Si tienes un bug, incluye el síntoma exacto: el texto de la advertencia de hidratación, la ruta que se comporta mal, datos que se solicitan dos veces o un componente que se renderiza distinto en servidor y cliente. Si tienes una petición de funcionalidad, especifica el comportamiento de renderizado deseado y qué debe permanecer intacto. Esta es la forma más rápida de mejorar los resultados de nuxt4-patterns.

Itera de cambios seguros a cambios más acotados

Pide primero la corrección más pequeña y luego afina. Por ejemplo: “Mantén SSR, elimina el desajuste y no cambies el layout”, y después “Ahora refactoriza para cargar el chart solo bajo interacción.” Ese enfoque ayuda a que la skill nuxt4-patterns se mantenga centrada en la decisión real, en lugar de reescribir toda la página.