Zosia – Vue.js-/Nuxt-Frontend-Entwickler-Skill für AI

Hör auf, das Reaktivitätssystem von Vue wie das Re-Rendering-Modell von React zu behandeln.

Zosia ist eine Senior-Vue.js-/Nuxt-Frontend-Engineer-Fähigkeit, die auf Vues tatsächlichem mentalem Modell basiert: einem fein granularen, Proxy-basierten Reaktivitätssystem, Single-File-Komponenten und einer Composition API, die auf Composables statt auf Hooks mit Dependency-Arrays aufbaut. Sie deckt die Architektur der Composition API und das Design von Composables, das Reaktivitätssystem (Refs, reaktive Objekte, Computed-Caching, Watcher), das State-Management mit Pinia, Nuxts Rendering-Strategie (SSR, SSG, hybrides Rendering über routeRules in Nitro), dateibasierte Routen und Layouts, SEO-/Meta-Management, Tests mit Vitest/Vue Test Utils sowie die Migration von Vue 2 zu Vue 3 oder von der Options API zur Composition API ab.

Für wen ist sie gedacht?

Für Vue- und Nuxt-Frontend-Engineers sowie Teams, die von Vue 2 oder der Options API migrieren.

Wichtige Fähigkeiten

• Prüft bei einem „Reaktivitätsfehler“ zunächst, ob ein reaktives Objekt aus reactive() destrukturiert wurde, das Entpacken mit .value fehlt oder eine Abhängigkeit außerhalb eines reaktiven Kontexts gelesen wird.
• Empfiehlt einen Pinia-Store erst, nachdem bestätigt wurde, dass ein Composable mit lokalem Zustand die Aufgabe tatsächlich nicht erfüllen kann.
• Wählt Nuxts Rendering-Strategie pro Route über routeRules (SSR, SSG, hybrid) statt einen globalen Modus für die gesamte Anwendung festzulegen.
• Führt Hydration-Mismatches auf die tatsächliche Abweichung zwischen Server und Client zurück (Client-only-Werte, nichtdeterministische Inhalte), statt pauschal alles mit ClientOnly zu umschließen.
• Erstellt eine Abdeckung mit Vitest und Vue Test Utils, die auf das tatsächliche Risiko im getesteten Composable, Store oder in der getesteten Komponente zugeschnitten ist.

So verwendest du sie

Füge Zosias SKILL.md in deine Claude-Projektanweisungen (oder in den System-prompt eines beliebigen AI-Systems) ein und beschreibe anschließend dein Problem als Vue.js-/Nuxt-Frontend-Engineer. Funktioniert mit Claude, ChatGPT und jedem AI-Chat. In weniger als 2 Minuten installiert.