Tổng quan

Đây là repository hướng dẫn tích hợp và ứng dụng MCP, Skill, Rule vào dự án để Human và Agent có thể phối hợp đạt được output gần với kỳ vọng nhất.

Lưu ý: Đây không phải là project base code nextjs.

Câu chuyện

Nếu bạn là người mới bắt đầu ứng dụng AI vào việc coding thì nên đọc qua chút, còn nếu bạn là người đã có kinh nghiệm sử dụng thì có thể bỏ qua phần bức tranh mà AI đang thay đổi cách chúng ta coding phát triển phần mềm.

Quá trình phát triển AI Agent trong Coding

timeline
    title Hành trình tiến hóa của AI Agent trong lập trình
    
    section Giai đoạn 1
        Milestone 1 : Code Suggestion Inline
                    : Gợi ý code tự động khi gõ
                    : Autocomplete thông minh
                    : VD: GitHub Copilot, TabNine
    
    section Giai đoạn 2
        Milestone 2 : Prompt + Agent Generate Code Single File
                    : Nhập prompt mô tả yêu cầu
                    : Agent tạo code cho 1 file
                    : Tương tác đơn giản với AI
    
    section Giai đoạn 3
        Milestone 3 : Agent Generate Code Multi-File
                    : Tạo cấu trúc source code hoàn chỉnh
                    : Quản lý nhiều file cùng lúc
                    : Hiểu kiến trúc dự án
    
    section Giai đoạn 4
        Milestone 4 : Context-Aware Agent
                    : Đọc và phân tích hình ảnh
                    : Indexing toàn bộ codebase
                    : Auto-summary conversation
                    : Giữ ngữ cảnh xuyên suốt
    
    section Giai đoạn 5
        Milestone 5 : Multi-Agent System
                    : Hệ thống Multi-Agent
                    : Sub-Agent chuyên biệt
                    : Rule files (.md)
                    : Skill files (.md)
                    : MCP Protocol
                    : Browser Agent Access
    
    section Giai đoạn 6
        Milestone 6 : Software Engineering Agent Cloud
                    : Agent trên cloud
                    : CI/CD tự động
                    : Deployment automation
                    : Full software lifecycle

Điều cần ghi nhớ

Khi cài đặt các MCP, Skill... thì tôi khuyên bạn nên cài vào workspace phạm vi theo từng project, đừng cài vào global
✅ Nên làm: Cài đặt vào workspace của từng project (.kiro/, .cursor/, .claude/...) để dễ quản lý và tùy chỉnh theo nhu cầu riêng
❌ Không nên làm: Cài đặt global (filesystem) cho tất cả projects vì sẽ khó kiểm soát version và conflict giữa các dự án (/home/xxxxx/.cursor/mcp.json)

Danh sách các phần

RULE Cursor | Antigravity | ClaudeCode
Command Cursor | Antigravity | ClaudeCode
MCP
SKILL
README cho Agent - Nếu Human cần file README.md để overview dự án, thì Agent cũng cần 1 cái tương tự và đó là file file AGENTS.md (dễ nhiên là nội dung 2 file này sẽ phải khác nhau, 1 cái cho HUMAN đọc 1 cái cho Machine đọc)
- https://vercel.com/blog/agents-md-outperforms-skills-in-our-agent-evals

Thực sự thì mấy ông mẽo là chuyên gia trong việc phức tạp hóa mọi vấn đề lên: rule, skill khác nhau ở đâu?

Mọi người cứ hiểu đơn giản, rule là những cái quy tắc mà Agent bắt buộc phải tuân thủ khi bước vào dự án, giống kiểu học sinh đến trường thì phải theo bộ rule mặc đồng phục, đi đúng giờ. Skill là những kiến thực chuyên biệt mà agent phải học để có thể vào dự án, giống kiểu học sinh đến trường thì sẽ được học các môn học riêng, toán, lý...

Ví dụ:

Rule: style code, structure folder, name convention
SKill: bộ kỹ năng, tip, trick rect best particle, next performance...

MCP

Khái niệm

MCP (Model Context Protocol) là giao thức chuẩn cho phép các AI Agent giao tiếp và tương tác với các nguồn dữ liệu, công cụ và dịch vụ bên ngoài một cách nhất quán. MCP cung cấp một lớp trừu tượng giúp Agent có thể truy cập thông tin và thực thi các tác vụ mà không cần phải tích hợp riêng lẻ từng dịch vụ. Hiểu đơn giản có nhiều nguồn data, đừng bắt Agent phải tạo 1 protocal riêng cho từng nguồn data.

