---
title: "Cara Skill Agen AI Menggantikan Script Scaffolding Nuxt"
description: "Scaffold Nuxt di Cloudflare Workers dengan mudah. Pelajari mengapa kami mengganti script rapuh dengan skill agen AI dan cara mudah pasang lewat npx skills."
canonical_url: "https://techvoyage.dev/id/article/how-ai-agent-skills-replace-nuxt-app-scaffolding-scripts"
last_updated: "2026-10-20T09:53:44.186Z"
---

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).

```bash
#!/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](/article/ai-agent-skills-what-they-are-how-to-create-them) 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`](https://github.com/Tech-Voyage-Dev/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

<table>
<thead>
  <tr>
    <th>
      
    </th>
    
    <th>
      Skrip
    </th>
    
    <th>
      Skill
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      Niat pengguna
    </td>
    
    <td>
      ❌ nilai default kaku
    </td>
    
    <td>
      ✅ menyesuaikan permintaan
    </td>
  </tr>
  
  <tr>
    <td>
      Pengambilan keputusan
    </td>
    
    <td>
      hanya jika flag diprogram
    </td>
    
    <td>
      ✅ dinilai saat runtime
    </td>
  </tr>
  
  <tr>
    <td>
      Perubahan versi
    </td>
    
    <td>
      penulisan ulang manual
    </td>
    
    <td>
      ✅ memeriksa kondisi saat ini
    </td>
  </tr>
  
  <tr>
    <td>
      Pemulihan kesalahan
    </td>
    
    <td>
      berhenti
    </td>
    
    <td>
      ✅ memperbaiki dan lanjut
    </td>
  </tr>
  
  <tr>
    <td>
      Verifikasi hasil
    </td>
    
    <td>
      ❌
    </td>
    
    <td>
      ✅ checklist akhir
    </td>
  </tr>
  
  <tr>
    <td>
      Biaya pemeliharaan
    </td>
    
    <td>
      penumpukan flag, pembaruan versi
    </td>
    
    <td>
      mengedit Markdown, bukan kode
    </td>
  </tr>
</tbody>
</table>

## Cara Menginstal Skill Agen AI dengan CLI npx skills

Instalasi dilakukan dengan satu perintah menggunakan [skills CLI](https://github.com/vercel-labs/skills):

```bash
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:
![Antarmuka baris perintah yang menunjukkan instalasi skill scaffolding Nuxt menggunakan perintah CLI npx skills add](https://inimages.techvoyage.dev/articles/How%20AI%20Agent%20Skills%20Replace%20Nuxt%20App%20Scaffolding%20Scripts/npx-skills-add-scaffold-nuxt-installation.webp)

Kami memilih **Symlink** (metode yang direkomendasikan), yang menginstal skill satu kali di `~/.agents/skills` dan menghubungkan setiap agen yang dipilih ke satu salinan ini.
![Tampilan terminal yang menunjukkan ringkasan instalasi dan penyiapan symlink untuk skill agen yang terpusat](https://inimages.techvoyage.dev/articles/How%20AI%20Agent%20Skills%20Replace%20Nuxt%20App%20Scaffolding%20Scripts/npx-skills-installation-summary-details.webp)

- *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.

![Antarmuka baris perintah Claude Code menunjukkan perintah slash scaffold-nuxt yang baru diinstal telah aktif dan siap digunakan](https://inimages.techvoyage.dev/articles/How%20AI%20Agent%20Skills%20Replace%20Nuxt%20App%20Scaffolding%20Scripts/claude-code-scaffold-nuxt-slash-command-active.webp)

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](https://github.com/Tech-Voyage-Dev/scaffold-nuxt-cloudflare-app-skill) kami dan cobalah sendiri.