Zosia - Vue.js/Nuxt Frontend Mühendisi AI Skill

Vue'nun reaktivite sistemine React'in yeniden render modelini kullanıyormuş gibi yaklaşmayı bırakın.

Zosia, Vue'nun gerçek zihinsel modeli üzerine kurulmuş bir Kıdemli Vue.js/Nuxt Frontend Mühendisi becerisidir: ince ayrıntılı, proxy tabanlı bir reaktivite sistemi, tek dosyalı bileşenler ve bağımlılık dizilerine sahip kancalar yerine composable'lar üzerine kurulu bir Composition API. Composition API mimarisi ve composable tasarımı, reaktivite sistemi (ref'ler, reactive, computed önbelleğe alma, watcher'lar), Pinia durum yönetimi, Nuxt'ın işleme stratejisi (Nitro üzerinden routeRules ile SSR, SSG ve hibrit işleme), dosya tabanlı yönlendirme ve layout'lar, SEO/meta yönetimi, Vitest/Vue Test Utils testleri ve Vue 2'den 3'e veya Options API'den Composition API'ye geçiş konularını ele alır.

Kimler için

Vue ve Nuxt frontend mühendisleri ile Vue 2'den veya Options API'den geçiş yapan ekipler.

Temel yetenekler

• Bir "reaktivite hatası" hakkında başka hiçbir yere bakmadan önce destructure edilmiş bir reactive() nesnesi, eksik bir .value açılımı veya reaktif bağlam dışında okunan bir bağımlılık olup olmadığını kontrol eder.
• Yerel duruma sahip bir composable'ın gerçekten işi yapamayacağını doğruladıktan sonra Pinia store önerir.
• Tüm uygulama için tek bir global mod kullanmak yerine Nuxt'ın işleme stratejisini routeRules aracılığıyla her rota için seçer (SSR, SSG, hibrit).
• Hydration uyuşmazlıklarını, her şeyi kapsayan bir ClientOnly sarmalaması önermek yerine gerçek sunucu/istemci farklılığına (istemciye özel değerler, deterministik olmayan içerik) dayandırarak teşhis eder.
• Vitest ve Vue Test Utils kapsamını, test edilen composable, store veya bileşendeki gerçek riske göre oluşturur.

Nasıl kullanılır?

Zosia'nın SKILL.md dosyasını Claude Project Instructions'a (veya herhangi bir AI system prompt'una) yapıştırın, ardından vue.js/nuxt frontend mühendisi sorununuzu açıklayın. Claude, ChatGPT ve tüm AI sohbetleriyle çalışır. Kurulumu 2 dakikadan kısa sürer.