---
title: "Cách kỹ năng Agent AI thay thế script khởi tạo ứng dụng Nuxt"
description: "Khởi tạo Nuxt trên Cloudflare Workers dễ dàng. Tìm hiểu lý do tại sao chúng tôi thay thế shell script bằng kỹ năng Agent AI và cách cài đặt qua npx skills."
canonical_url: "https://techvoyage.dev/vi/article/how-ai-agent-skills-replace-nuxt-app-scaffolding-scripts"
last_updated: "2026-10-20T09:53:51.218Z"
---

Khi bắt đầu một ứng dụng mới bằng framework Nuxt, chúng ta phải trải qua các bước tẻ nhạt như cài đặt các module và thiết lập các cấu hình như `nuxt.config.ts` và `wrangler.jsonc`. Một đoạn script có thể giải quyết vấn đề này, nhưng nó sẽ chạm giới hạn khi các biến thể yêu cầu ngày càng tăng. Đây là lý do tại sao chúng tôi đã tìm hiểu và thay thế các script truyền thống bằng một **kỹ năng của agent** (agent skill).

## Những gì mà Script Shell truyền thống làm tốt

Một script rất giỏi trong việc thực thi một tập hợp các hướng dẫn cố định theo trình tự với các quyết định được viết cứng (hardcode) trong mã nguồn.

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

Script này hoạt động tốt cho đến khi các vấn đề sau xảy ra:

- **Các giá trị mặc định cố định.** Đoạn script hardcode module Nuxt UI; điều gì xảy ra nếu chúng ta muốn dùng module Ant Design UI? Mỗi tùy chọn module mới lại yêu cầu một đối số (argument) khác từ người dùng.
- **Không thể đọc được ý định của người dùng.** Yêu cầu "Xây dựng cho tôi một trang blog" cần `@nuxt/content`; "xây dựng cho tôi một trang web có bản tin (newsletter)" cần Cloudflare D1 + Drizzle. Script không thể phân biệt được sự khác biệt này — mỗi biến thể lại cần một script mới.
- **Trở nên lỗi thời một cách lặng lẽ.** Các quy ước của Nuxt thay đổi giữa các phiên bản lớn. Nuxt 4 đã thay đổi thư mục nguồn thành `app/`. Một đoạn script được viết cho Nuxt 3 sẽ âm thầm khởi tạo (scaffold) sai cấu trúc thư mục mà không bao giờ cảnh báo cho người dùng.

**Khởi tạo ứng dụng** (app scaffolding) là một vấn đề về mặt quyết định chứ không phải thực thi. Đoạn script sẽ không thể mở rộng khi số lượng quyết định tăng lên.

## Tại sao nên sử dụng Kỹ năng Agent AI thay vì Script truyền thống?

Kỹ năng của agent (agent skill) không phải là một tập hợp mã nguồn để thực thi, mà là một **tập hợp kiến thức mà agent AI sẽ tuân theo**. Nó chứa tệp `SKILL.md` và có thể đóng gói bất kỳ tệp nào khác mà tác vụ yêu cầu (như tài liệu tham khảo, mẫu template và các script thực thi). Bài viết [Kỹ năng của Agent AI: Chúng là gì và cách tạo lập chi tiết](/article/ai-agent-skills-what-they-are-how-to-create-them) giải thích chi tiết cách thức hoạt động của một kỹ năng agent. Một kỹ năng giữ nguyên sự chuẩn xác của một đoạn script đồng thời bổ sung thêm các đánh giá hợp lý mà script còn thiếu:

- Suy luận ra ý định của người dùng để quyết định xem ứng dụng có cần cơ sở dữ liệu hay không.
- Quyết định xem module tùy chọn nào là cần thiết từ danh sách được chỉ định. Ví dụ: Nuxt Content, i18n và công cụ phân tích là các tùy chọn bổ sung theo yêu cầu người dùng.
- Thích ứng với hệ sinh thái hiện tại bằng cách sử dụng framework Nuxt mới nhất, NuxtHub cho các liên kết Cloudflare và Wrangler để triển khai (deploy).
- Tự phục hồi khi một bước thực hiện bị thất bại.
- Xác minh lại thông qua một danh sách kiểm tra (checklist) cuối cùng trước khi bàn giao dự án cho người dùng.

## Đằng sau hậu trường của Kỹ năng Scaffolding Nuxt & Cloudflare của chúng tôi