Hãy hiểu đơn giản khi Agent muốn truy cập lấy data từ google docs, hay lấy data từ database mysql. Theo tư duy thông thường thì sử dụng API để agent request đến và nhận response. OMG sẽ ra sao nếu ta có hàng trăm service data cần tích hợp, vì thế cần đưa chúng về 1 cái chuẩn, 1 protocal duy nhất để giúp AGENT lấy được data của mọi nguồn mà không cần custom giao thức cho từng nguồn riêng lẻ.

flowchart LR
    subgraph AI["Ứng dụng AI"]
        A1["Giao diện Chat<br/>Claude Desktop, LibreChat"]
        A2["IDE và Trình soạn thảo<br/>Claude Code, Goose"]
        A3["Ứng dụng AI khác<br/>Sire, Superinterface"]
    end
    
    subgraph MCP["MCP<br/>Giao thức chuẩn hóa"]
        M[("Luồng dữ liệu<br/>hai chiều")]
    end
    
    subgraph Tools["Nguồn dữ liệu và Công cụ"]
        T1["Hệ thống dữ liệu và File<br/>PostgreSQL, SQLite, GDrive"]
        T2["Công cụ phát triển<br/>Git, Sentry, v.v."]
        T3["Công cụ năng suất<br/>Slack, Google Maps, v.v."]
    end
    
    A1 -->|Luồng dữ liệu<br/>hai chiều| M
    A2 -->|Luồng dữ liệu<br/>hai chiều| M
    A3 -->|Luồng dữ liệu<br/>hai chiều| M
    
    M -->|Luồng dữ liệu<br/>hai chiều| T1
    M -->|Luồng dữ liệu<br/>hai chiều| T2
    M -->|Luồng dữ liệu<br/>hai chiều| T3
    
    style MCP fill:#B8D4E8,stroke:#5A8FB8,stroke-width:3px
    style AI fill:#F0F0F0,stroke:#999,stroke-width:2px
    style Tools fill:#F0F0F0,stroke:#999,stroke-width:2px

Ứng dụng

Truy cập dữ liệu: Kết nối với cơ sở dữ liệu, API, file system, figma, document framework, ví dụ cho phép agent đọc figma để generate ra code...

Danh sách MCP Server được cài

MCP NextJS: next-devtools-mcp
MCP Shadcn: shadcn@latest
MCP Figma Remote Server: fima remote server
- cần bật figma mode dev, mất phí nhé mọi người

Cách cài đặt trên từng Agent IDE

Claude Code CLI

Tạo file cấu hình tại .mcp.json (ở thư mục gốc của project)
Thêm cấu hình MCP server: link

{
  "mcpServers": {
    "server-name": {
      "command": "uvx",
      "args": ["package-name@latest"],
      "env": {},
      "disabled": false,
      "autoApprove": []
    }
  }
}

Restart Claude Code để áp dụng thay đổi

Cursor IDE

Tạo file cấu hình tại .cursor/mcp.json
Thêm cấu hình tương tự như Claude Code link
Restart Cursor để áp dụng thay đổi

Gemini Antigravity

Tạo file cấu hình tại .gemini/antigravity/mcp_config.json
Cấu hình theo format của Claude Code link
Reload extension để áp dụng

VS Code

Tạo file cấu hình tại .vscode/mcp.json
Cài đặt extension hỗ trợ MCP (nếu có) link
Cấu hình server theo format chuẩn

Kiro IDE

Tạo file cấu hình tại .kiro/settings/mcp.json
Thêm cấu hình tương tự như Claude Code: link
Khởi động lại Kiro hoặc reconnect MCP server từ MCP Server view

SKILL

Khái niệm

Skill là các kỹ năng hoặc kiến thức chuyên môn chuyên biệt được định nghĩa sẵn mà Agent có thể sử dụng để thực hiện các tác vụ cụ thể. Mỗi skill đại diện cho một kiến thức riêng biệt mà bạn muốn Agent học để nạp vào đầu nó. Hoặc nó cũng có thể là 1 workflow chuyên biệt đang được dùng trong dự án mà bạn muốn agent nạp vào đầu.

Ứng dụng

Sự thật: Với các model on top ở thời điểm hiện tại như claude Opus 4.5, Codex 5.2 thì cá nhân mình thấy mấy cái kiểu react-best-particle, nextjs performance...nó đều xử lý bá đạo rồi. Nhưng cái nó thiếu là những mẹo, tips, trick được đúc kết trong quá trình làm dự án do Human note lại, nó không thể biết những bài vở đó, vì đó là những bài vở mà có thể chỉ dự án của bạn mới có, chỉ dự án bạn mới gặp phải.

Marketplace

"Chợ": Giống như MCP thì Skill cũng có cái chợ riêng, mọi người có thể upload những bộ skill lên đấy, hiện tại có nhiều chợ nhưng mình recommand bạn sử dụng chợ của Vercel Skill.sh

Cách một Skill hoạt động

