{"product_id":"zosia-vue-js-nuxt-frontend-engineer-ai-skill","title":"Zosia - Ingeniera frontend de Vue.js\/Nuxt Skill de AI","description":"\u003ch2\u003eDeja de tratar el sistema de reactividad de Vue como el modelo de renderizado de React.\u003c\/h2\u003e\n\u003cp\u003eZosia es una habilidad de ingeniería frontend sénior de Vue.js\/Nuxt basada en el modelo mental real de Vue: un sistema de reactividad granular basado en proxies, componentes de archivo único y una Composition API basada en composables, no en hooks con matrices de dependencias. Abarca la arquitectura de la Composition API y el diseño de composables, el sistema de reactividad (refs, reactive, caché de computed y watchers), la gestión de estado con Pinia, la estrategia de renderizado de Nuxt (SSR, SSG y renderizado híbrido mediante routeRules en Nitro), el enrutamiento y los layouts basados en archivos, la gestión de SEO y metadatos, las pruebas con Vitest\/Vue Test Utils y la migración de Vue 2 a 3 o de la Options API a la Composition API.\u003c\/p\u003e\n\u003ch3\u003ePara quién es\u003c\/h3\u003e\n\u003cp\u003eIngenieros frontend de Vue y Nuxt, y equipos que están migrando desde Vue 2 o la Options API.\u003c\/p\u003e\n\u003ch3\u003eCapacidades principales\u003c\/h3\u003e\n\u003cul\u003e\n  \u003cli\u003eComprueba si hay un objeto reactive() desestructurado, un .value sin desenvolver o una lectura de dependencias fuera de un contexto reactivo antes de buscar en cualquier otro sitio cuando se trata de un «fallo de reactividad».\u003c\/li\u003e\n  \u003cli\u003eRecomienda un store de Pinia solo después de confirmar que un composable con estado local no puede resolver realmente el problema.\u003c\/li\u003e\n  \u003cli\u003eElige la estrategia de renderizado de Nuxt por ruta mediante routeRules (SSR, SSG o híbrida), en lugar de usar un único modo global para toda la aplicación.\u003c\/li\u003e\n  \u003cli\u003eDiagnostica las discrepancias de hidratación hasta llegar a la divergencia real entre el servidor y el cliente (valores exclusivos del cliente, contenido no determinista), en lugar de envolverlo todo indiscriminadamente con ClientOnly.\u003c\/li\u003e\n  \u003cli\u003eCrea una cobertura con Vitest y Vue Test Utils centrada en el riesgo real del composable, store o componente que se está probando.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003ch3\u003eCómo usarla\u003c\/h3\u003e\n\u003cp\u003ePega el archivo SKILL.md de Zosia en las instrucciones de tu proyecto de Claude (o en el prompt de cualquier sistema de AI) y, después, describe tu problema de ingeniería frontend de vue.js\/nuxt. Funciona con Claude, ChatGPT y cualquier chat de AI. Se instala en menos de 2 minutos.\u003c\/p\u003e","brand":"KissMySkills","offers":[{"title":"Default Title","offer_id":58342395838728,"sku":null,"price":29.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1036\/1444\/7880\/files\/sw33-zosia-vue-nuxt-frontend-engineer-nf.png?v=1785685145","url":"https:\/\/kissmyskills.com\/es\/products\/zosia-vue-js-nuxt-frontend-engineer-ai-skill","provider":"KissMySkills","version":"1.0","type":"link"}