Skip to content

longndwanosoft/nextjs-skill-agent

BranchesTags
 
 

Repository files navigation

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
Loading

Đ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

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
Loading

Ứ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

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

Claude Code CLI

  1. Tạo file cấu hình tại .mcp.json (ở thư mục gốc của project)
  2. Thêm cấu hình MCP server: link
{
  "mcpServers": {
    "server-name": {
      "command": "uvx",
      "args": ["package-name@latest"],
      "env": {},
      "disabled": false,
      "autoApprove": []
    }
  }
}
  1. Restart Claude Code để áp dụng thay đổi

Cursor IDE

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

Gemini Antigravity

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

VS Code

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

Kiro IDE

  1. Tạo file cấu hình tại .kiro/settings/mcp.json
  2. Thêm cấu hình tương tự như Claude Code: link
  3. 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

  • Vercel Skills

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

  1. 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.
  2. 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.
  3. 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

  1. Khởi tạo skill mới:
npx skills init my-custom-skill
  1. Chỉnh sửa file SKILL.md trong thư mục skill
  2. Đị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

Đó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.

  1. Fork repository và tạo feature branch.
  2. Cài đặt dependencies với pnpm install.
  3. Chạy pnpm dev để phát triển local và pnpm local-check trước khi push.
  4. Giữ pnpm-lock.yaml đồng bộ và commit cùng với các thay đổi của bạn.
  5. 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:

  1. 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.
  2. Commit thường xuyên sử dụng chuẩn Conventional Commits (feat:, fix:, docs:, v.v.).
  3. Push branch của bạn và mở pull request vào main sau khi các kiểm tra đã pass.
  4. 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

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • TypeScript 91.1%
  • Shell 7.7%
  • Other 1.2%