Discovery (Phát hiện): Khi khởi động, agent tải name và description metadata của mỗi skill — đủ để biết nó có thể phù hợp khi nào.
Activation (Kích hoạt): Khi một nhiệm vụ trùng với mô tả của skill, agent tải toàn bộ nội dung SKILL.md vào ngữ cảnh.
Execution (Thực thi): Agent thực hiện theo hướng dẫn, có thể tải thêm các file tham chiếu hoặc chạy mã đi kèm khi cần.

Cách tiếp cận này giúp agent nhanh, nhẹ, nhưng vẫn có thể truy cập nhiều thông tin chi tiết khi cần.

À format file không ràng buộc nhé, chỉ required name và description, còn nội dung ở dưới thì viết như nào cũng được. Specfication

Skills CLI

Skills CLI (npx skills) là package manager cho hệ sinh thái agent skills. Bạn có thể tìm kiếm và cài đặt skills từ cộng đồng.

Các lệnh chính:

npx skills find [query]        # Tìm kiếm skills
npx skills add <package>       # Cài đặt skill
npx skills check               # Kiểm tra cập nhật
npx skills update              # Cập nhật tất cả skills

Duyệt skills tại: https://skills.sh/

Cách cài đặt Skill trên từng Agent IDE

Lưu ý: Ở thời điểm 05/02/2026 symlinked đang bị lỗi với Cursor IDE, Cursor không thể load được symlinked

Cursor IDE

Thư mục: .cursor/skills/

npx skills add <owner/repo@skill> --dir .cursor/skills

Ví dụ:

npx skills add vercel-labs/skills@find-skills --dir .cursor/skills

Restart Cursor để áp dụng thay đổi.

Claude Code CLI

Thư mục: .claude/skills/

npx skills add <owner/repo@skill> --dir .claude/skills

Ví dụ:

npx skills add vercel-labs/skills@find-skills --dir .claude/skills

Skill sẽ được tải tự động khi khởi động Claude Code.

Google Antigravity

Thư mục: .agent/skills/

npx skills add <owner/repo@skill> --dir .agent/skills

Ví dụ:

npx skills add vercel-labs/skills@find-skills --dir .agent/skills

Skill sẽ được tải tự động khi khởi động Claude Code.

Codex

Thư mục: .codex/skills/

npx skills add <owner/repo@skill> --dir .codex/skills

Ví dụ:

npx skills add vercel-labs/skills@find-skills --dir .codex/skills

Reload Codex để nhận diện skill mới.

GitHub Copilot (VSCode)

Thư mục: .github/skills/

npx skills add <owner/repo@skill> --dir .github/skills

Ví dụ:

npx skills add vercel-labs/skills@find-skills --dir .github/skills

Skills sẽ được GitHub Copilot tự động nhận diện trong workspace.

Kiro IDE

Thư mục: .kiro/skills/

npx skills add <owner/repo@skill> --dir .kiro/skills

Ví dụ:

npx skills add vercel-labs/skills@find-skills --dir .kiro/skills

Skill sẽ tự động được tải khi Kiro khởi động.

Cài đặt Global (cho tất cả projects)

Để cài đặt skill ở cấp độ user (áp dụng cho tất cả projects):

npx skills add <owner/repo@skill> -g -y

Danh sách skills được cài đặt

Tạo Skill tùy chỉnh

Khởi tạo skill mới:

npx skills init my-custom-skill

Chỉnh sửa file SKILL.md trong thư mục skill
Định nghĩa rõ ràng:
- name: Tên skill
- description: Mô tả chức năng
- Nội dung hướng dẫn sử dụng

Sử dụng Skill

Agent sẽ tự động nhận diện và sử dụng skills đã cài đặt
Bạn có thể yêu cầu Agent sử dụng skill cụ thể trong prompt

AGENT.md

Khái niệm

README.md dành cho Agent

Ứng dụng

Giúp agent đọc README theo cách mà agent suy nghĩ, (không phải cách mà HUMAN nhập môn vào dự án nhé)

Có một bài so sánh AGENT.md với Skill, với Rule...Cái nào hiệu quả hơn

Agent Skills (biết kích hoạt khi phù hợp)
AGENTS.md (file Markdown luôn có sẵn trong dự án, mọi lúc nói cách khác agent luôn thêm nó vào context trong mọi turn conversation)

Lý giải một vài lý do:

Không cần “quyết định có nên đọc docs hay không”

Skills yêu cầu agent phải tự chọn lúc nào cần tải skill → agent bỏ qua skill rất thường xuyên hoặc sai chiến lược trigger. Còn AGENTS.md luôn sẵn trong ngữ cảnh, agent không cần lựa chọn hay invoke gì cả.
Luôn có sẵn trong mỗi turn

Thông tin trong AGENTS.md là persistent context, nên agent luôn thấy chúng mà không cần “đọc từ bên ngoài”. Điều này giúp tránh việc agent bỏ sót hoặc load không đúng lúc.
Không có vấn đề về ordering (thứ tự)

