Cách kỹ năng Agent AI thay thế script khởi tạo ứng dụng Nuxt

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.

#!/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 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 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

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:

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ợ:

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.

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

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 và trải nghiệm thử nhé.