# Trang 3.2: Skills - Hệ thống kỹ năng và kiến thức chuyên sâu cho AI. ## 1. Skill là gì? **Skill** là một gói kiến thức chuyên biệt chứa các nguyên lý, mẫu thiết kế (patterns) và khung ra quyết định (decision-making framework) cho một lĩnh vực cụ thể. ### Skills khác gì so với template code thông thường?
Đặc điểmTemplate Code Thông thườngSkill trong Antigravity Kit
**Bản chất**Code mẫu cứng nhắc để copyNguyên lý để suy nghĩ và quyết định
**Tính linh hoạt**Cố định, áp sát một patternThích nghi theo ngữ cảnh dự án
**Kết quả**Code giống nhau cho mọi trường hợpCode phù hợp với yêu cầu cụ thể
> **Ví dụ:** Thay vì đưa cho bạn một template API cố định, Skill `api-patterns` dạy AI *cách quyết định* khi nào dùng REST, khi nào dùng GraphQL, và khi nào dùng tRPC dựa trên ngữ cảnh dự án của bạn.
---
## 2. Cách Skills được tải (Load on-demand) Skills **không** được tải toàn bộ một lúc. Chúng được tải **theo yêu cầu** theo 3 cơ chế:
1. **Cấu hình Agent:** Mỗi Agent trong YAML frontmatter liệt kê các Skills nó được phép truy cập (trường `skills:`). 2. **Ngữ cảnh tác vụ:** Khi nhận yêu cầu, AI đọc mô tả của các Skills có liên quan và chỉ tải những Skill thực sự cần thiết. 3. **Đọc có chọn lọc:** Chỉ đọc các section cần thiết trong **SKILL.md**, không đọc toàn bộ để tối ưu hiệu suất.
```html Ví dụ: Yêu cầu: "Tạo API endpoint cho giỏ hàng" │ ▼ backend-specialist được kích hoạt │ ▼ Tải: api-patterns + nodejs-best-practices + database-design │ ▼ Không tải: mobile-design, seo-fundamentals, red-team-tactics... ```
---
## 3. Cấu trúc một Skill ```html .agent/skills/react-best-practices/ ├── SKILL.md # Bắt buộc — Metadata, nguyên lý chính, khung quyết định ├── sections/ # Tùy chọn — Hướng dẫn chi tiết theo từng chủ đề nhỏ ├── examples/ # Tùy chọn — Ví dụ triển khai tham khảo thực tế ├── scripts/ # Tùy chọn — Script Python/Bash có thể chạy tự động └── assets/ # Tùy chọn — Hình ảnh, assets tham khảo ``` **Phần đầu của**
**SKILL.md (Frontmatter YAML):**
```html yaml --- name: react-best-practices description: React & Next.js performance optimization from Vercel Engineering. allowed-tools: Read, Write, Edit, Bash --- ```
---
## 4. Danh sách đầy đủ 36 Skills theo nhóm ### 🎨 Frontend & UI (5 Skills)
SkillMô tả
`react-best-practices`Tối ưu React & Next.js — 57 quy tắc từ Vercel Engineering
`web-design-guidelines`Kiểm toán UI web — 100+ quy tắc về Accessibility, UX, Performance
`tailwind-patterns`Tailwind CSS v4, CSS-first config, container queries
`frontend-design`Hệ thống thiết kế, bảng màu, typography, micro-animations
`ui-ux-pro-max`**50 phong cách** thiết kế, **21 bảng màu**, **50 font chữ** chuyên nghiệp
### ⚙️ Backend & API (4 Skills)
SkillMô tả
`api-patterns`Thiết kế API: REST vs GraphQL vs tRPC, versioning, pagination
`nestjs-expert`NestJS modules, DI container, decorators, Guards
`nodejs-best-practices`Node.js async patterns, bảo mật, kiến trúc module
`python-patterns`FastAPI, Django, async vs sync, type hints, Pydantic v2
### 🗄️ Database (2 Skills)
SkillMô tả
`database-design`Thiết kế schema, chiến lược indexing, tránh N+1 query
`prisma-expert`Prisma ORM, migrations, relations, query optimization
### 📝 TypeScript / JavaScript (1 Skill)
SkillMô tả
`typescript-expert`Lập trình kiểu nâng cao (generics, conditional types), hiệu năng biên dịch
### ☁️ Cloud & Infrastructure (3 Skills)
SkillMô tả
`docker-expert`Containerization, Docker Compose, multi-stage builds
`deployment-procedures`CI/CD, chiến lược deploy 5 giai đoạn, rollback
`server-management`Quản lý process, monitoring, scaling
### 🧪 Testing & Quality (5 Skills)
SkillMô tả
`testing-patterns`Pyramid kiểm thử, Jest/Vitest, AAA pattern, mocking
`webapp-testing`E2E testing, Playwright, audit chiến lược sâu
`tdd-workflow`Vòng lặp RED-GREEN-REFACTOR, test-first development
`code-review-checklist`Tiêu chuẩn review code: chất lượng, bảo mật, best practice
`lint-and-validate`ESLint, Prettier, TypeScript strict mode
### 🔒 Security (2 Skills)
SkillMô tả
`vulnerability-scanner`OWASP 2025, Supply Chain Security, phân tích lỗ hổng
`red-team-tactics`Chiến thuật tấn công theo MITRE ATT&CK, báo cáo penetration test
### 🏗️ Architecture & Planning (4 Skills)
SkillMô tả
`app-builder`Tạo khung ứng dụng full-stack, chọn tech stack, phối hợp Agent
`architecture`ADR (Architecture Decision Records), đánh đổi trade-off
`plan-writing`Phân rã công việc, định nghĩa phụ thuộc, tiêu chí xác minh
`brainstorming`Giao thức Socratic: đặt câu hỏi làm rõ trước khi triển khai
### 📱 Mobile (1 Skill)
SkillMô tả
`mobile-design`Touch interaction, Mobile-first, iOS/Android conventions
### 🎮 Game Development (1 Skill)
SkillMô tả
`game-development`Logic game, cơ học vật lý, vòng lặp game loop
### 🔍 SEO & Growth (2 Skills)
SkillMô tả
`seo-fundamentals`E-E-A-T, Core Web Vitals, Google algorithm principles
`geo-fundamentals`Generative Engine Optimization (tối ưu cho AI search: ChatGPT, Perplexity)
### 💻 Shell / CLI (2 Skills)
SkillMô tả
`bash-linux`Linux commands, piping, error handling, scripting
`powershell-windows`PowerShell operators, quản lý lỗi, pitfalls
### 🔧 Other (6 Skills)
SkillMô tả
`clean-code`Tiêu chuẩn code sạch toàn cục, không over-engineering
`behavioral-modes`Các chế độ hoạt động AI (brainstorm, implement, debug, ship...)
`parallel-agents`Mẫu điều phối đa Agent, phân chia công việc độc lập
`mcp-builder`Xây dựng MCP Server, thiết kế tool & resource patterns
`documentation-templates`Cấu trúc README, API docs, comment code
`i18n-localization`Phát hiện hardcoded string, quản lý translations, RTL
`performance-profiling`Core Web Vitals, đo lường, bundle analysis
`systematic-debugging`Quy trình 4 giai đoạn: Discovery → Hypothesis → Verification → Resolution
`rust-pro`Rust 1.75+, async/await, Tokio, axum, systems programming
---
## 5. Skills đặc biệt kèm theo công cụ thực thi Các Skills sau không chỉ cung cấp kiến thức mà còn có **scripts Python** để Agent có thể tự động kiểm tra:
SkillScriptTác dụng
`vulnerability-scanner``security_scan.py`Quét lỗ hổng bảo mật trong dependencies
`lint-and-validate``lint_runner.py`Chạy ESLint, kiểm tra type errors
`database-design``schema_validator.py`Kiểm tra tính nhất quán schema DB
`testing-patterns``test_runner.py`Chạy bộ test tự động (Jest/Vitest)
`frontend-design``ux_audit.py`, `accessibility_checker.py`Kiểm tra UX Laws và WCAG Accessibility
`seo-fundamentals``seo_checker.py`Kiểm tra meta tags, cấu trúc heading
`performance-profiling``lighthouse_audit.py`, `bundle_analyzer.py`Đo lường Lighthouse score và bundle size
`webapp-testing``playwright_runner.py`Chạy E2E test với Playwright
`mobile-design``mobile_audit.py`Kiểm tra responsive và touch targets
---
## 6. Cách Skills được tích hợp với Agents (ví dụ thực tế) ```html frontend-specialist.md: --- skills: react-best-practices, frontend-design, tailwind-patterns, web-design-guidelines --- Khi yêu cầu: "Tạo component card sản phẩm đẹp và dễ tiếp cận" │ Agent tải: ├── react-best-practices → Áp dụng Server Components, tránh re-render thừa ├── frontend-design → Chọn bảng màu, spacing hợp lý ├── tailwind-patterns → Viết class Tailwind đúng chuẩn v4 └── web-design-guidelines → Đảm bảo ARIA labels, contrast ratio ```