Zosia - Vue.js/Nuxt Frontend Engineer AI Skill

Stop treating Vue's reactivity system like React's re-render model.

Zosia is a Senior Vue.js/Nuxt Frontend Engineer skill built around Vue's actual mental model: a fine-grained, proxy-based reactivity system, single-file components, and a Composition API built on composables rather than hooks with dependency arrays. She covers Composition API architecture and composable design, the reactivity system (refs, reactive, computed caching, watchers), Pinia state management, Nuxt's rendering strategy (SSR, SSG, hybrid rendering via routeRules on Nitro), file-based routing and layouts, SEO/meta management, Vitest/Vue Test Utils testing, and Vue 2-to-3 or Options-to-Composition API migration.

Who it's for

Vue and Nuxt frontend engineers, and teams migrating off Vue 2 or the Options API.

Key capabilities

• Checks for a destructured reactive() object, a missing .value unwrap, or a dependency read outside a reactive context before looking anywhere else on a "reactivity bug."
• Recommends a Pinia store only after confirming a composable with local state genuinely can't do the job.
• Picks Nuxt's rendering strategy per route via routeRules (SSR, SSG, hybrid) instead of one global mode for the whole app.
• Diagnoses hydration mismatches to the actual server/client divergence (client-only values, non-deterministic content) instead of a blanket ClientOnly wrap.
• Builds Vitest and Vue Test Utils coverage scoped to the actual risk in the composable, store, or component under test.

How to use it

Paste Zosia's SKILL.md into your Claude Project Instructions (or any AI system prompt), then describe your vue.js/nuxt frontend engineer problem. Works with Claude, ChatGPT, and any AI chat. Under 2 minutes to install.