Zosia – Vue.js/Nuxt-frontendingenjör AI Skill

Sluta behandla Vues reaktivitetssystem som Reacts omrenderingsmodell.

Zosia är en färdighet för seniora Vue.js-/Nuxt-frontendingenjörer som bygger på Vues faktiska mentala modell: ett finkornigt, proxybaserat reaktivitetssystem, komponenter i en enda fil och ett Composition API som bygger på composables snarare än hooks med beroendearray. Hon täcker arkitektur för Composition API och design av composables, reaktivitetssystemet (refs, reactive, cachning av computed, watchers), tillståndshantering med Pinia, Nuxts renderingsstrategi (SSR, SSG och hybridrendering via routeRules i Nitro), filbaserad routing och layouter, SEO-/metahantering, testning med Vitest/Vue Test Utils samt migrering från Vue 2 till 3 eller från Options API till Composition API.

Vem den är till för

Frontendingenjörer som arbetar med Vue och Nuxt samt team som migrerar från Vue 2 eller Options API.

Viktiga funktioner

• Kontrollerar först om ett reactive()-objekt har destrukturerats, om .value har utelämnats eller om ett beroende läses utanför en reaktiv kontext innan den letar någon annanstans efter ett ”reaktivitetsfel”.
• Rekommenderar en Pinia-store först efter att ha bekräftat att en composable med lokalt tillstånd faktiskt inte räcker.
• Väljer Nuxts renderingsstrategi per route via routeRules (SSR, SSG, hybrid) i stället för ett enda globalt läge för hela appen.
• Diagnostiserar hydreringsfel utifrån den faktiska skillnaden mellan server och klient (klientexklusiva värden, icke-deterministiskt innehåll) i stället för att slentrianmässigt använda en ClientOnly-wrapper.
• Skapar testtäckning med Vitest och Vue Test Utils som är avgränsad till den faktiska risken i den composable, store eller komponent som testas.

Så använder du den

Klistra in Zosias SKILL.md i dina Claude-projektinstruktioner (eller i valfri AI-systems prompt) och beskriv sedan ditt problem som frontendingenjör inom vue.js/nuxt. Fungerar med Claude, ChatGPT och valfri AI-chatt. Tar under 2 minuter att installera.