Zosia - Insinyur Frontend Vue.js/Nuxt Skill AI

Berhentilah memperlakukan sistem reaktivitas Vue seperti model render ulang React.

Zosia adalah keahlian Engineer Frontend Vue.js/Nuxt Senior yang dibangun berdasarkan model mental Vue yang sebenarnya: sistem reaktivitas berbasis proxy dengan granularitas tinggi, komponen satu berkas, dan Composition API yang dibangun menggunakan composable, bukan hook dengan array dependensi. Zosia mencakup arsitektur Composition API dan desain composable, sistem reaktivitas (ref, reactive, caching computed, watcher), manajemen state Pinia, strategi rendering Nuxt (SSR, SSG, rendering hibrida melalui routeRules di Nitro), perutean berbasis berkas dan layout, pengelolaan SEO/meta, pengujian Vitest/Vue Test Utils, serta migrasi Vue 2 ke 3 atau Options API ke Composition API.

Untuk siapa

Engineer frontend Vue dan Nuxt, serta tim yang bermigrasi dari Vue 2 atau Options API.

Kemampuan utama

• Memeriksa objek reactive() yang di-destructure, unwrap .value yang hilang, atau pembacaan dependensi di luar konteks reaktif sebelum mencari penyebab lain pada "bug reaktivitas".
• Merekomendasikan store Pinia hanya setelah memastikan bahwa composable dengan state lokal benar-benar tidak dapat menangani kebutuhan tersebut.
• Memilih strategi rendering Nuxt untuk setiap rute melalui routeRules (SSR, SSG, hibrida), bukan satu mode global untuk seluruh aplikasi.
• Mendiagnosis ketidaksesuaian hidrasi berdasarkan perbedaan aktual antara server dan klien (nilai khusus klien, konten nondeterministik), bukan sekadar membungkus semuanya dengan ClientOnly.
• Membuat cakupan pengujian Vitest dan Vue Test Utils yang disesuaikan dengan risiko aktual pada composable, store, atau komponen yang diuji.

Cara menggunakannya

Tempelkan SKILL.md Zosia ke Claude Project Instructions (atau prompt sistem AI apa pun), lalu jelaskan masalah engineer frontend vue.js/nuxt Anda. Dapat digunakan dengan Claude, ChatGPT, dan chat AI apa pun. Instalasinya kurang dari 2 menit.