Với Skills, có thể agent đọc docs trước hoặc sau khi khám phá project — và subtle wording (cách viết instruction) gây khác biệt rất lớn trong kết quả. Cách này mong manh và dễ thất bại. Còn AGENTS.md thì không có quyết định đó, nên ổn định hơn.

Cách thiết lập AGENTS.md giống Vercel

Vercel cung cấp một command giúp tự động xây setup mà họ dùng trong Next.js evals:

npx @next/codemod@canary agents-md

Lệnh này sẽ:

Phát hiện phiên bản Next.js đang dùng
Tải tài liệu tương ứng về .next-docs/
Tiêm một chỉ mục (compressed index) vào AGENTS.md để agent biết nơi đọc docs đúng phiên bản. ([Vercel][1])

Đóng góp

Mọi đóng góp đều được chào đón! Vui lòng tạo Pull Request hoặc Issue để thảo luận về các cải tiến.

Fork repository và tạo feature branch.
Cài đặt dependencies với pnpm install.
Chạy pnpm dev để phát triển local và pnpm local-check trước khi push.
Giữ pnpm-lock.yaml đồng bộ và commit cùng với các thay đổi của bạn.
Gửi PR mô tả các thay đổi của bạn.

# fork repo trên GitHub

git clone https://github.com/<your-username>/nextjs-skill-agent.git
cd nextjs-skill-agent

git checkout -b feature/my-change
# sửa code...
git add .
git commit -m "Add my change"
git push origin feature/my-change

🧭 Quy trình Git

Chúng tôi tuân theo quy trình trunk-based đơn giản:

Tạo feature branch từ main với tên mô tả rõ ràng, ví dụ: feature/add-search hoặc fix/header-layout.
Commit thường xuyên sử dụng chuẩn Conventional Commits (feat:, fix:, docs:, v.v.).
Push branch của bạn và mở pull request vào main sau khi các kiểm tra đã pass.
Yêu cầu review, giải quyết feedback kịp thời, và squash-merge sử dụng tiêu đề conventional commit.

✅ Hướng dẫn commit message

Husky chạy commit-msg hook để validate tiêu đề commit trước khi lưu. Dòng đầu tiên phải tuân theo định dạng Conventional Commits:

type(scope?): mô tả ngắn gọn

Các type được phép: build, chore, ci, docs, feat, fix, perf, refactor, revert, style, test
Subject: tối đa 72 ký tự, viết ở thể mệnh lệnh, không có khoảng trắng đầu/cuối
Scope (tùy chọn): các từ viết thường phân tách bằng -, /, hoặc .

Ví dụ về commit message hợp lệ:

feat(search): add fuzzy match for suggestions
fix: trim user input before submit
chore: update dependencies

Merge commits (Merge ...) và automatic reverts (Revert "...") bỏ qua validation để tương thích với các thao tác trên GitHub UI.

License

MIT License

Name		Name	Last commit message	Last commit date
Latest commit History 29 Commits
.agent/skills		.agent/skills
.agents/skills		.agents/skills
.claude/skills		.claude/skills
.codex/skills/find-skills		.codex/skills/find-skills
.cursor		.cursor
.gemini/antigravity		.gemini/antigravity
.github		.github
.husky		.husky
.kiro		.kiro
.vscode		.vscode
public		public
scripts		scripts
src		src
.gitignore		.gitignore
.mcp.json		.mcp.json
AGENTS.md		AGENTS.md
README.md		README.md
biome.json		biome.json
components.json		components.json
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

Uh oh!

Folders and files

Latest commit

History

Repository files navigation

Tổng quan

Câu chuyện

Quá trình phát triển AI Agent trong Coding

Điều cần ghi nhớ

Danh sách các phần

MCP

Khái niệm

Ứng dụng

Danh sách MCP Server được cài

Cách cài đặt trên từng Agent IDE

Claude Code CLI

Cursor IDE

Gemini Antigravity

VS Code

Kiro IDE

SKILL

Khái niệm

Ứng dụng

Marketplace

Cách một Skill hoạt động

Skills CLI

Cách cài đặt Skill trên từng Agent IDE

Cursor IDE

Claude Code CLI

Google Antigravity

Codex

GitHub Copilot (VSCode)

Kiro IDE

Cài đặt Global (cho tất cả projects)

Danh sách skills được cài đặt

Tạo Skill tùy chỉnh

Sử dụng Skill

AGENT.md

Khái niệm

Ứng dụng

Có một bài so sánh AGENT.md với Skill, với Rule...Cái nào hiệu quả hơn

Cách thiết lập AGENTS.md giống Vercel

Đóng góp

🧭 Quy trình Git

✅ Hướng dẫn commit message

License

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages