feat: translate batch 2 (3d-web, agent misc skills)
This commit is contained in:
Đỗ Khắc Gia Khoa
251
docs/vietnamese/skills/3d-web-experience/SKILL.vi.md
Normal file
251
docs/vietnamese/skills/3d-web-experience/SKILL.vi.md
Normal file
@@ -0,0 +1,251 @@
|
||||
---
|
||||
name: 3d-web-experience
|
||||
description: "Chuyên gia xây dựng trải nghiệm 3D cho web - Three.js, React Three Fiber, Spline, WebGL, và các bối cảnh 3D tương tác. Bao gồm các cấu hình sản phẩm (product configurators), danh mục đầu tư 3D (3D portfolios), website nhập vai (immersive websites), và mang lại độ sâu cho trải nghiệm web. Sử dụng khi: Làm website 3D, three.js, WebGL, react three fiber, trải nghiệm 3D."
|
||||
source: vibeship-spawner-skills (Apache 2.0)
|
||||
---
|
||||
|
||||
# 3D Web Experience
|
||||
|
||||
**Vai trò**: Kiến trúc sư Trải nghiệm Web 3D
|
||||
|
||||
Bạn mang chiều không gian thứ ba lên web. Bạn biết khi nào 3D nâng tầm trải nghiệm và khi nào nó chỉ là "khoe mẽ". Bạn cân bằng giữa tác động thị giác và hiệu năng. Bạn làm cho 3D trở nên dễ tiếp cận với những người dùng chưa từng chạm vào ứng dụng 3D. Bạn tạo ra những khoảnh khắc kỳ diệu mà không hy sinh khả năng sử dụng (usability).
|
||||
|
||||
## Khả năng
|
||||
|
||||
- Triển khai Three.js
|
||||
- React Three Fiber
|
||||
- Tối ưu hóa WebGL
|
||||
- Tích hợp mô hình 3D
|
||||
- Quy trình làm việc với Spline
|
||||
- Cấu hình sản phẩm 3D (3D product configurators)
|
||||
- Các bối cảnh 3D tương tác
|
||||
- Tối ưu hóa hiệu năng 3D
|
||||
|
||||
## Các Mẫu (Patterns)
|
||||
|
||||
### Lựa chọn 3D Stack
|
||||
|
||||
Chọn cách tiếp cận 3D phù hợp
|
||||
|
||||
**Khi nào dùng**: Khi bắt đầu một dự án web 3D
|
||||
|
||||
```python
|
||||
## 3D Stack Selection
|
||||
|
||||
### So sánh các Tùy chọn
|
||||
| Công cụ | Tốt nhất cho | Đường cong học tập | Khả năng kiểm soát |
|
||||
|------|----------|----------------|---------|
|
||||
| Spline | Prototypes nhanh, designers | Thấp | Trung bình |
|
||||
| React Three Fiber | React apps, bối cảnh phức tạp | Trung bình | Cao |
|
||||
| Three.js vanilla | Kiểm soát tối đa, non-React | Cao | Tối đa |
|
||||
| Babylon.js | Games, 3D hạng nặng | Cao | Tối đa |
|
||||
|
||||
### Cây quyết định (Decision Tree)
|
||||
```
|
||||
Cần yếu tố 3D nhanh gọn?
|
||||
└── Có → Spline
|
||||
└── Không → Tiếp tục
|
||||
|
||||
Đang dùng React?
|
||||
└── Có → React Three Fiber
|
||||
└── Không → Tiếp tục
|
||||
|
||||
Cần hiệu năng/kiểm soát tối đa?
|
||||
└── Có → Three.js vanilla
|
||||
└── Không → Spline hoặc R3F
|
||||
```
|
||||
|
||||
### Spline (Khởi đầu Nhanh nhất)
|
||||
```jsx
|
||||
import Spline from '@splinetool/react-spline';
|
||||
|
||||
export default function Scene() {
|
||||
return (
|
||||
<Spline scene="https://prod.spline.design/xxx/scene.splinecode" />
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### React Three Fiber
|
||||
```jsx
|
||||
import { Canvas } from '@react-three/fiber';
|
||||
import { OrbitControls, useGLTF } from '@react-three/drei';
|
||||
|
||||
function Model() {
|
||||
const { scene } = useGLTF('/model.glb');
|
||||
return <primitive object={scene} />;
|
||||
}
|
||||
|
||||
export default function Scene() {
|
||||
return (
|
||||
<Canvas>
|
||||
<ambientLight />
|
||||
<Model />
|
||||
<OrbitControls />
|
||||
</Canvas>
|
||||
);
|
||||
}
|
||||
```
|
||||
```
|
||||
|
||||
### Quy trình Mô hình 3D (3D Model Pipeline)
|
||||
|
||||
Chuẩn bị mô hình sẵn sàng cho web (web-ready)
|
||||
|
||||
**Khi nào dùng**: Khi chuẩn bị tài sản 3D (assets)
|
||||
|
||||
```python
|
||||
## 3D Model Pipeline
|
||||
|
||||
### Lựa chọn Định dạng
|
||||
| Định dạng | Trường hợp sử dụng | Kích thước |
|
||||
|--------|----------|------|
|
||||
| GLB/GLTF | Chuẩn web 3D | Nhỏ nhất |
|
||||
| FBX | Từ phần mềm 3D | Lớn |
|
||||
| OBJ | Mesh đơn giản | Trung bình |
|
||||
| USDZ | Apple AR | Trung bình |
|
||||
|
||||
### Quy trình Tối ưu hóa
|
||||
```
|
||||
1. Tạo model trong Blender/công cụ khác
|
||||
2. Giảm số lượng polygon (< 100K cho web)
|
||||
3. Bake textures (gộp vật liệu)
|
||||
4. Xuất ra GLB
|
||||
5. Nén với gltf-transform
|
||||
6. Kiểm tra kích thước file (< 5MB là lý tưởng)
|
||||
```
|
||||
|
||||
### Nén GLTF
|
||||
```bash
|
||||
# Cài đặt gltf-transform
|
||||
npm install -g @gltf-transform/cli
|
||||
|
||||
# Nén mô hình
|
||||
gltf-transform optimize input.glb output.glb \
|
||||
--compress draco \
|
||||
--texture-compress webp
|
||||
```
|
||||
|
||||
### Loading trong R3F
|
||||
```jsx
|
||||
import { useGLTF, useProgress, Html } from '@react-three/drei';
|
||||
import { Suspense } from 'react';
|
||||
|
||||
function Loader() {
|
||||
const { progress } = useProgress();
|
||||
return <Html center>{progress.toFixed(0)}%</Html>;
|
||||
}
|
||||
|
||||
export default function Scene() {
|
||||
return (
|
||||
<Canvas>
|
||||
<Suspense fallback={<Loader />}>
|
||||
<Model />
|
||||
</Suspense>
|
||||
</Canvas>
|
||||
);
|
||||
}
|
||||
```
|
||||
```
|
||||
|
||||
### 3D Điều khiển bởi Cuộn (Scroll-Driven 3D)
|
||||
|
||||
3D phản hồi theo hành động cuộn trang
|
||||
|
||||
**Khi nào dùng**: Khi tích hợp 3D với cuộn trang
|
||||
|
||||
```python
|
||||
## Scroll-Driven 3D
|
||||
|
||||
### R3F + Scroll Controls
|
||||
```jsx
|
||||
import { ScrollControls, useScroll } from '@react-three/drei';
|
||||
import { useFrame } from '@react-three/fiber';
|
||||
|
||||
function RotatingModel() {
|
||||
const scroll = useScroll();
|
||||
const ref = useRef();
|
||||
|
||||
useFrame(() => {
|
||||
// Xoay dựa trên vị trí cuộn
|
||||
ref.current.rotation.y = scroll.offset * Math.PI * 2;
|
||||
});
|
||||
|
||||
return <mesh ref={ref}>...</mesh>;
|
||||
}
|
||||
|
||||
export default function Scene() {
|
||||
return (
|
||||
<Canvas>
|
||||
<ScrollControls pages={3}>
|
||||
<RotatingModel />
|
||||
</ScrollControls>
|
||||
</Canvas>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### GSAP + Three.js
|
||||
```javascript
|
||||
import gsap from 'gsap';
|
||||
import ScrollTrigger from 'gsap/ScrollTrigger';
|
||||
|
||||
gsap.to(camera.position, {
|
||||
scrollTrigger: {
|
||||
trigger: '.section',
|
||||
scrub: true,
|
||||
},
|
||||
z: 5,
|
||||
y: 2,
|
||||
});
|
||||
```
|
||||
|
||||
### Hiệu ứng Cuộn Phổ biến
|
||||
- Camera di chuyển qua bối cảnh
|
||||
- Model xoay khi cuộn
|
||||
- Hiện/ẩn các phần tử
|
||||
- Thay đổi màu sắc/vật liệu
|
||||
- Exploded view animations (hiệu ứng "nổ" các chi tiết)
|
||||
```
|
||||
|
||||
## Anti-Patterns (Nên tránh)
|
||||
|
||||
### ❌ 3D chỉ để cho có
|
||||
|
||||
**Tại sao tệ**: Làm chậm trang web.
|
||||
Gây bối rối cho người dùng.
|
||||
Tốn pin trên mobile.
|
||||
Không giúp ích cho chuyển đổi (conversion).
|
||||
|
||||
**Thay vào đó**: 3D nên phục vụ một mục đích.
|
||||
Trực quan hóa sản phẩm = tốt.
|
||||
Các hình khối bay lơ lửng ngẫu nhiên = có lẽ không nên.
|
||||
Hãy hỏi: một bức ảnh tĩnh có giải quyết được không?
|
||||
|
||||
### ❌ 3D Chỉ dành cho Desktop
|
||||
|
||||
**Tại sao tệ**: Hầu hết lưu lượng truy cập là mobile.
|
||||
Giết chết pin điện thoại.
|
||||
Crash trên các thiết bị yếu.
|
||||
Người dùng ức chế.
|
||||
|
||||
**Thay vào đó**: Test trên thiết bị mobile thật.
|
||||
Giảm chất lượng trên mobile.
|
||||
Cung cấp fallback tĩnh (ảnh/video).
|
||||
Cân nhắc tắt 3D trên thiết bị yếu.
|
||||
|
||||
### ❌ Không có Trạng thái Loading
|
||||
|
||||
**Tại sao tệ**: Người dùng tưởng web bị lỗi.
|
||||
Tỷ lệ thoát (bounce rate) cao.
|
||||
3D tốn thời gian để tải.
|
||||
Ấn tượng đầu tiên tồi tệ.
|
||||
|
||||
**Thay vào đó**: Chỉ báo tiến trình loading.
|
||||
Skeleton/placeholder.
|
||||
Tải 3D sau khi trang đã tương tác được.
|
||||
Tối ưu hóa kích thước model.
|
||||
|
||||
## Kỹ năng Liên quan
|
||||
|
||||
Hoạt động tốt với: `scroll-experience`, `interactive-portfolio`, `frontend`, `landing-page-design`
|
||||
55
docs/vietnamese/skills/address-github-comments/SKILL.vi.md
Normal file
55
docs/vietnamese/skills/address-github-comments/SKILL.vi.md
Normal file
@@ -0,0 +1,55 @@
|
||||
---
|
||||
name: address-github-comments
|
||||
description: Sử dụng khi bạn cần xử lý các bình luận review hoặc issue trên một GitHub Pull Request đang mở bằng cách sử dụng gh CLI.
|
||||
---
|
||||
|
||||
# Xử lý Bình luận GitHub (Address GitHub Comments)
|
||||
|
||||
## Tổng quan
|
||||
|
||||
Xử lý hiệu quả các bình luận review trên PR hoặc phản hồi issue bằng GitHub CLI (`gh`). Kỹ năng này đảm bảo tất cả phản hồi được giải quyết một cách có hệ thống.
|
||||
|
||||
## Điều kiện tiên quyết
|
||||
|
||||
Đảm bảo `gh` đã được xác thực (authenticated).
|
||||
|
||||
```bash
|
||||
gh auth status
|
||||
```
|
||||
|
||||
Nếu chưa đăng nhập, hãy chạy `gh auth login`.
|
||||
|
||||
## Quy trình làm việc
|
||||
|
||||
### 1. Kiểm tra Bình luận
|
||||
|
||||
Lấy các bình luận cho PR của nhánh hiện tại.
|
||||
|
||||
```bash
|
||||
gh pr view --comments
|
||||
```
|
||||
|
||||
Hoặc sử dụng một script tùy chỉnh nếu có để liệt kê các luồng (threads).
|
||||
|
||||
### 2. Phân loại và Lên kế hoạch
|
||||
|
||||
- Liệt kê các bình luận và luồng review.
|
||||
- Đề xuất cách sửa cho từng cái.
|
||||
- **Đợi xác nhận của người dùng** về việc nên xử lý bình luận nào trước nếu có quá nhiều.
|
||||
|
||||
### 3. Áp dụng các bản sửa lỗi (Fixes)
|
||||
|
||||
Thực hiện các thay đổi code cho các bình luận đã chọn.
|
||||
|
||||
### 4. Phản hồi các Bình luận
|
||||
|
||||
Khi đã sửa xong, hãy phản hồi vào các luồng là đã giải quyết.
|
||||
|
||||
```bash
|
||||
gh pr comment <PR_NUMBER> --body "Addressed in latest commit."
|
||||
```
|
||||
|
||||
## Các sai lầm thường gặp
|
||||
|
||||
- **Sửa lỗi mà không hiểu ngữ cảnh**: Luôn đọc code xung quanh một bình luận.
|
||||
- **Không xác minh xác thực (auth)**: Kiểm tra `gh auth status` trước khi bắt đầu.
|
||||
59
docs/vietnamese/skills/agent-evaluation/SKILL.vi.md
Normal file
59
docs/vietnamese/skills/agent-evaluation/SKILL.vi.md
Normal file
@@ -0,0 +1,59 @@
|
||||
---
|
||||
name: agent-evaluation
|
||||
description: "Kiểm thử và đánh giá tiêu chuẩn (benchmarking) các LLM agents bao gồm kiểm thử hành vi, đánh giá năng lực, chỉ số độ tin cậy và giám sát production - nơi thậm chí các agent hàng đầu cũng chỉ đạt dưới 50% trong các bài đánh giá thực tế. Sử dụng khi: kiểm thử agent, đánh giá agent, benchmark agents, độ tin cậy của agent, test agent."
|
||||
source: vibeship-spawner-skills (Apache 2.0)
|
||||
---
|
||||
|
||||
# Đánh giá Agent (Agent Evaluation)
|
||||
|
||||
Bạn là một kỹ sư chất lượng (quality engineer) người đã từng thấy các agent đạt điểm tuyệt đối trong benchmark nhưng lại thất bại thảm hại trong môi trường production. Bạn hiểu rằng việc đánh giá LLM agents khác biệt cơ bản so với kiểm thử phần mềm truyền thống - cùng một đầu vào có thể tạo ra các đầu ra khác nhau, và "đúng" thường không có một câu trả lời duy nhất.
|
||||
|
||||
Bạn đã xây dựng các khung đánh giá (evaluation frameworks) giúp bắt được vấn đề trước khi ra production: kiểm thử hồi quy hành vi, đánh giá năng lực, và các chỉ số độ tin cậy. Bạn hiểu rằng mục tiêu không phải là tỷ lệ pass test 100%.
|
||||
|
||||
## Khả năng
|
||||
|
||||
- Kiểm thử agent (agent-testing)
|
||||
- Thiết kế benchmark (benchmark-design)
|
||||
- Đánh giá năng lực (capability-assessment)
|
||||
- Chỉ số độ tin cậy (reliability-metrics)
|
||||
- Kiểm thử hồi quy (regression-testing)
|
||||
|
||||
## Yêu cầu
|
||||
|
||||
- Nền tảng kiểm thử (testing-fundamentals)
|
||||
- Nền tảng LLM (llm-fundamentals)
|
||||
|
||||
## Các Mẫu (Patterns)
|
||||
|
||||
### Đánh giá Kiểm thử Thống kê (Statistical Test Evaluation)
|
||||
|
||||
Chạy test nhiều lần và phân tích phân phối kết quả.
|
||||
|
||||
### Kiểm thử Hợp đồng Hành vi (Behavioral Contract Testing)
|
||||
|
||||
Định nghĩa và kiểm thử các bất biến hành vi (behavioral invariants) của agent.
|
||||
|
||||
### Kiểm thử Đối kháng (Adversarial Testing)
|
||||
|
||||
Chủ động tìm cách phá vỡ hành vi của agent.
|
||||
|
||||
## Anti-Patterns (Nên tránh)
|
||||
|
||||
### ❌ Kiểm thử Chạy Một lần (Single-Run Testing)
|
||||
|
||||
### ❌ Chỉ Test Happy Path (Trường hợp thuận lợi)
|
||||
|
||||
### ❌ So khớp Chuỗi Đầu ra (Output String Matching)
|
||||
|
||||
## ⚠️ Các Cạnh Sắc (Rủi ro)
|
||||
|
||||
| Vấn đề | Mức độ nghiêm trọng | Giải pháp |
|
||||
|-------|----------|----------|
|
||||
| Agent điểm cao benchmark nhưng fail ở production | cao | // Bắc cầu đánh giá giữa benchmark và production |
|
||||
| Cùng một test lúc pass lúc fail | cao | // Xử lý test chập chờn (flaky tests) trong đánh giá LLM agent |
|
||||
| Agent tối ưu cho chỉ số (metric), không phải nhiệm vụ thực tế | trung bình | // Đánh giá đa chiều để ngăn chặn việc "gaming" (ăn gian chỉ số) |
|
||||
| Dữ liệu test vô tình được dùng trong training hoặc prompts | nghiêm trọng | // Ngăn chặn rò rỉ dữ liệu (data leakage) trong đánh giá agent |
|
||||
|
||||
## Kỹ năng Liên quan
|
||||
|
||||
Hoạt động tốt với: `multi-agent-orchestration`, `agent-communication`, `autonomous-agents`
|
||||
40
docs/vietnamese/skills/agent-manager-skill/SKILL.vi.md
Normal file
40
docs/vietnamese/skills/agent-manager-skill/SKILL.vi.md
Normal file
@@ -0,0 +1,40 @@
|
||||
---
|
||||
name: agent-manager-skill
|
||||
description: Quản lý nhiều CLI agents cục bộ thông qua các phiên tmux (khởi động/dừng/theo dõi/giao việc) với khả năng lập lịch cron-friendly.
|
||||
---
|
||||
|
||||
# Kỹ năng Quản lý Agent (Agent Manager Skill)
|
||||
|
||||
## Khi nào sử dụng
|
||||
|
||||
Sử dụng kỹ năng này khi bạn cần:
|
||||
|
||||
- Chạy nhiều CLI agents cục bộ song song (các phiên tmux riêng biệt)
|
||||
- Khởi động/dừng agents và theo dõi logs của chúng
|
||||
- Giao nhiệm vụ cho agents và giám sát đầu ra
|
||||
- Lập lịch công việc định kỳ cho agent (cron)
|
||||
|
||||
## Điều kiện tiên quyết
|
||||
|
||||
Cài đặt `agent-manager-skill` trong workspace của bạn:
|
||||
|
||||
```bash
|
||||
git clone https://github.com/fractalmind-ai/agent-manager-skill.git
|
||||
```
|
||||
|
||||
## Các lệnh phổ biến
|
||||
|
||||
```bash
|
||||
python3 agent-manager/scripts/main.py doctor
|
||||
python3 agent-manager/scripts/main.py list
|
||||
python3 agent-manager/scripts/main.py start EMP_0001
|
||||
python3 agent-manager/scripts/main.py monitor EMP_0001 --follow
|
||||
python3 agent-manager/scripts/main.py assign EMP_0002 <<'EOF'
|
||||
Follow teams/fractalmind-ai-maintenance.md Workflow
|
||||
EOF
|
||||
```
|
||||
|
||||
## Ghi chú
|
||||
|
||||
- Yêu cầu `tmux` và `python3`.
|
||||
- Các Agents được cấu hình trong thư mục `agents/` (xem repo để biết ví dụ).
|
||||
82
docs/vietnamese/skills/agent-memory-mcp/SKILL.vi.md
Normal file
82
docs/vietnamese/skills/agent-memory-mcp/SKILL.vi.md
Normal file
@@ -0,0 +1,82 @@
|
||||
---
|
||||
name: agent-memory-mcp
|
||||
author: Amit Rathiesh
|
||||
description: Một hệ thống bộ nhớ lai (hybrid) cung cấp khả năng quản lý tri thức bền vững, có thể tìm kiếm cho các AI agents (Kiến trúc, Mẫu, Quyết định).
|
||||
---
|
||||
|
||||
# Kỹ năng Bộ nhớ Agent (Agent Memory Skill)
|
||||
|
||||
Kỹ năng này cung cấp một ngân hàng bộ nhớ bền vững, có thể tìm kiếm và tự động đồng bộ hóa với tài liệu dự án. Nó chạy như một máy chủ MCP để cho phép đọc/ghi/tìm kiếm các ký ức dài hạn (long-term memories).
|
||||
|
||||
## Điều kiện tiên quyết
|
||||
|
||||
- Node.js (v18+)
|
||||
|
||||
## Thiết lập
|
||||
|
||||
1. **Clone Repository**:
|
||||
Clone dự án `agentMemory` vào workspace của agent hoặc một thư mục song song:
|
||||
|
||||
```bash
|
||||
git clone https://github.com/webzler/agentMemory.git .agent/skills/agent-memory
|
||||
```
|
||||
|
||||
2. **Cài đặt Dependencies**:
|
||||
|
||||
```bash
|
||||
cd .agent/skills/agent-memory
|
||||
npm install
|
||||
npm run compile
|
||||
```
|
||||
|
||||
3. **Khởi động MCP Server**:
|
||||
Sử dụng helper script để kích hoạt ngân hàng bộ nhớ cho dự án hiện tại của bạn:
|
||||
|
||||
```bash
|
||||
npm run start-server <project_id> <absolute_path_to_target_workspace>
|
||||
```
|
||||
|
||||
_Ví dụ cho thư mục hiện tại:_
|
||||
|
||||
```bash
|
||||
npm run start-server my-project $(pwd)
|
||||
```
|
||||
|
||||
## Khả năng (Công cụ MCP)
|
||||
|
||||
### `memory_search`
|
||||
|
||||
Tìm kiếm ký ức theo truy vấn, loại hoặc thẻ.
|
||||
|
||||
- **Args**: `query` (string), `type?` (string), `tags?` (string[])
|
||||
- **Sử dụng**: "Tìm tất cả các mẫu xác thực" -> `memory_search({ query: "authentication", type: "pattern" })`
|
||||
|
||||
### `memory_write`
|
||||
|
||||
Ghi lại kiến thức mới hoặc quyết định.
|
||||
|
||||
- **Args**: `key` (string), `type` (string), `content` (string), `tags?` (string[])
|
||||
- **Sử dụng**: "Lưu quyết định kiến trúc này" -> `memory_write({ key: "auth-v1", type: "decision", content: "..." })`
|
||||
|
||||
### `memory_read`
|
||||
|
||||
Truy xuất nội dung ký ức cụ thể theo khóa (key).
|
||||
|
||||
- **Args**: `key` (string)
|
||||
- **Sử dụng**: "Lấy thiết kế xác thực" -> `memory_read({ key: "auth-v1" })`
|
||||
|
||||
### `memory_stats`
|
||||
|
||||
Xem phân tích về việc sử dụng bộ nhớ.
|
||||
|
||||
- **Sử dụng**: "Hiển thị thống kê bộ nhớ" -> `memory_stats({})`
|
||||
|
||||
## Dashboard
|
||||
|
||||
Kỹ năng này bao gồm một dashboard độc lập để trực quan hóa việc sử dụng bộ nhớ.
|
||||
|
||||
```bash
|
||||
npm run start-dashboard <absolute_path_to_target_workspace>
|
||||
```
|
||||
|
||||
Truy cập tại: `http://localhost:3333`
|
||||
Reference in New Issue
Block a user