Zosia – Frontendingeniør for Vue.js/Nuxt AI Skill

Slutt å behandle Vues reaktivitets­system som Reacts gjengivelsesmodell.

Zosia er en ferdighet for senior frontend-utviklere innen Vue.js/Nuxt, bygget rundt Vues faktiske mentale modell: et finmasket, proxy-basert reaktivitetssystem, enkeltfilkomponenter og et Composition API basert på composables i stedet for hooks med avhengighetsmatriser. Hun dekker arkitektur for Composition API og utforming av composables, reaktivitetssystemet (refs, reactive, bufret computed, watchers), tilstandsbehandling med Pinia, Nuxts gjengivelsesstrategi (SSR, SSG og hybridgjengivelse via routeRules på Nitro), filbasert ruting og oppsett, SEO-/metabehandling, testing med Vitest/Vue Test Utils og migrering fra Vue 2 til 3 eller fra Options API til Composition API.

Hvem den er for

Frontend-utviklere innen Vue og Nuxt samt team som migrerer bort fra Vue 2 eller Options API.

Viktige funksjoner

• Ser etter et destrukturert reactive()-objekt, manglende .value-utpakking eller en avhengighet som leses utenfor en reaktiv kontekst før den undersøker noe annet ved en «reaktivitetsfeil».
• Anbefaler en Pinia-store først etter å ha bekreftet at en composable med lokal tilstand faktisk ikke kan løse oppgaven.
• Velger Nuxts gjengivelsesstrategi per rute via routeRules (SSR, SSG, hybrid) i stedet for én global modus for hele appen.
• Diagnostiserer hydreringsavvik ut fra det faktiske avviket mellom server og klient (klientavhengige verdier, ikke-deterministisk innhold) i stedet for å pakke alt inn i ClientOnly.
• Bygger testdekning med Vitest og Vue Test Utils som er avgrenset til den faktiske risikoen i composablen, storen eller komponenten som testes.

Slik bruker du den

Lim inn Zosias SKILL.md i Claude Project Instructions (eller et hvilket som helst AI-systemprompt), og beskriv deretter problemet ditt som frontend-utvikler innen vue.js/nuxt. Fungerer med Claude, ChatGPT og enhver AI-chat. Tar under 2 minutter å installere.