487 lines
26 KiB
Markdown
487 lines
26 KiB
Markdown
# Hướng Dẫn Nhanh Bằng Hình Ảnh (Visual Quick Start)
|
|
|
|
**Trăm nghe không bằng một thấy!** Hướng dẫn này sử dụng sơ đồ và ví dụ trực quan để giúp bạn hiểu cách hoạt động của Skills.
|
|
|
|
---
|
|
|
|
## Bức Tranh Toàn Cảnh
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ BẠN (Lập trình viên) │
|
|
│ ↓ │
|
|
│ "Giúp tôi xây dựng hệ thống thanh toán nhé" │
|
|
│ ↓ │
|
|
1├─────────────────────────────────────────────────────────────┤
|
|
│ TRỢ LÝ AI │
|
|
│ ↓ │
|
|
│ Nạp skill @stripe-integration │
|
|
│ ↓ │
|
|
│ Trở thành chuyên gia thanh toán Stripe │
|
|
│ ↓ │
|
|
│ Cung cấp hướng dẫn chuyên sâu kèm code mẫu │
|
|
│ ↓ │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## 📦 Cấu trúc Thư mục (Trực quan)
|
|
|
|
```
|
|
antigravity-awesome-skills/
|
|
│
|
|
├── 📄 README.vi.md ← Tổng quan & Danh sách (Bắt đầu ở đây)
|
|
├── 📄 GETTING_STARTED.vi.md ← Hướng dẫn nhập môn
|
|
├── 📄 CONTRIBUTING.vi.md ← Hướng dẫn đóng góp
|
|
├── 📄 FAQ.vi.md ← Câu hỏi thường gặp
|
|
│
|
|
├── 📁 skills/ ← Hơn 250 skill nằm ở đây
|
|
│ │
|
|
│ ├── 📁 brainstorming/
|
|
│ │ └── 📄 SKILL.md ← Định nghĩa Skill
|
|
│ │
|
|
│ ├── 📁 stripe-integration/
|
|
│ │ ├── 📄 SKILL.md
|
|
│ │ └── 📁 examples/ ← Các ví dụ đi kèm
|
|
│ │
|
|
│ └── ... (250+ skill khác)
|
|
│
|
|
├── 📁 scripts/ ← Các công cụ quản lý
|
|
│ ├── validate_skills.py ← Trình kiểm tra chất lượng
|
|
│ └── generate_index.py ← Trình tạo mục lục
|
|
│
|
|
├── 📁 .github/
|
|
│ └── 📄 MAINTENANCE.md ← Hướng dẫn bảo trì
|
|
│
|
|
└── 📁 docs/ ← Tài liệu
|
|
├── 📄 BUNDLES.vi.md ← Gói khởi điểm (Starter Packs)
|
|
├── 📄 QUALITY_BAR.md ← Tiêu chuẩn chất lượng
|
|
├── 📄 SKILL_ANATOMY.md ← Cấu tạo của một skill
|
|
└── 📄 VISUAL_GUIDE.vi.md ← Chính là file này!
|
|
```
|
|
|
|
---
|
|
|
|
## Cách Skill hoạt động (Sơ đồ luồng)
|
|
|
|
```
|
|
┌──────────────┐
|
|
│ 1. CÀI ĐẶT │ Copy skills vào thư mục .agent/skills/
|
|
└──────┬───────┘
|
|
│
|
|
↓
|
|
┌──────────────┐
|
|
│ 2. RA LỆNH │ Gõ: @ten-skill trong khung chat với AI
|
|
└──────┬───────┘
|
|
│
|
|
↓
|
|
┌──────────────┐
|
|
│ 3. NẠP │ AI đọc nội dung file SKILL.md
|
|
└──────┬───────┘
|
|
│
|
|
↓
|
|
┌──────────────┐
|
|
│ 4. THỰC THI │ AI làm theo hướng dẫn trong skill
|
|
└──────┬───────┘
|
|
│
|
|
↓
|
|
┌──────────────┐
|
|
│ 5. KẾT QUẢ │ Bạn nhận được sự hỗ trợ chuyên sâu!
|
|
└──────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## 🎯 Phân loại Skill (Bản đồ tư duy)
|
|
|
|
```
|
|
┌─────────────────────────┐
|
|
│ 250+ SKILL TUYỆT ĐỈNH │
|
|
└────────────┬────────────┘
|
|
│
|
|
┌────────────────────────┼────────────────────────┐
|
|
│ │ │
|
|
┌────▼────┐ ┌──────▼──────┐ ┌──────▼──────┐
|
|
│ SÁNG TẠO│ │ PHÁT TRIỂN │ │ BẢO MẬT │
|
|
│ (10) │ │ (25) │ │ (50) │
|
|
└────┬────┘ └──────┬──────┘ └──────┬──────┘
|
|
│ │ │
|
|
• Thiết kế UI/UX • TDD (Test) • Ethical Hacking
|
|
• Nghệ thuật Canvas • Debugging • Metasploit
|
|
• Tạo Theme • React Patterns • Burp Suite
|
|
• SQLMap
|
|
│ │ │
|
|
└────────────────────────┼────────────────────────┘
|
|
│
|
|
┌────────────────────────┼────────────────────────┐
|
|
│ │ │
|
|
┌────▼────┐ ┌──────▼──────┐ ┌──────▼──────┐
|
|
│ AI │ │ TÀI LIỆU │ │ MARKETING │
|
|
│ (30) │ │ (4) │ │ (23) │
|
|
└────┬────┘ └──────┬──────┘ └──────┬──────┘
|
|
│ │ │
|
|
• Hệ thống RAG • DOCX • SEO
|
|
• LangGraph • PDF • Viết quảng cáo
|
|
• Prompt Eng. • PPTX • CRO
|
|
• Voice Agents • XLSX • Chạy Ads
|
|
```
|
|
|
|
---
|
|
|
|
## Giải phẫu một Skill
|
|
|
|
````
|
|
┌─────────────────────────────────────────────────────────┐
|
|
│ SKILL.md │
|
|
├─────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ ┌───────────────────────────────────────────────┐ │
|
|
│ │ FRONTMATTER (Metadata - Dữ liệu mô tả) │ │
|
|
│ │ ───────────────────────────────────────────── │ │
|
|
│ │ --- │ │
|
|
│ │ name: my-skill │ │
|
|
│ │ description: "Skill này làm cái gì" │ │
|
|
│ │ --- │ │
|
|
│ └───────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ ┌───────────────────────────────────────────────┐ │
|
|
│ │ CONTENT (Nội dung hướng dẫn) │ │
|
|
│ │ ───────────────────────────────────────────── │ │
|
|
│ │ │ │
|
|
│ │ # Tên Skill │ │
|
|
│ │ │ │
|
|
│ │ ## Tổng quan │ │
|
|
│ │ Skill này giúp bạn... │ │
|
|
│ │ │ │
|
|
│ │ ## Khi nào dùng │ │
|
|
│ │ - Dùng khi... │ │
|
|
│ │ │ │
|
|
│ │ ## Hướng dẫn │ │
|
|
│ │ 1. Bước một... │ │
|
|
│ │ 2. Bước hai... │ │
|
|
│ │ │ │
|
|
│ │ ## Ví dụ │ │
|
|
│ │ ```javascript │ │
|
|
│ │ // Code mẫu │ │
|
|
│ │ ``` │ │
|
|
│ │ │ │
|
|
│ └───────────────────────────────────────────────┘ │
|
|
│ │
|
|
└─────────────────────────────────────────────────────────┘
|
|
````
|
|
|
|
---
|
|
|
|
## Quy trình cài đặt (Các bước trực quan)
|
|
|
|
### Bước 1: Clone Repo về máy
|
|
|
|
```
|
|
┌─────────────────────────────────────────┐
|
|
│ Terminal (Dòng lệnh) │
|
|
├─────────────────────────────────────────┤
|
|
│ $ git clone https://github.com/ │
|
|
│ sickn33/antigravity-awesome-skills │
|
|
│ .agent/skills │
|
|
│ │
|
|
│ ✓ Cloning into '.agent/skills'... │
|
|
│ ✓ Done! │
|
|
1└─────────────────────────────────────────┘
|
|
```
|
|
|
|
### Bước 2: Kiểm tra cài đặt
|
|
|
|
```
|
|
┌─────────────────────────────────────────┐
|
|
│ File Explorer (Quản lý file) │
|
|
├─────────────────────────────────────────┤
|
|
│ 📁 .agent/ │
|
|
│ └── 📁 skills/ │
|
|
│ ├── 📁 brainstorming/ │
|
|
│ ├── 📁 stripe-integration/ │
|
|
│ ├── 📁 react-best-practices/ │
|
|
│ └── ... (250+ cái nữa) │
|
|
└─────────────────────────────────────────┘
|
|
```
|
|
|
|
### Bước 3: Sử dụng Skill
|
|
|
|
```
|
|
┌─────────────────────────────────────────┐
|
|
│ AI Assistant Chat │
|
|
├─────────────────────────────────────────┤
|
|
│ Bạn: @brainstorming giúp tôi thiết kế │
|
|
│ một cái app to-do list │
|
|
│ │
|
|
│ AI: Tuyệt! Để tôi giúp bạn suy nghĩ. │
|
|
│ Trước tiên, hãy xác định yêu cầu. │
|
|
│ │
|
|
│ Mục đích chính là gì? │
|
|
│ a) Quản lý việc cá nhân │
|
|
│ b) Cộng tác nhóm │
|
|
│ c) Lập kế hoạch dự án │
|
|
└─────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## Ví dụ: Một phiên làm việc thực tế
|
|
|
|
### Tình huống: Bạn muốn tích hợp thanh toán Stripe
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ BƯỚC 1: Xác định nhu cầu │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ "Tôi cần thêm tính năng thanh toán vào app" │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
↓
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ BƯỚC 2: Tìm Skill phù hợp │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ Tìm kiếm: "payment" hoặc "stripe" │
|
|
│ Tìm thấy: @stripe-integration │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
↓
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ BƯỚC 3: Gọi Skill │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ Bạn: @stripe-integration giúp tôi thêm tính năng gói subs │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
↓
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ BƯỚC 4: AI nạp kiến thức │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ • Các pattern API của Stripe │
|
|
│ • Xử lý Webhook │
|
|
│ • Quản lý gói đăng ký (Subscription) │
|
|
│ • Các bài thực hành tốt nhất (Best practices) │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
↓
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ BƯỚC 5: Nhận hỗ trợ chuyên gia │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ AI cung cấp: │
|
|
│ • Code mẫu │
|
|
│ • Hướng dẫn cài đặt │
|
|
│ • Lưu ý bảo mật │
|
|
│ • Chiến lược kiểm thử (Testing) │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## Cách tìm kiếm Skill (Hướng dẫn hình ảnh)
|
|
|
|
### Cách 1: Duyệt theo Danh mục
|
|
|
|
```
|
|
README.vi.md → Cuộn xuống "Danh sách Skill đầy đủ" → Tìm nhóm → Chọn skill
|
|
```
|
|
|
|
### Cách 2: Tìm theo từ khóa
|
|
|
|
```
|
|
Terminal → ls skills/ | grep "từ-khóa" → Thấy các skill khớp
|
|
```
|
|
|
|
### Cách 3: Dùng file Index
|
|
|
|
```
|
|
Mở skills_index.json → Ctrl+F tìm từ khóa → Lấy đường dẫn skill
|
|
```
|
|
|
|
---
|
|
|
|
## Quy trình tạo Skill đầu tay của bạn
|
|
|
|
```
|
|
┌──────────────┐
|
|
│ 1. Ý TƯỞNG │ "Tôi muốn chia sẻ kiến thức Docker của mình"
|
|
└──────┬───────┘
|
|
│
|
|
↓
|
|
┌──────────────┐
|
|
│ 2. TẠO FOLDER│ mkdir skills/docker-mastery
|
|
└──────┬───────┘ touch skills/docker-mastery/SKILL.md
|
|
│
|
|
↓
|
|
┌──────────────┐
|
|
│ 3. VIẾT │ Thêm frontmatter + nội dung
|
|
└──────┬───────┘ (Dùng mẫu trong CONTRIBUTING.vi.md)
|
|
│
|
|
↓
|
|
┌──────────────┐
|
|
│ 4. THỬ │ Copy vào .agent/skills/
|
|
└──────┬───────┘ Thử gọi: @docker-mastery
|
|
│
|
|
↓
|
|
┌──────────────┐
|
|
│ 5. KIỂM TRA │ python3 scripts/validate_skills.py
|
|
└──────┬───────┘
|
|
│
|
|
↓
|
|
┌──────────────┐
|
|
│ 6. NỘP BÀI │ git commit + push + Pull Request
|
|
└──────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## Các cấp độ phức tạp của Skill
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ ĐỘ PHỨC TẠP CỦA SKILL │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ ĐƠN GIẢN TIÊU CHUẨN PHỨC TẠP │
|
|
│ ──────── ────────── ──────── │
|
|
│ │
|
|
│ • 1 file • 1 file • Nhiều file
|
|
│ • 100-200 từ • 300-800 từ • 800-2000 │
|
|
│ • Cấu trúc cơ bản • Cấu trúc đầy đủ • Scripts │
|
|
│ • Không phụ kiện • Có ví dụ • Có ví dụ │
|
|
│ • Best practices • Template │
|
|
│ • Docs │
|
|
│ Ví dụ: Ví dụ: Ví dụ: │
|
|
│ git-pushing brainstorming loki-mode │
|
|
│ │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## Tác động của việc Đóng góp (Quy trình nhân quả)
|
|
|
|
```
|
|
Đóng góp của BẠN
|
|
│
|
|
├─→ Cải thiện Tài liệu
|
|
│ │
|
|
│ └─→ Giúp hàng ngàn lập trình viên đỡ bỡ ngỡ
|
|
│
|
|
├─→ Tạo Skill mới
|
|
│ │
|
|
│ └─→ Mở ra khả năng mới cho mọi người
|
|
│
|
|
├─→ Sửa lỗi (Bug/Typo)
|
|
│ │
|
|
│ └─→ Tránh nhầm lẫn cho người sau
|
|
│
|
|
└─→ Thêm ví dụ
|
|
│
|
|
└─→ Giúp người mới học nhanh hơn
|
|
```
|
|
|
|
---
|
|
|
|
## Lộ trình học tập (Roadmap trực quan)
|
|
|
|
```
|
|
BẮT ĐẦU Ở ĐÂY
|
|
│
|
|
↓
|
|
┌─────────────────┐
|
|
│ Đọc │
|
|
│ GETTING_STARTED │
|
|
└────────┬────────┘
|
|
│
|
|
↓
|
|
┌─────────────────┐
|
|
│ Thử 2-3 Skill │
|
|
│ với AI Assistant│
|
|
└────────┬────────┘
|
|
│
|
|
↓
|
|
┌─────────────────┐
|
|
│ Đọc │
|
|
│ SKILL_ANATOMY │
|
|
└────────┬────────┘
|
|
│
|
|
↓
|
|
┌─────────────────┐
|
|
│ Nghiên cứu code │
|
|
│ của Skill có sẵn│
|
|
└────────┬────────┘
|
|
│
|
|
↓
|
|
┌─────────────────┐
|
|
│ Tạo một Skill │
|
|
│ đơn giản │
|
|
└────────┬────────┘
|
|
│
|
|
↓
|
|
┌─────────────────┐
|
|
│ Đọc │
|
|
│ CONTRIBUTING │
|
|
└────────┬────────┘
|
|
│
|
|
↓
|
|
┌─────────────────┐
|
|
│ Gửi PR (Nộp bài)│
|
|
└────────┬────────┘
|
|
│
|
|
↓
|
|
CONTRIBUTOR! 🎉
|
|
```
|
|
|
|
---
|
|
|
|
## Mẹo nhanh (Cheatsheet)
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────┐
|
|
│ TRA CỨU NHANH │
|
|
├─────────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ 📥 CÀI ĐẶT │
|
|
│ git clone [repo] .agent/skills │
|
|
│ │
|
|
│ 🎯 DÙNG │
|
|
│ @ten-skill [yêu cầu của bạn] │
|
|
│ │
|
|
│ 🔍 TÌM │
|
|
│ ls skills/ | grep "từ-khóa" │
|
|
│ │
|
|
│ ✅ KIỂM TRA │
|
|
│ python3 scripts/validate_skills.py │
|
|
│ │
|
|
│ 📝 TẠO │
|
|
│ 1. mkdir skills/ten-skill │
|
|
│ 2. Tạo SKILL.md có frontmatter │
|
|
│ 3. Viết nội dung │
|
|
│ 4. Test & validate │
|
|
│ 5. Gửi PR │
|
|
│ │
|
|
│ 🆘 TRỢ GIÚP │
|
|
│ • GETTING_STARTED.vi.md - Cơ bản │
|
|
│ • CONTRIBUTING.vi.md - Cách đóng góp │
|
|
│ • SKILL_ANATOMY.md - Chuyên sâu │
|
|
│ • GitHub Issues - Hỏi đáp │
|
|
│ │
|
|
└─────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## Bước tiếp theo
|
|
|
|
1. ✅ **Hiểu** cấu trúc qua hình ảnh
|
|
2. ✅ **Cài đặt** skills vào công cụ AI của bạn
|
|
3. ✅ **Thử** 2-3 skill thuộc các nhóm khác nhau
|
|
4. ✅ **Đọc** CONTRIBUTING.vi.md
|
|
5. ✅ **Tạo** skill đầu tay
|
|
6. ✅ **Chia sẻ** với cộng đồng
|
|
|
|
---
|
|
|
|
**Bạn học qua hình ảnh tốt hơn?** Hy vọng hướng dẫn này giúp ích! Nếu còn thắc mắc, hãy xem thêm:
|
|
|
|
- [GETTING_STARTED.vi.md](../GETTING_STARTED.vi.md) - Hướng dẫn dạng chữ
|
|
- [SKILL_ANATOMY.md](SKILL_ANATOMY.md) - Phân tích chi tiết (Tiếng Anh)
|
|
- [CONTRIBUTING.vi.md](../CONTRIBUTING.vi.md) - Cách đóng góp
|
|
|
|
**Sẵn sàng đóng góp chưa?** Triển khai thôi! 💪
|