Kỹ năng [`scaffold-nuxt-cloudflare-app-skill`](https://github.com/Tech-Voyage-Dev/scaffold-nuxt-cloudflare-app-skill) dẫn dắt qua một quy trình khởi tạo hướng tới môi trường sản xuất (production):

1. **Làm rõ bất kỳ điều gì** không thể tự động suy luận:

  - UI kit (mặc định là **Nuxt UI** hoặc **Antdv Next**);
  - Có cần cơ sở dữ liệu hay không (chẳng hạn như Cloudflare D1);
  - Các module bổ sung như `@nuxtjs/i18n` hoặc `@nuxt/content` cho các tính năng CMS.
2. **Khởi tạo ứng dụng cơ bản** bằng lệnh `pnpm dlx nuxi@latest init` để lấy phiên bản mới nhất của framework Nuxt với `pnpm` làm trình quản lý gói. Sau đó, nó thiết lập danh sách cho phép build gốc (native-build allowlists) để môi trường build của Cloudflare có thể biên dịch `better-sqlite3`/`sharp`.
3. **Cài đặt các module từ bảng quyết định**: `@nuxt/ui` hoặc `@antdv-next/nuxt`, `@nuxt/image`, `@nuxtjs/seo`, `@nuxthub/core`, `@vueuse/nuxt`, cộng với Drizzle/D1, Nuxt Content và i18n chỉ khi được chọn.
4. **Bố trí cấu trúc thư mục**:

  - `app/` (chuẩn Nuxt 4)
  - `server/`
  - `shared/`
  - `tests/`
  - các tệp cấu hình ở thư mục gốc.
5. **Cấu hình nuxt.config.ts**:

  - `site.url`/`site.name` cho SEO
  - Khối `hub` của NuxtHub cho Cloudflare
  - `routeRules`
  - `compatibilityDate`
6. **Cấu hình wrangler.jsonc**
7. **Thiết lập Vitest và ESLint**, sau đó chạy **checklist cuối cùng** bao gồm `pnpm install && pnpm dev` trước khi hoàn thành công việc.

## Script Shell vs Kỹ năng Agent AI: So sánh trực tiếp

<table>
<thead>
  <tr>
    <th>
      
    </th>
    
    <th>
      Script
    </th>
    
    <th>
      Kỹ năng
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      Ý định của người dùng
    </td>
    
    <td>
      ❌ giá trị mặc định cố định
    </td>
    
    <td>
      ✅ thích ứng theo yêu cầu
    </td>
  </tr>
  
  <tr>
    <td>
      Ra quyết định
    </td>
    
    <td>
      chỉ khi lập trình sẵn flag
    </td>
    
    <td>
      ✅ đánh giá tại thời điểm chạy
    </td>
  </tr>
  
  <tr>
    <td>
      Thay đổi phiên bản
    </td>
    
    <td>
      viết lại thủ công
    </td>
    
    <td>
      ✅ kiểm tra trạng thái hiện tại
    </td>
  </tr>
  
  <tr>
    <td>
      Khắc phục lỗi
    </td>
    
    <td>
      dừng hoạt động
    </td>
    
    <td>
      ✅ sửa lỗi và tiếp tục
    </td>
  </tr>
  
  <tr>
    <td>
      Xác minh kết quả
    </td>
    
    <td>
      ❌
    </td>
    
    <td>
      ✅ checklist cuối cùng
    </td>
  </tr>
  
  <tr>
    <td>
      Chi phí bảo trì
    </td>
    
    <td>
      phình to flag, cập nhật phiên bản
    </td>
    
    <td>
      chỉnh sửa Markdown, không sửa code
    </td>
  </tr>
</tbody>
</table>

## Cách cài đặt Kỹ năng Agent AI bằng CLI npx skills

Cài đặt cực kỳ đơn giản chỉ với một lệnh duy nhất bằng [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 sẽ clone repo, tìm kỹ năng và hỏi xem nên áp dụng cho agent nào trong số 77 agent được hỗ trợ:
![Giao diện dòng lệnh hiển thị quá trình cài đặt kỹ năng scaffolding Nuxt bằng câu lệnh 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)

Chúng tôi chọn **Symlink** (phương pháp được đề xuất), phương pháp này cài đặt kỹ năng một lần duy nhất vào thư mục `~/.agents/skills` và liên kết tất cả các agent được chọn tới bản sao duy nhất này.
![Màn hình terminal hiển thị tóm tắt cài đặt và thiết lập symlink cho các kỹ năng agent tập trung](https://inimages.techvoyage.dev/articles/How%20AI%20Agent%20Skills%20Replace%20Nuxt%20App%20Scaffolding%20Scripts/npx-skills-installation-summary-details.webp)

- *Vui lòng tham khảo bài viết này, Giải quyết sự phân mảnh kỹ năng của Agent AI với npx skills, để biết cách tập trung hóa các kỹ năng của agent vào một nguồn sự thật duy nhất (source of truth).*

Mở Claude Code sẽ xác nhận kỹ năng đã được cài đặt thành công.

![Giao diện dòng lệnh Claude Code hiển thị lệnh gạch chéo scaffold-nuxt mới được cài đặt, đang hoạt động và sẵn sàng sử dụng](https://inimages.techvoyage.dev/articles/How%20AI%20Agent%20Skills%20Replace%20Nuxt%20App%20Scaffolding%20Scripts/claude-code-scaffold-nuxt-slash-command-active.webp)

Từ đó, một câu lệnh bằng ngôn ngữ tự nhiên là tất cả những gì bạn cần:

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

Kỹ năng này hoàn toàn là mã nguồn mở; hãy truy cập [repo GitHub](https://github.com/Tech-Voyage-Dev/scaffold-nuxt-cloudflare-app-skill) và trải nghiệm thử nhé.