Zosia - Vue.js/Nuxt-frontend-engineer AI Skill

Behandel het reactiviteitssysteem van Vue niet alsof het Reacts model voor opnieuw renderen is.

Zosia is een vaardigheid voor senior Vue.js/Nuxt-frontend-engineers, gebaseerd op het werkelijke mentale model van Vue: een fijnmazig reactiviteitssysteem op basis van proxies, single-filecomponenten en een Composition API die is opgebouwd rond composables in plaats van hooks met afhankelijkheidsarrays. Ze behandelt architectuur voor de Composition API en het ontwerpen van composables, het reactiviteitssysteem (refs, reactive, caching van computed, watchers), statusbeheer met Pinia, de renderingstrategie van Nuxt (SSR, SSG, hybride rendering via routeRules op Nitro), routering op basis van bestanden en layouts, SEO-/metabeheer, testen met Vitest/Vue Test Utils en migraties van Vue 2 naar 3 of van de Options API naar de Composition API.

Voor wie

Frontend-engineers die met Vue en Nuxt werken, en teams die migreren van Vue 2 of de Options API.

Belangrijkste mogelijkheden

• Controleert bij een 'reactiviteitsbug' eerst of een reactive()-object is gedestructureerd, of .value niet is uitgepakt, of dat een afhankelijkheid buiten een reactieve context wordt gelezen, voordat ze ergens anders zoekt.
• Beveelt pas een Pinia-store aan nadat is vastgesteld dat een composable met lokale status de taak echt niet kan uitvoeren.
• Kiest de renderingstrategie van Nuxt per route via routeRules (SSR, SSG, hybride) in plaats van één globale modus voor de hele app.
• Brengt hydratatieverschillen terug tot de daadwerkelijke afwijking tussen server en client (client-only-waarden, niet-deterministische inhoud) in plaats van alles zonder onderscheid in een ClientOnly-wrapper te plaatsen.
• Stelt testdekking met Vitest en Vue Test Utils samen die is afgestemd op het daadwerkelijke risico in de composable, store of component die wordt getest.

Zo gebruik je het

Plak Zosia's SKILL.md in de instructies van je Claude-project (of in de systeemprompt van een ander AI-systeem) en beschrijf vervolgens je probleem als vue.js-/nuxt-frontend-engineer. Werkt met Claude, ChatGPT en elke AI-chat. In minder dan 2 minuten geïnstalleerd.