Cara Skill Agen AI Menggantikan Script Scaffolding Nuxt

Saat kita memulai aplikasi baru menggunakan framework Nuxt, kita harus melalui langkah-langkah yang membosankan seperti menginstal modul dan mengatur konfigurasi seperti nuxt.config.ts dan wrangler.jsonc. Skrip memang bisa menyelesaikan masalah ini, tetapi ia akan mencapai batasnya seiring bertambahnya variasi kebutuhan. Inilah mengapa kami mengeksplorasi dan mengganti skrip dengan sebuah skill agen (agent skill).

Kegunaan Utama Skrip Shell Tradisional

Sebuah skrip sangat baik untuk menjalankan serangkaian instruksi tetap secara berurutan dengan keputusan yang telah ditulis secara kaku di dalam kode (hardcoded).

#!/usr/bin/env bash
set -e

npx nuxi@latest init "$1" --template minimal --packageManager pnpm --no-gitInit -M @nuxt/ui,@nuxthub/core,@vueuse/nuxt

cd "$1"

cp ~/templates/nuxt.config.ts .
cp ~/templates/wrangler.jsonc .

Skrip ini berfungsi dengan baik sampai hal-hal berikut terjadi:

• Nilai default yang kaku. Skrip menetapkan modul Nuxt UI secara kaku; bagaimana jika kita ingin modul Ant Design UI? Setiap opsi modul baru membutuhkan argumen tambahan dari pengguna.
• Tidak dapat membaca niat pengguna. Perintah "Buatkan saya blog" membutuhkan @nuxt/content; "buatkan saya situs web dengan buletin" membutuhkan Cloudflare D1 + Drizzle. Skrip tidak dapat membedakan hal ini — setiap variasi memerlukan skrip baru.
• Menjadi usang secara diam-diam. Aturan konvensi Nuxt berubah antar versi mayor. Nuxt 4 mengubah direktori sumber menjadi app/. Skrip yang ditulis untuk Nuxt 3 akan melakukan inisialisasi (scaffolding) dengan struktur yang salah tanpa pernah memberi tahu pengguna.

Inisialisasi proyek (app scaffolding) adalah masalah pengambilan keputusan, bukan masalah eksekusi. Skrip tidak akan bisa berkembang ketika jumlah keputusan yang harus diambil meningkat.

Mengapa Menggunakan Skill Agen AI Dibandingkan Skrip Tradisional?

Skill agen (agent skill) bukanlah sekumpulan kode yang dieksekusi, melainkan sekumpulan pengetahuan yang diikuti oleh agen AI. Skill ini berisi file SKILL.md dan dapat membundel file lain yang diperlukan untuk tugas tersebut (seperti dokumen referensi, templat, dan skrip yang dapat dieksekusi). Artikel Skill Agen AI: Apa Itu dan Bagaimana Cara Membuatnya menjelaskan bagaimana cara kerja skill agen. Sebuah skill mempertahankan kedisiplinan skrip sekaligus menambahkan penilaian logis yang tidak dimiliki oleh skrip biasa:

• Menyimpulkan niat pengguna untuk menentukan apakah aplikasi memerlukan database.
• Memutuskan modul opsional mana yang diperlukan dari daftar yang ditentukan. Misalnya, Nuxt Content, i18n, dan analitik bersifat opsional berdasarkan permintaan pengguna.
• Menyesuaikan diri dengan ekosistem saat ini menggunakan framework Nuxt terbaru, NuxtHub untuk binding Cloudflare, dan Wrangler untuk deployment.
• Memulihkan diri secara mandiri ketika sebuah langkah gagal.
• Memverifikasi kesesuaian proyek terhadap checklist akhir sebelum menyerahkannya kepada pengguna.

Di Balik Layar Skill Scaffolding Nuxt & Cloudflare Kami

Skill kami, scaffold-nuxt-cloudflare-app-skill, memandu proses inisialisasi yang berorientasi produksi:

1. Mengklarifikasi hal-hal yang tidak dapat disimpulkan secara otomatis:
   • Kit UI (Nuxt UI secara default atau Antdv Next);
   • Apakah database diperlukan (seperti Cloudflare D1);
   • Modul tambahan seperti @nuxtjs/i18n atau @nuxt/content untuk fitur CMS.
2. Membuat scaffolding aplikasi dasar dengan pnpm dlx nuxi@latest init untuk versi framework Nuxt terbaru dengan pnpm sebagai package manager. Kemudian, ia mengatur daftar izin kompilasi asli (native-build allowlists) agar lingkungan build Cloudflare dapat mengompilasi better-sqlite3/sharp.
3. Menginstal modul berdasarkan tabel keputusan: @nuxt/ui atau @antdv-next/nuxt, @nuxt/image, @nuxtjs/seo, @nuxthub/core, @vueuse/nuxt, ditambah Drizzle/D1, Nuxt Content, dan i18n hanya jika dipilih.
4. Menata struktur direktori:
   • app/
   • server/
   • shared/
   • tests/
   • file konfigurasi root.
5. Mengonfigurasi nuxt.config.ts:
   • site.url/site.name untuk SEO
   • Blok hub NuxtHub untuk Cloudflare
   • routeRules
   • compatibilityDate
6. Mengonfigurasi wrangler.jsonc
7. Menyiapkan Vitest dan ESLint, lalu menjalankan checklist akhir termasuk pnpm install && pnpm dev sebelum menganggap pekerjaan selesai.

Skrip Shell vs Skill Agen AI: Perbandingan Langsung

Cara Menginstal Skill Agen AI dengan CLI npx skills

Instalasi dilakukan dengan satu perintah menggunakan skills CLI:

npx skills add https://github.com/Tech-Voyage-Dev/scaffold-nuxt-cloudflare-app-skill.git -g

CLI akan mengkloning repo, menemukan skill tersebut, dan menanyakan agen mana dari 77 agen yang didukung yang akan menerimanya:

Kami memilih Symlink (metode yang direkomendasikan), yang menginstal skill satu kali di ~/.agents/skills dan menghubungkan setiap agen yang dipilih ke satu salinan ini.

• Silakan merujuk ke artikel ini, Mengatasi Fragmentasi Kemampuan Agen AI dengan npx skills, tentang cara memusatkan skill agen dalam satu sumber kebenaran tunggal.

Membuka Claude Code mengonfirmasi bahwa skill tersebut telah berhasil diinstal.

Dari sana, sebuah perintah bahasa alami adalah semua yang Anda butuhkan:

"Scaffold a new Nuxt app deployed to Cloudflare Workers — Nuxt UI, a blog section, and a D1 database"

Skill ini bersifat open source; silakan kunjungi repo GitHub kami dan cobalah sendiri.