ai-developer-skill-os 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,31 @@
+# Changelog
+
+All notable changes to the **AI Developer Skill OS** project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.0.0] - 2026-07-01
+
+### Added
+- Released the complete AI Developer Skill OS with 23 targeted skills for coding agents.
+- **Engineering Core (8 skills):**
+  - `agent-orchestrator` for planning and delegating tasks.
+  - `context-manager` for project context and file selection.
+  - `project-audit` for 3-mode health checks.
+  - `bug-fix` with root cause analysis.
+  - `refactor` for safe, behavior-preserving code restructuring.
+  - `migration` for dependency updates and library swapping.
+  - `api-integration` for robust API connections.
+  - `git-engineer` for commit messages and PR documentation.
+- **Frontend Core (11 skills):**
+  - `frontend-architecture`, `design-system`, `ui-builder`, `component-generator`.
+  - `state-management`, `form-builder`, `table-crud-generator`.
+  - `frontend-debug`, `frontend-testing`, `accessibility-audit`, `frontend-performance`.
+- **Backend Core (4 skills):**
+  - `backend-architecture`, `database-engineer`, `auth-security`, `deployment`.
+- Added comprehensive `skills.json` registry with dependencies and trigger keywords.
+- Added bilingual `README.md` (English/Vietnamese).
+- Added detailed user documentation in `docs/HUONG_DAN_SU_DUNG.md` and `docs/CHI_TIET_SKILLS.md`.
+- Translated all skill frontmatter descriptions to Vietnamese for better UX in agent terminals.
+- Included generic English and Vietnamese usage examples in `_template/examples/`.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Quang Khánh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,142 @@
+# AI Developer Skill OS
+
+**A multi-agent skill package for AI coding assistants.**
+Bộ skill package đa nền tảng cho AI coding assistant.
+
+> Tác giả: **Quang Khánh**
+> Compatible with: **Claude Code · Kilo Code · Antigravity/Gemini IDE · Cursor · Windsurf**
+
+📚 **Tài liệu hữu ích:**
+- [Hướng dẫn sử dụng](file:///docs/HUONG_DAN_SU_DUNG.md)
+- [Chi tiết toàn bộ Skills (Tiếng Việt)](file:///docs/CHI_TIET_SKILLS.md)
+
+---
+
+## What is this? / Đây là gì?
+
+**EN:** A structured collection of skills that transform AI coding agents into specialized engineering roles. Each skill defines a precise workflow, scope, rules, and output format — so AI consistently behaves like a senior engineer, not a random code generator.
+
+**VI:** Bộ skill có cấu trúc biến AI coding agent thành các vai trò kỹ sư chuyên biệt. Mỗi skill định nghĩa workflow, phạm vi, quy tắc và định dạng output rõ ràng — để AI hoạt động nhất quán như senior engineer, không phải code generator tùy tiện.
+
+---
+
+## Skill Map / Sơ đồ Skill
+
+```
+agent-orchestrator  →  Plan only. Routes work to correct skills.
+context-manager     →  Understands project structure. Manages what to read.
+project-audit       →  Diagnoses codebase before any changes.
+         ↓
+frontend-architecture  →  Decides file placement and folder conventions.
+design-system          →  Enforces component library usage.
+         ↓
+ui-builder · component-generator · form-builder · table-crud-generator
+         ↓
+api-integration    →  FE ↔ BE contract layer.
+state-management   →  Chooses correct state strategy.
+         ↓
+bug-fix · frontend-debug · refactor · migration
+         ↓
+frontend-testing · accessibility-audit · frontend-performance
+         ↓
+git-engineer       →  Commit, PR, changelog, release.
+```
+
+---
+
+## Skills / Danh sách Skill
+
+### Engineering (8 skills)
+| Skill | Purpose |
+|-------|---------|
+| `agent-orchestrator` | Plans tasks, routes to correct skills — never writes code |
+| `context-manager` | Selects relevant files, summarizes architecture |
+| `project-audit` | Full codebase health check (Quick / Standard / Full mode) |
+| `bug-fix` | Diagnose and fix specific bugs with evidence |
+| `refactor` | Safe restructuring without breaking behavior |
+| `api-integration` | Build production-ready API integration layers |
+| `migration` | Dependency upgrades and framework migrations |
+| `git-engineer` | Commit messages, PR descriptions, changelogs |
+
+### Frontend (11 skills)
+| Skill | Purpose |
+|-------|---------|
+| `frontend-architecture` | Folder structure, file placement conventions |
+| `design-system` | Enforce component library — no raw HTML elements |
+| `ui-builder` | Build UI screens from requirements |
+| `component-generator` | Generate typed, reusable components |
+| `state-management` | Choose and implement correct state layer |
+| `form-builder` | Forms with schema validation and error handling |
+| `table-crud-generator` | Admin tables with pagination, filter, sort, CRUD |
+| `frontend-debug` | React errors, hydration, state, CSS issues |
+| `frontend-testing` | Unit, component, and e2e tests |
+| `frontend-performance` | Bundle, render, lazy load optimization |
+| `accessibility-audit` | ARIA, contrast, keyboard, mobile accessibility |
+
+### Backend (4 skills)
+| Skill | Purpose |
+|-------|---------|
+| `backend-architecture` | Service / controller / repository pattern |
+| `database-engineer` | Schema design, migrations, indexing |
+| `auth-security` | JWT, OAuth, RBAC implementation |
+| `deployment` | CI/CD, Docker, environment configuration |
+
+---
+
+## Installation / Cài đặt
+
+### Antigravity / Gemini IDE
+
+Place this folder in your `.agents/skills/` directory:
+
+```
+your-project/
+└── .agents/
+    └── skills/        ← copy the `skills/` folder here
+        ├── engineering/
+        ├── frontend/
+        └── backend/
+```
+
+Or register globally in `C:\Users\<you>\.gemini\config\skills\`.
+
+### Claude Code / Kilo Code / Cursor
+
+Reference skills from your project rules file (`.cursorrules`, `CLAUDE.md`, etc.):
+
+```md
+Use skills from: ./rules-skill/skills/
+When the user requests [task], load the appropriate SKILL.md and follow it precisely.
+```
+
+---
+
+## Language / Ngôn ngữ
+
+| Layer | Language |
+|-------|----------|
+| SKILL.md content | 🇬🇧 English |
+| Code, identifiers | 🇬🇧 English always |
+| AI responses | Matches user's language automatically |
+| README, docs | 🇬🇧 English + 🇻🇳 Vietnamese |
+
+---
+
+## Contributing / Đóng góp
+
+1. Copy `_template/SKILL.md`
+2. Fill in all sections (Trigger, Scope, Non-goals, Workflow, Decision Tree, Output Format, Validation, Examples)
+3. Add to `skills.json` with `trigger[]` and `dependencies[]`
+4. Add to correct category folder under `skills/`
+
+---
+
+## Version / Phiên bản
+
+**v1.0.0** — Initial release.
+Engineering foundation + Frontend core complete.
+
+---
+
+*Tác giả: Quang Khánh*
+*Được xây dựng cho cộng đồng AI engineering.*

package/_template/SKILL.md

@@ -0,0 +1,154 @@
+---
+name: <skill-name>
+description: >-
+  <1-3 lines in English. This is used for trigger matching across all AI agents.
+  Be specific and action-oriented. Avoid vague words.>
+version: 1.0.0
+category: engineering | frontend | backend
+tags: [tag1, tag2, tag3]
+platforms: [antigravity, claude-code, kilo-code, cursor, windsurf]
+---
+
+# <Skill Name>
+
+> **Language rule:**
+> Use **English** for: code, identifiers, file names, architecture terms, technical decisions.
+> Use **the user's language** for: explanations, questions, summaries, and feedback.
+> The user may write in any language — detect and match it automatically.
+
+---
+
+## Trigger
+
+When to activate this skill. List specific conditions, user intents, and keywords.
+
+Examples:
+- User says "create a new page"
+- User provides a UI mockup or wireframe
+- User asks to "build", "design", or "implement" a screen
+
+---
+
+## Scope
+
+What this skill is responsible for. Be explicit.
+
+- ✅ [What it covers]
+- ✅ [What it covers]
+
+---
+
+## Non-goals
+
+What this skill must NOT do. This prevents scope creep.
+
+- ❌ Do NOT [action A]
+- ❌ Do NOT [action B]
+- ❌ Do NOT make changes beyond the stated task
+
+---
+
+## Severity Levels
+
+All findings, issues, and risks use this shared scale:
+
+| Level | Label | Meaning |
+|-------|-------|---------|
+| P0 | Critical | Must fix before any other work |
+| P1 | High | Fix in current session |
+| P2 | Medium | Schedule soon |
+| P3 | Low | Technical debt — fix when possible |
+
+---
+
+## Workflow
+
+### Phase 1 — <Discovery / Analysis>
+
+What to analyze, read, or understand first.
+
+- Read: [files / folders / configs]
+- Detect: [patterns / issues / context]
+- Output: [brief summary of findings]
+
+---
+
+### Phase 2 — <Planning>
+
+Before writing any code, produce a plan.
+
+- List what will change and why
+- Identify risks or conflicts
+- Confirm with user if scope is unclear
+
+---
+
+### Phase 3 — <Execution>
+
+Apply changes following the plan.
+
+Rules:
+- Smallest safe change
+- Preserve existing behavior unless explicitly changing it
+- Follow project conventions (naming, structure, style)
+- Do not introduce unnecessary dependencies
+
+---
+
+### Phase 4 — <Validation>
+
+Verify the output before finishing.
+
+- [ ] Does it match the requirement?
+- [ ] Are edge cases handled?
+- [ ] No regressions introduced?
+- [ ] Output format is complete?
+
+---
+
+## Decision Tree
+
+Use this to handle branching logic during execution:
+
+```
+Condition A?
+  ├── Yes → Action X
+  └── No  → Condition B?
+              ├── Yes → Action Y
+              └── No  → Ask user for clarification
+```
+
+---
+
+## Output Format
+
+Define exactly what the AI must produce at the end of this skill.
+
+Example:
+```
+✅ Summary:     <what was done>
+📁 Files:       <list of created/modified files>
+⚠️  Warnings:   <anything the user should know>
+🔗 Next steps:  <suggested follow-up skills or actions>
+```
+
+---
+
+## Validation Checklist
+
+Before marking this skill complete:
+
+- [ ] All phases completed
+- [ ] Output format produced
+- [ ] No TODOs or placeholder code left
+- [ ] No hardcoded secrets, URLs, or credentials
+- [ ] Follows project naming conventions
+- [ ] User has been informed of any side effects
+
+---
+
+## Examples
+
+See `examples/` folder for:
+- `example-en.md` — English input/output example
+- `example-vi.md` — Vietnamese input/output example

package/_template/examples/example-en.md

@@ -0,0 +1,49 @@
+---
+# AI Developer Skill OS
+# Example usage file (English)
+# Copy this as a starting point for your skill examples
+---
+
+# Example: [Skill Name]
+
+## Input
+
+**User request:**
+```
+[Describe what the user said or asked]
+```
+
+**Project context:**
+- Framework: [React 18 / Next.js 14 / Vue 3 / etc.]
+- Relevant files: `[path/to/file.ts]`
+- Current state: [Brief description]
+
+---
+
+## Execution
+
+**Skill activated:** `[skill-name]`
+
+**Phase 1 — Analysis:**
+> [What the AI analyzed]
+
+**Phase 2 — Plan:**
+> [What the AI decided to do]
+
+**Phase 3 — Output:**
+
+```typescript
+// [filename.ts]
+// [Generated or modified code]
+```
+
+---
+
+## Result
+
+```
+✅ Summary:    [What was done]
+📁 Files:      [List of files]
+⚠️  Warnings:  [Any notes]
+🔗 Next steps: [Follow-up suggestion]
+```

package/_template/examples/example-vi.md

@@ -0,0 +1,49 @@
+---
+# AI Developer Skill OS
+# File ví dụ sử dụng (Tiếng Việt)
+# Sao chép file này làm điểm khởi đầu cho ví dụ của bạn
+---
+
+# Ví dụ: [Tên Skill]
+
+## Input (Đầu vào)
+
+**Yêu cầu của người dùng:**
+```
+[Mô tả người dùng đã nói hoặc yêu cầu gì]
+```
+
+**Bối cảnh dự án:**
+- Framework: [React 18 / Next.js 14 / Vue 3 / v.v.]
+- File liên quan: `[path/to/file.ts]`
+- Trạng thái hiện tại: [Mô tả ngắn]
+
+---
+
+## Thực thi
+
+**Skill được kích hoạt:** `[skill-name]`
+
+**Phase 1 — Phân tích:**
+> [AI đã phân tích gì]
+
+**Phase 2 — Kế hoạch:**
+> [AI quyết định làm gì]
+
+**Phase 3 — Kết quả:**
+
+```typescript
+// [filename.ts]
+// [Code được tạo hoặc chỉnh sửa]
+```
+
+---
+
+## Kết quả
+
+```
+✅ Tóm tắt:       [Đã làm gì]
+📁 Files:         [Danh sách file]
+⚠️  Lưu ý:        [Ghi chú quan trọng]
+🔗 Bước tiếp theo: [Gợi ý skill hoặc hành động tiếp theo]
+```

package/bin/install.js

@@ -0,0 +1,56 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+
+const sourceDir = path.join(__dirname, '..');
+const targetDir = path.join(process.cwd(), 'rules-skill');
+
+function copyRecursiveSync(src, dest) {
+  const exists = fs.existsSync(src);
+  const stats = exists && fs.statSync(src);
+  const isDirectory = exists && stats.isDirectory();
+  
+  if (isDirectory) {
+    if (!fs.existsSync(dest)) {
+      fs.mkdirSync(dest, { recursive: true });
+    }
+    fs.readdirSync(src).forEach(function(childItemName) {
+      copyRecursiveSync(path.join(src, childItemName), path.join(dest, childItemName));
+    });
+  } else {
+    fs.copyFileSync(src, dest);
+  }
+}
+
+console.log('🚀 Đang cài đặt AI Developer Skill OS...');
+
+const filesAndFolders = [
+  'skills', 
+  '_template', 
+  'docs', 
+  'skills.json', 
+  'README.md', 
+  'CHANGELOG.md', 
+  'LICENSE'
+];
+
+try {
+  if (!fs.existsSync(targetDir)) {
+    fs.mkdirSync(targetDir, { recursive: true });
+  }
+
+  filesAndFolders.forEach(item => {
+    const src = path.join(sourceDir, item);
+    const dest = path.join(targetDir, item);
+    if (fs.existsSync(src)) {
+      copyRecursiveSync(src, dest);
+    }
+  });
+
+  console.log('✅ Đã cài đặt thành công vào thư mục: ./rules-skill/');
+  console.log('\n💡 Tiếp theo, hãy tham khảo ./rules-skill/docs/HUONG_DAN_SU_DUNG.md để cấu hình cho AI của bạn nhé!');
+} catch (error) {
+  console.error('❌ Có lỗi xảy ra trong quá trình cài đặt:', error.message);
+  process.exit(1);
+}

package/docs/CHI_TIET_SKILLS.md

@@ -0,0 +1,117 @@
+# Chi Tiết 23 Skills — AI Developer Skill OS
+
+**Tác giả:** Quang Khánh  
+**Phiên bản:** v1.0.0
+
+Tài liệu này giải thích chi tiết chức năng của từng Skill trong bộ Skill OS.
+AI sẽ đọc mô tả (description) bằng tiếng Anh để nhận diện, nhưng bạn có thể đọc tài liệu tiếng Việt này để hiểu AI có thể làm được gì.
+
+---
+
+## 🛠️ Nhóm 1: Engineering Core (Kỹ thuật Cốt lõi)
+
+Đây là các kỹ năng chung quản lý toàn bộ dự án, kiến trúc và mã nguồn.
+
+### 1. `agent-orchestrator` (Người Điều Phối)
+- **Mô tả:** AI không tự viết code mà đóng vai trò như một Project Manager. Phân tích yêu cầu phức tạp của bạn, chia nhỏ thành các tác vụ (Task) và quyết định gọi các Skill nào theo thứ tự nào.
+- **Khi nào dùng:** Khi bạn giao một việc lớn ("Làm cho tôi tính năng thanh toán") mà không biết bắt đầu từ đâu.
+
+### 2. `context-manager` (Quản Lý Ngữ Cảnh)
+- **Mô tả:** Xác định file nào cần đọc, đọc cấu trúc thư mục, ghi nhớ kiến trúc hệ thống để AI không bị "quên" hoặc đọc tràn ngập các file không cần thiết.
+- **Khi nào dùng:** Khi bắt đầu một dự án mới tinh, hoặc khi AI cần nắm bắt bức tranh tổng thể.
+
+### 3. `project-audit` (Kiểm Toán Dự Án)
+- **Mô tả:** Quét toàn bộ mã nguồn hoặc các file bạn vừa thay đổi để tìm kiếm bug tiềm ẩn, code smell, lỗ hổng bảo mật hoặc nợ kỹ thuật. AI sẽ xuất ra một báo cáo khám bệnh chi tiết.
+- **Khi nào dùng:** Trước khi refactor lớn, trước khi release, hoặc muốn kiểm tra code mình viết có sạch không.
+
+### 4. `bug-fix` (Chuyên Gia Sửa Lỗi)
+- **Mô tả:** Dò tìm nguyên nhân gốc rễ (root cause) của một lỗi dựa trên stack trace hoặc mô tả của bạn. Không chữa cháy tạm thời, cung cấp bản fix tối thiểu và an toàn nhất.
+- **Khi nào dùng:** Khi app bị crash, test fail, màn hình trắng.
+
+### 5. `refactor` (Tái Cấu Trúc Code)
+- **Mô tả:** Làm sạch code, tách hàm, tách component, xóa code thừa, dọn dẹp biến mà **không làm thay đổi logic hoạt động**.
+- **Khi nào dùng:** Khi code quá rối rắm (spaghetti code), cần dọn dẹp cho dễ bảo trì.
+
+### 6. `api-integration` (Kỹ Sư Tích Hợp API)
+- **Mô tả:** Nhận bất kỳ input nào (curl, swagger, postman, backend controller) và sinh ra một lớp gọi API hoàn chỉnh cho Frontend (Type chuẩn, xử lý lỗi, call Axios/Fetch/React Query).
+- **Khi nào dùng:** Khi Backend vừa làm xong API và bạn cần nối nó vào Frontend.
+
+### 7. `migration` (Nâng Cấp Hệ Thống)
+- **Mô tả:** Nâng cấp an toàn các thư viện cũ (như React 17 lên 19), chuyển đổi thư viện (Moment sang Date-fns) theo mô hình tăng dần, có kế hoạch Rollback.
+- **Khi nào dùng:** Khi cần update package có lỗ hổng bảo mật hoặc chuyển framework.
+
+### 8. `git-engineer` (Quản Lý Git & Release)
+- **Mô tả:** Viết commit message cực chuẩn theo Conventional Commits, viết mô tả Pull Request, sinh Changelog và Release Notes cho sếp/khách hàng đọc.
+- **Khi nào dùng:** Khi code xong và cần đẩy code lên hoặc chuẩn bị release version mới.
+
+---
+
+## 🎨 Nhóm 2: Frontend (Giao Diện)
+
+Nhóm chuyên biệt cho việc xây dựng giao diện người dùng (UI/UX).
+
+### 9. `frontend-architecture` (Kiến Trúc Frontend)
+- **Mô tả:** Đọc hiểu và ép AI phải tuân thủ việc đặt file ở đâu cho đúng chuẩn của project (Features-based, Layer-based, DDD...).
+- **Khi nào dùng:** Khi không biết nên tạo file component mới ở thư mục nào.
+
+### 10. `design-system` (Hệ Thống Thiết Kế)
+- **Mô tả:** Ép AI phải dùng thư viện UI có sẵn (MUI, Shadcn, Tailwind...) thay vì tự viết HTML chay hay CSS inline lộn xộn.
+- **Khi nào dùng:** Đi kèm khi xây dựng UI để giữ tính nhất quán.
+
+### 11. `ui-builder` (Xây Dựng Giao Diện)
+- **Mô tả:** Lắp ráp các component nhỏ thành một màn hình/trang hoàn chỉnh, xử lý layout (Grid/Flexbox) và responsive (di động/máy tính).
+- **Khi nào dùng:** Khi bạn đưa wireframe/mockup và bảo "Làm cho tôi màn hình Dashboard".
+
+### 12. `component-generator` (Tạo Component Đơn Lẻ)
+- **Mô tả:** Sinh ra các mảnh ghép UI nhỏ, tái sử dụng được (như Button, Card, Dropdown) với Props Type an toàn.
+- **Khi nào dùng:** Khi cần tạo một UI Component dùng chung.
+
+### 13. `state-management` (Quản Lý Trạng Thái)
+- **Mô tả:** Phân tích dữ liệu và quyết định nên dùng React Query, Redux, Zustand hay chỉ là useState local. Setup các store hoàn chỉnh.
+- **Khi nào dùng:** Khi phải truyền Props quá sâu, hoặc cần lưu cache dữ liệu.
+
+### 14. `form-builder` (Chuyên Gia Làm Form)
+- **Mô tả:** Sinh ra các Form phức tạp với validate đầu vào (Zod, Yup) kết hợp React Hook Form. Hiển thị báo lỗi chuẩn mực.
+- **Khi nào dùng:** Làm màn hình Đăng ký, Đăng nhập, Tạo mới dữ liệu.
+
+### 15. `table-crud-generator` (Làm Bảng Dữ Liệu)
+- **Mô tả:** Sinh ra bảng Data Grid hoàn chỉnh có phân trang (pagination), lọc, sắp xếp và các nút hành động (Thêm/Sửa/Xóa).
+- **Khi nào dùng:** Làm trang Admin quản trị.
+
+### 16. `frontend-debug` (Sửa Lỗi Frontend)
+- **Mô tả:** Chuyên trị các lỗi khó chịu của UI như: Hydration Error (Next.js), Infinite Re-render (lặp vô tận), lỗi vỡ CSS layout.
+- **Khi nào dùng:** Lỗi vỡ giao diện hoặc lỗi render của React.
+
+### 17. `frontend-testing` (Kiểm Thử UI)
+- **Mô tả:** Viết Unit Test, Component Test (React Testing Library) hay E2E Test (Cypress/Playwright) giả lập hành vi người dùng thật.
+- **Khi nào dùng:** Khi sếp yêu cầu tăng Test Coverage hoặc bọc test cho tính năng quan trọng.
+
+### 18. `accessibility-audit` (Kiểm Tra Tiếp Cận)
+- **Mô tả:** Đảm bảo trang web chuẩn WCAG, dùng đúng thẻ Semantic HTML, có thể dùng phím Tab để điều hướng và hỗ trợ phần mềm đọc màn hình cho người khiếm thị.
+- **Khi nào dùng:** Làm các project chuẩn quốc tế, nhà nước, hoặc tối ưu SEO nâng cao.
+
+### 19. `frontend-performance` (Tối Ưu Hiệu Năng)
+- **Mô tả:** Chữa bệnh web chạy chậm. Tối ưu ảnh, chẻ nhỏ file JS (Code splitting, Lazy load), thêm `useMemo/useCallback` để tránh giật lag.
+- **Khi nào dùng:** Điểm Google Lighthouse thấp, web bị khựng khi cuộn.
+
+---
+
+## ⚙️ Nhóm 3: Backend (Máy Chủ)
+
+Nhóm chuyên biệt cho việc xây dựng và quản lý API, máy chủ.
+
+### 20. `backend-architecture` (Kiến Trúc Backend)
+- **Mô tả:** Phân chia rạch ròi đâu là Controller (xử lý HTTP), đâu là Service (Xử lý nghiệp vụ), đâu là Repository (Gọi Database) để code không bị thành một đống bùi nhùi.
+- **Khi nào dùng:** Cấu trúc file cho backend mới hoặc thêm module mới.
+
+### 21. `database-engineer` (Kỹ Sư Cơ Sở Dữ Liệu)
+- **Mô tả:** Thiết kế schema, vẽ quan hệ bảng, sinh script Migration, tối ưu hóa câu lệnh truy vấn (SQL, Prisma, Drizzle, MongoDB).
+- **Khi nào dùng:** Cần thêm bảng mới vào DB hoặc API truy vấn DB quá chậm.
+
+### 22. `auth-security` (Bảo Mật & Phân Quyền)
+- **Mô tả:** Triển khai đăng nhập JWT, OAuth, thiết lập phân quyền (Admin vs User), phòng chống hacker tấn công bằng các cấu hình bảo mật chuẩn OWASP.
+- **Khi nào dùng:** Làm tính năng đăng nhập, bảo vệ API nhạy cảm.
+
+### 23. `deployment` (Triển Khai DevOps)
+- **Mô tả:** Viết Dockerfile, cấu hình CI/CD bằng GitHub Actions, thiết lập luồng tự động build và deploy lên Vercel, AWS hoặc VPS.
+- **Khi nào dùng:** Lúc cần đưa code lên môi trường production cho khách hàng xem.