@mrtrinhvn/ag-kit 1.0.6 → 1.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.agent/agents/backend-specialist.md +2 -2
- package/.agent/agents/frontend-specialist.md +37 -74
- package/.agent/agents/quant-architect.md +31 -0
- package/.agent/rules/GEMINI.md +8 -1
- package/.agent/skills/app-builder/SKILL.md +1 -1
- package/.agent/skills/app-builder/scaffolding.md +3 -3
- package/.agent/skills/app-builder/tech-stack.md +3 -4
- package/.agent/skills/app-builder/templates/nextjs-fullstack/TEMPLATE.md +39 -79
- package/.agent/skills/app-builder/templates/nextjs-saas/TEMPLATE.md +53 -75
- package/.agent/skills/app-builder/templates/nextjs-static/TEMPLATE.md +56 -119
- package/.agent/skills/app-builder/templates/nuxt-app/TEMPLATE.md +61 -94
- package/.agent/skills/app-builder/templates/react-native-app/TEMPLATE.md +56 -82
- package/.agent/skills/brainstorming/SKILL.md +13 -8
- package/.agent/skills/business-ops/SKILL.md +26 -0
- package/.agent/skills/clean-code/SKILL.md +4 -3
- package/.agent/skills/cli-generator/SKILL.md +48 -0
- package/.agent/skills/data-science/SKILL.md +28 -0
- package/.agent/skills/doc.md +36 -36
- package/.agent/skills/frontend-design/SKILL.md +0 -34
- package/.agent/skills/frontend-design/ux-psychology.md +10 -585
- package/.agent/skills/knowledge-management/SKILL.md +66 -0
- package/.agent/skills/lint-and-validate/scripts/lint_runner.py +2 -14
- package/.agent/skills/memory-architecture/SKILL.md +107 -0
- package/.agent/skills/mini-antigravity-injection/SKILL.md +59 -0
- package/.agent/skills/nextjs-react-expert/1-async-eliminating-waterfalls.md +1 -40
- package/.agent/skills/nextjs-react-expert/SKILL.md +21 -47
- package/.agent/skills/nextjs-react-expert/scripts/convert_rules.py +1 -1
- package/.agent/skills/plan-writing/SKILL.md +32 -31
- package/.agent/skills/product-management/SKILL.md +30 -0
- package/.agent/skills/systematic-debugging/SKILL.md +11 -0
- package/.agent/skills/tdd-workflow/SKILL.md +6 -7
- package/.agent/workflows/orchestrate.md +6 -6
- package/package.json +1 -1
- package/template/.agent/skills/mini-antigravity-injection/SKILL.md +59 -0
|
@@ -14,8 +14,6 @@ Supports:
|
|
|
14
14
|
import subprocess
|
|
15
15
|
import sys
|
|
16
16
|
import json
|
|
17
|
-
import platform
|
|
18
|
-
import shutil
|
|
19
17
|
from pathlib import Path
|
|
20
18
|
from datetime import datetime
|
|
21
19
|
|
|
@@ -79,24 +77,14 @@ def run_linter(linter: dict, cwd: Path) -> dict:
|
|
|
79
77
|
}
|
|
80
78
|
|
|
81
79
|
try:
|
|
82
|
-
cmd = linter["cmd"]
|
|
83
|
-
|
|
84
|
-
# Windows compatibility for npm/npx
|
|
85
|
-
if platform.system() == "Windows":
|
|
86
|
-
if cmd[0] in ["npm", "npx"]:
|
|
87
|
-
# Force .cmd extension on Windows
|
|
88
|
-
if not cmd[0].lower().endswith(".cmd"):
|
|
89
|
-
cmd[0] = f"{cmd[0]}.cmd"
|
|
90
|
-
|
|
91
80
|
proc = subprocess.run(
|
|
92
|
-
cmd,
|
|
81
|
+
linter["cmd"],
|
|
93
82
|
cwd=str(cwd),
|
|
94
83
|
capture_output=True,
|
|
95
84
|
text=True,
|
|
96
85
|
encoding='utf-8',
|
|
97
86
|
errors='replace',
|
|
98
|
-
timeout=120
|
|
99
|
-
shell=platform.system() == "Windows" # Shell=True often helps with path resolution on Windows
|
|
87
|
+
timeout=120
|
|
100
88
|
)
|
|
101
89
|
|
|
102
90
|
result["output"] = proc.stdout[:2000] if proc.stdout else ""
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: memory-architecture
|
|
3
|
+
description: >
|
|
4
|
+
Hệ thống Bộ nhớ Đồ thị Đa Tầng (Multi-layered Graph Memory) cho Agent.
|
|
5
|
+
Hợp nhất giữa Progressive Disclosure (L1, L2, L3) và Temporal Knowledge Graph (Node-Edge).
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Multi-layered Graph Memory Architecture
|
|
9
|
+
|
|
10
|
+
> 🔴 **CRITICAL RULE**: Trí nhớ của Agent không còn là Text phẳng. Nó là một **Đồ thị Tri thức Đa tầng (Graph)** cho phép "Zoom-out" nhìn toàn cảnh và "Zoom-in" đọc chi tiết lõi.
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
## 1. Nguyên tắc cốt lõi: 3 Tầng Ký ức (L1/L2/L3)
|
|
15
|
+
|
|
16
|
+
```text
|
|
17
|
+
L1 (Zoom Out) → session_summary & Core_Nodes — "Toàn cảnh dự án, các khái niệm lõi"
|
|
18
|
+
L2 (Mid) → category-indexed & Edges — "Mạng lưới quan hệ, mạch sự kiện"
|
|
19
|
+
L3 (Zoom In) → detail_record & Solutions — "Chi tiết lỗi, code snippet gốc"
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
## 2. Hình thái Dữ liệu cấp thấp (Node-Edge Graph)
|
|
25
|
+
|
|
26
|
+
Mọi dữ liệu trong tầng L1/L2/L3 đều được lưu dưới dạng Đồ thị (Graph):
|
|
27
|
+
|
|
28
|
+
### A. NODES (Hạt nhân Kiến thức)
|
|
29
|
+
Các khái niệm định danh tĩnh. Vd: `[Node:DB_PORT] => 5432 (Energy: 100)`
|
|
30
|
+
|
|
31
|
+
### B. EDGES / EPISODES (Mạch Câu chuyện)
|
|
32
|
+
Luồng sự kiện liên kết. Vd: `[Node:USER] --(muốn mở port)--> [Node:DB_PORT]`
|
|
33
|
+
|
|
34
|
+
### Progressive Disclosure (Tiết kiệm Token):
|
|
35
|
+
Thay vì load toàn bộ Memory, hệ thống truy vấn tự động theo dạng Phóng to/Thu nhỏ:
|
|
36
|
+
1. **Search (Zoom Out):** Chỉ lấy mỏ neo 1-2 Node lõi + Quan hệ (L1/L2) (Tốn rất ít token).
|
|
37
|
+
2. **Details (Zoom In):** Nếu AI cần phân tích sâu 1 đoạn code phức tạp, gọi L3 (Token cao hơn nhưng cực kỳ chính xác).
|
|
38
|
+
|
|
39
|
+
---
|
|
40
|
+
|
|
41
|
+
## 3. Vòng đời Trí nhớ (Biocybernetic Lifecycle)
|
|
42
|
+
|
|
43
|
+
1. **Temporal Decay (Phai mờ):** Mỗi Node và Edge có `Energy`. Bị hao hụt tự động mỗi 24h. L1 siêu bền, L3 hao nhanh.
|
|
44
|
+
2. **Reinforcement (Củng cố):** Mỗi lần "bò" (traversal) qua Node, Energy phục hồi.
|
|
45
|
+
3. **Consolidation (Ngủ):** Cứ đêm đến, AI gộp các mạch nhớ L3/L2 rườm rà thành 1 Node L1 khái quát siêu bền.
|
|
46
|
+
4. **Forgetting (Quên lãng):** Node có `Energy < 0` HOẶC mồ côi (không ai gọi tới) sẽ BỊ XOÁ (Quét rác sinh học).
|
|
47
|
+
|
|
48
|
+
---
|
|
49
|
+
|
|
50
|
+
## 4. Bảng Phân loại Khối Lượng Ký ức
|
|
51
|
+
|
|
52
|
+
| Target / Kiểu Node | Tầng | Giải thích | Energy Khởi tạo | Mức độ Tự Phân Hủy (Decay) |
|
|
53
|
+
|---|---|---|---|---|
|
|
54
|
+
| `session_summary` | L1 | Toàn cảnh phiên làm việc | 100 | Lâu dài (Gần như không) |
|
|
55
|
+
| `Core_Fact` | L1 | Cấu hình, IP, Convention cốt lõi | 100 | Gần như không |
|
|
56
|
+
| `User_Pref` | L2 | Thói quen user | 80 | Cực chậm |
|
|
57
|
+
| `project_context` | L2 | Ngữ cảnh dự án hiện tại | 80 | Trung hạn (Cập nhật đổi version) |
|
|
58
|
+
| `Episode_Edge` | L2 | "Hôm qua đã làm gì" | 30 | Nhanh (Rất mau phai mờ) |
|
|
59
|
+
| `error_solution` | L3 | Bug log + Code fix cụ thể | 50 | Trung bình (Công nghệ đổi -> Xóa) |
|
|
60
|
+
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
## 5. Workflow Tương tác Trí Nhớ (Mô phỏng GraphRAG)
|
|
64
|
+
|
|
65
|
+
### KHI BẮT ĐẦU task mới (Retrieve):
|
|
66
|
+
```text
|
|
67
|
+
1. Bắn 1 tia Vector Search thả mỏ neo vào Đồ thị (Tìm L1/L2).
|
|
68
|
+
2. Khôi phục lại Mạch Câu Chuyện bằng cách "Bò" dọc theo Edges lân cận (BFS).
|
|
69
|
+
3. Nếu cần code chính xác của 1 Bug, gọi lệnh lấy Detail (L3).
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### KHI KẾT THÚC task (Commit):
|
|
73
|
+
❌ **Sai:** Lưu text rác `memory_save("Fix xong bug X")` vào trong hư không.
|
|
74
|
+
✅ **Đúng:**
|
|
75
|
+
```text
|
|
76
|
+
1. Khởi tạo Node mới: Node[Fix_CORS] = "Thiếu accept headers"
|
|
77
|
+
2. Nối Mạch: Node[Env_Prod] --(gặp lỗi)=> Node[Fix_CORS]
|
|
78
|
+
3. (Tùy chọn) Gắn thêm Detail record vào L3 nếu fix cực phức tạp cần giữ code snippet.
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
---
|
|
82
|
+
|
|
83
|
+
## 6. Anti-Patterns Kịch Độc
|
|
84
|
+
|
|
85
|
+
```text
|
|
86
|
+
❌ Gọi L3 load toàn bộ chi tiết khi không cần thiết (Tràn token).
|
|
87
|
+
❌ Cố gắng chèn 200 dòng code vào Tên của Node (Node chỉ giữ Context lõi, Code đẩy xuống L3).
|
|
88
|
+
❌ Tạo Node rác không gán Edge quan hệ. (Garbage Collector sẽ chém thẳng tay).
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
---
|
|
92
|
+
|
|
93
|
+
## 7. Giao thức Tự động Dịch chuyển Ký ức (Self-Migration Protocol)
|
|
94
|
+
|
|
95
|
+
> **Dành cho các AI Agent hoạt động trong dự án cũ (Legacy Projects) vừa được cập nhật `ag-kit` thông qua `npx`.**
|
|
96
|
+
|
|
97
|
+
Khi bạn (AI) nhận thức được mình đang ở trong một dự án đã có sẵn dữ liệu ký ức cũ (chứa trong các file `.jsonl` hoặc `memory.db` phẳng), bạn **CÓ TRÁCH NHIỆM TỰ ĐỘNG** thực hiện quá trình "Memory Migration" (Dịch chuyển Ký ức) mà không cần User yêu cầu, theo các bước sau:
|
|
98
|
+
|
|
99
|
+
1. **Phát hiện:** Dùng lệnh đọc file hoặc MCP để quét nội dung các ký ức cũ trong thư mục `data/memories/` (nếu có).
|
|
100
|
+
2. **Băm nhỏ (Chunking & Entity Extraction):** Phân tích các đoạn log cũ xem chúng nói về chủ đề gì (vd: Lịch sử fix bug, Convention code cũ, Sở thích User).
|
|
101
|
+
3. **Tái cấu trúc (Graph Construction):**
|
|
102
|
+
- Từ các đoạn text đó, rút trích ra các `Nodes` cốt lõi mang tính sự thật (Core Facts).
|
|
103
|
+
- Thiết lập các `Edges` (Mạch kết nối) mô tả luồng logic giữa các Nodes đó.
|
|
104
|
+
4. **Lưu trữ (Commit):** Lưu bộ Graph vừa tạo vào cơ sở dữ liệu mới (thông qua `GraphMemoryTool` nếu dự án đã hỗ trợ, hoặc lưu ngược lại bằng `memory_save` dưới cấu trúc **Pseudo-Graph** cực đoan: `[Node:A] --[rel]--> [Node:B]` nếu nền tảng chưa được nâng cấp DB SQLite).
|
|
105
|
+
|
|
106
|
+
Bằng giao thức này, kiến thức của dự án sẽ KHÔNG BAO GIỜ bị đứt gãy sau khi cập nhật kiến trúc. Mọi ký ức quá khứ sẽ tự động "tiến hóa" thành dạng Đồ thị tương lai!
|
|
107
|
+
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: mini-antigravity-injection
|
|
3
|
+
description: Kiến trúc Cấy Lõi Tự Đẩy & Tiến Hoá (Self-Healing & Autonomous Code Mutation) cho Dự Án. Hướng dẫn Agent cách xây dựng bộ máy Tự Code, Tự Fix Lỗi và Tự Hot-Reload định chuẩn TDD.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# KỸ NĂNG: CẤY TIỂU-ANTIGRAVITY (Self-Healing Core Injection)
|
|
7
|
+
|
|
8
|
+
Khi User yêu cầu "Cấy Tiểu-Antigravity" vào một chức năng hay dự án mới, User đang ám chỉ việc xây dựng một hệ thống **Tiến hoá Mã nguồn Tự trị**. Bạn phải tuân thủ nghiêm ngặt 3 Phần dưới đây để tiến hành xây dựng.
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
## PHẦN A: THIẾT LẬP HẠ TẦNG & QUYỀN TRUY CẬP (Prerequisites)
|
|
13
|
+
Để Lõi Bác Sĩ (Doctor Persona) có trí tuệ mổ xẻ code, Hệ thống bắt buộc phải có tài nguyên LLM. Trước khi viết code, bạn phải kiểm tra và hướng dẫn User cài đặt hoặc cấu hình các thông số sau:
|
|
14
|
+
|
|
15
|
+
### 1. Trí Tuệ Trung Tâm: Cổng 9Router (Gemini Pro)
|
|
16
|
+
- **Chuẩn bị:** Yêu cầu hệ thống phải đang chạy cổng `9router` (Mặc định).
|
|
17
|
+
- **Token:** User cần cài đặt `9router` (nếu chưa có), đăng nhập các tài khoản Antigravity / Google Hub để `9router` cấp phát Token hợp lệ cho Tiểu Antigravity.
|
|
18
|
+
- **Hoặc:** Nếu không dùng 9router, hệ thống phải được cấu hình chèn cứng `GEMINI_API_KEY` trực tiếp vào biến môi trường.
|
|
19
|
+
- **Biến môi trường:** Đặt `HEALER_MODEL="ag/gemini-3-flash"` hoặc `"ag/gemini-pro-1.5"` cho luồng Mổ Xẻ.
|
|
20
|
+
|
|
21
|
+
### 2. Trí Tuệ Sinh Tồn (Offline Fallback): Ollama & Bartowski
|
|
22
|
+
- **Mục đích:** Khi đứt cáp hoặc không gọi được 9Router/Gemini, Quản Đốc văng lỗi sẽ chết đứng nếu không có Backup.
|
|
23
|
+
- **Thực thi:** Yêu cầu User cài đặt Ollama local (`https://ollama.com/`).
|
|
24
|
+
- **Tải Model:** Chạy lệnh `ollama run hf.co/bartowski/nvidia_Orchestrator-8B-GGUF:Q4_K_M` để kéo chuyên gia Lập trình Local (Tay cắt mổ phụ).
|
|
25
|
+
- **Cấu hình Fallback:** Module Code xử lý mạng phải đảm bảo: Nếu `gemini` timeout hoặc 404 -> Fallback trực tiếp xuống mốc local `hf.co/bartowski/nvidia_Orchestrator-8B-GGUF:Q4_K_M`.
|
|
26
|
+
|
|
27
|
+
---
|
|
28
|
+
|
|
29
|
+
## PHẦN B: LÕI TRIẾT LÝ KIẾN TRÚC (5 Trụ Cột Tiểu-Antigravity)
|
|
30
|
+
Khi bạn (AI) tự động tạo code `SelfHealingService` cho dự án mới, bạn phải đúc đủ 5 trụ cột này vào code:
|
|
31
|
+
|
|
32
|
+
### 1. Cơ Chế Bơm Kiến Thức Vĩ Mô (Skill & DNA Injection)
|
|
33
|
+
- Code tự động đọc các file nguyên tắc lập trình của dự án (`.agent/GEMINI.md`, `clean-code/SKILL.md`...) và TIÊM vào System Prompt của LLM Bác Sĩ Cục Bộ. Đảm bảo nó code đúng văn phong của Antigravity.
|
|
34
|
+
|
|
35
|
+
### 2. Định Luật Cạn Kiệt Gen (Exhaustion Trigger)
|
|
36
|
+
- Hệ thống bắt Stack Trace. Nếu lỗi Tool/Code gãy 3 lần (Vòng lặp bất tận) -> Kích Hoạt Tiểu-Antigravity chữa cháy tự động.
|
|
37
|
+
|
|
38
|
+
### 3. Hộp Cát Tử Thần (Sandbox) & Lá Chắn Ngữ Nghĩa (Semantic Shield)
|
|
39
|
+
Tuyệt đối KHÔNG đẩy code vừa sinh thẳng vào Môi trường Thực Chiến.
|
|
40
|
+
- **Phase 1 (Doctor):** Dùng prompt áp dụng `5-Whys` tìm Root Cause và viết mới lại file Code.
|
|
41
|
+
- **Phase 2 (Syntax Test):** Build/Compile Dry-run qua trình biên dịch (VD: `tsc --noEmit`).
|
|
42
|
+
- **Phase 3 (Semantic Shield):** Cốt lõi của sự Khôn ngoan! Hệ thống tự rà file Unit Test đi kèm (`*.spec.ts` hoặc `*.test.ts`). Chạy **Test Ngữ Nghĩa (Logic)** với file mới. Nếu Logic tính toán sai (dù cú pháp đúng) -> Đánh sập nhánh đó, cấm Hot-Reload.
|
|
43
|
+
|
|
44
|
+
### 4. Giao Kèo Docstring Định Danh (Docstring Identity Pact)
|
|
45
|
+
- Ép Prompt của Bác Sĩ: Khai báo đa dòng ở đầu file Code mới: Sửa dòng nào? Tại sao sửa? Tuân thủ triết lý gì?
|
|
46
|
+
|
|
47
|
+
### 5. Nạp Nóng (Hot-Reload) & Sổ Ghi Chép Chung (Evolution Ledger)
|
|
48
|
+
- **Git Backup:** Ghi `.bak`, commit Git.
|
|
49
|
+
- **Hot-Reload:** Tự xoá cache (`require.cache` trong JS) nạp RAM trực tiếp.
|
|
50
|
+
- **Ghi Chép:** Bắn Log Tự Sinh Tồn vào `self_healing_logs.md` để Ký ức được đồng bộ khi Main Agent (Antigravity Sếp) tỉnh dậy.
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
## PHẦN C: CÁCH TRIỂN KHAI CHO DỰ ÁN MỚI
|
|
55
|
+
*(Ghi chú cho Antigravity: Không cần lưu cứng bộ boilerplate code vào ag-kit).*
|
|
56
|
+
Khi User ra lệnh "Cấy Tiểu-Antigravity cho tao", bạn (Agent đang chat) tự động làm các bước sau:
|
|
57
|
+
1. Đặt Câu Hỏi Hạ Tầng: Xác nhận 9Router và Ollama đã on-ready theo `PHẦN A`.
|
|
58
|
+
2. Tự Động Viết Code: Tự phân tích Framework của dự án (TS/Node, Python, Rust) và Code ra file `SelfHealingService` theo triết lý của `PHẦN B`.
|
|
59
|
+
3. Tự Động Test: Viết 1 file test làm hỏng kiến trúc cố ý (`BrokenTool`), kích hoạt tiến trình Tự Động Vá Lỗi để chứng minh hệ thống đã On-Air thành công cho User xem!
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
## Overview
|
|
9
9
|
|
|
10
|
-
This section contains **
|
|
10
|
+
This section contains **5 rules** focused on eliminating waterfalls.
|
|
11
11
|
|
|
12
12
|
---
|
|
13
13
|
|
|
@@ -310,42 +310,3 @@ Both components share the same promise, so only one fetch occurs. Layout renders
|
|
|
310
310
|
|
|
311
311
|
**Trade-off:** Faster initial paint vs potential layout shift. Choose based on your UX priorities.
|
|
312
312
|
|
|
313
|
-
|
|
314
|
-
---
|
|
315
|
-
|
|
316
|
-
## Rule 1.6: Use `after()` and `connection()` (Next.js 16+)
|
|
317
|
-
|
|
318
|
-
**Impact:** HIGH
|
|
319
|
-
**Tags:** nextjs16, async, runtime, performance
|
|
320
|
-
|
|
321
|
-
Next.js 16 introduced APIs to prevent "Blocking the Main Thread" and ensure "Dynamic Runtime" awareness.
|
|
322
|
-
|
|
323
|
-
### 1. `after()` for Non-Blocking Logic
|
|
324
|
-
Avoid `await` on logic that doesn't affect the initial UI (logging, analytics, emails).
|
|
325
|
-
|
|
326
|
-
```tsx
|
|
327
|
-
import { after } from 'next/server'
|
|
328
|
-
|
|
329
|
-
export default async function Page() {
|
|
330
|
-
const data = await fetchData() // CRITICAL
|
|
331
|
-
|
|
332
|
-
after(() => {
|
|
333
|
-
// RUNS AFTER THE RESPONSE IS SENT
|
|
334
|
-
logTrack(data)
|
|
335
|
-
})
|
|
336
|
-
|
|
337
|
-
return <View data={data} />
|
|
338
|
-
}
|
|
339
|
-
```
|
|
340
|
-
|
|
341
|
-
### 2. `connection()` for Dynamic Intent
|
|
342
|
-
Use `connection()` to signal that a component is dynamic and should not be pre-rendered as static, allowing other parts of the page to stream independently.
|
|
343
|
-
|
|
344
|
-
```tsx
|
|
345
|
-
import { connection } from 'next/server'
|
|
346
|
-
|
|
347
|
-
async function DynamicData() {
|
|
348
|
-
await connection() // Signals dynamic intent
|
|
349
|
-
return await fetchFreshData()
|
|
350
|
-
}
|
|
351
|
-
```
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
---
|
|
2
|
-
name: react-
|
|
2
|
+
name: nextjs-react-expert
|
|
3
3
|
description: React and Next.js performance optimization from Vercel Engineering. Use when building React components, optimizing performance, eliminating waterfalls, reducing bundle size, reviewing code for performance issues, or implementing server/client-side optimizations.
|
|
4
4
|
allowed-tools: Read, Write, Edit, Glob, Grep, Bash
|
|
5
5
|
---
|
|
@@ -21,17 +21,16 @@ allowed-tools: Read, Write, Edit, Glob, Grep, Bash
|
|
|
21
21
|
|
|
22
22
|
## 📑 Content Map
|
|
23
23
|
|
|
24
|
-
| File
|
|
25
|
-
|
|
26
|
-
| `1-async-eliminating-waterfalls.md`
|
|
27
|
-
| `2-bundle-bundle-size-optimization.md`
|
|
28
|
-
| `3-server-server-side-performance.md`
|
|
29
|
-
| `4-client-client-side-data-fetching.md` | 🟡 **MEDIUM-HIGH** | 4 rules
|
|
30
|
-
| `5-rerender-re-render-optimization.md`
|
|
31
|
-
| `6-rendering-rendering-performance.md`
|
|
32
|
-
| `7-js-javascript-performance.md`
|
|
33
|
-
| `8-advanced-advanced-patterns.md`
|
|
34
|
-
| `9-cache-components.md` | 🔴 **CRITICAL** | 4 sections | **Next.js 16+ Only**: `use cache`, `cacheLife`, PPR, `cacheTag` |
|
|
24
|
+
| File | Impact | Rules | When to Read |
|
|
25
|
+
|------|--------|-------|--------------|
|
|
26
|
+
| `1-async-eliminating-waterfalls.md` | 🔴 **CRITICAL** | 5 rules | Slow page loads, sequential API calls, data fetching waterfalls |
|
|
27
|
+
| `2-bundle-bundle-size-optimization.md` | 🔴 **CRITICAL** | 5 rules | Large bundle size, slow Time to Interactive, First Load issues |
|
|
28
|
+
| `3-server-server-side-performance.md` | 🟠 **HIGH** | 7 rules | Slow SSR, API route optimization, server-side waterfalls |
|
|
29
|
+
| `4-client-client-side-data-fetching.md` | 🟡 **MEDIUM-HIGH** | 4 rules | Client data management, SWR patterns, deduplication |
|
|
30
|
+
| `5-rerender-re-render-optimization.md` | 🟡 **MEDIUM** | 12 rules | Excessive re-renders, React performance, memoization |
|
|
31
|
+
| `6-rendering-rendering-performance.md` | 🟡 **MEDIUM** | 9 rules | Rendering bottlenecks, virtualization, image optimization |
|
|
32
|
+
| `7-js-javascript-performance.md` | ⚪ **LOW-MEDIUM** | 12 rules | Micro-optimizations, caching, loop performance |
|
|
33
|
+
| `8-advanced-advanced-patterns.md` | 🔵 **VARIABLE** | 3 rules | Advanced React patterns, useLatest, init-once |
|
|
35
34
|
|
|
36
35
|
**Total: 57 rules across 8 categories**
|
|
37
36
|
|
|
@@ -68,9 +67,6 @@ allowed-tools: Read, Write, Edit, Glob, Grep, Bash
|
|
|
68
67
|
|
|
69
68
|
✨ Need advanced patterns
|
|
70
69
|
→ Read Section 8: Advanced Patterns
|
|
71
|
-
|
|
72
|
-
🚀 **Next.js 16+ Performance (Caching & PPR)**
|
|
73
|
-
→ Read Section 9: Cache Components
|
|
74
70
|
```
|
|
75
71
|
|
|
76
72
|
---
|
|
@@ -98,23 +94,20 @@ allowed-tools: Read, Write, Edit, Glob, Grep, Bash
|
|
|
98
94
|
4️⃣ LOW (Polish - Do Last):
|
|
99
95
|
├─ Section 7: JavaScript Performance
|
|
100
96
|
└─ Section 8: Advanced Patterns
|
|
101
|
-
|
|
102
|
-
🔥 **MODERN (Next.js 16+):**
|
|
103
|
-
└─ Section 9: Cache Components (Replaces most traditional revalidation)
|
|
104
97
|
```
|
|
105
98
|
|
|
106
99
|
---
|
|
107
100
|
|
|
108
101
|
## 🔗 Related Skills
|
|
109
102
|
|
|
110
|
-
| Need
|
|
111
|
-
|
|
112
|
-
| API design patterns
|
|
113
|
-
| Database optimization
|
|
114
|
-
| Testing strategies
|
|
115
|
-
| UI/UX design principles | `@[skills/frontend-design]`
|
|
116
|
-
| TypeScript patterns
|
|
117
|
-
| Deployment & DevOps
|
|
103
|
+
| Need | Skill |
|
|
104
|
+
|------|-------|
|
|
105
|
+
| API design patterns | `@[skills/api-patterns]` |
|
|
106
|
+
| Database optimization | `@[skills/database-design]` |
|
|
107
|
+
| Testing strategies | `@[skills/testing-patterns]` |
|
|
108
|
+
| UI/UX design principles | `@[skills/frontend-design]` |
|
|
109
|
+
| TypeScript patterns | `@[skills/typescript-expert]` |
|
|
110
|
+
| Deployment & DevOps | `@[skills/deployment-procedures]` |
|
|
118
111
|
|
|
119
112
|
---
|
|
120
113
|
|
|
@@ -123,7 +116,6 @@ allowed-tools: Read, Write, Edit, Glob, Grep, Bash
|
|
|
123
116
|
Before shipping to production:
|
|
124
117
|
|
|
125
118
|
**Critical (Must Fix):**
|
|
126
|
-
|
|
127
119
|
- [ ] No sequential data fetching (waterfalls eliminated)
|
|
128
120
|
- [ ] Bundle size < 200KB for main bundle
|
|
129
121
|
- [ ] No barrel imports in app code
|
|
@@ -131,21 +123,18 @@ Before shipping to production:
|
|
|
131
123
|
- [ ] Parallel data fetching where possible
|
|
132
124
|
|
|
133
125
|
**High Priority:**
|
|
134
|
-
|
|
135
126
|
- [ ] Server components used where appropriate
|
|
136
127
|
- [ ] API routes optimized (no N+1 queries)
|
|
137
128
|
- [ ] Suspense boundaries for data fetching
|
|
138
129
|
- [ ] Static generation used where possible
|
|
139
130
|
|
|
140
131
|
**Medium Priority:**
|
|
141
|
-
|
|
142
132
|
- [ ] Expensive computations memoized
|
|
143
133
|
- [ ] List rendering virtualized (if > 100 items)
|
|
144
134
|
- [ ] Images optimized with next/image
|
|
145
135
|
- [ ] No unnecessary re-renders
|
|
146
136
|
|
|
147
137
|
**Low Priority (Polish):**
|
|
148
|
-
|
|
149
138
|
- [ ] Hot path loops optimized
|
|
150
139
|
- [ ] RegExp patterns hoisted
|
|
151
140
|
- [ ] Property access cached in loops
|
|
@@ -155,7 +144,6 @@ Before shipping to production:
|
|
|
155
144
|
## ❌ Anti-Patterns (Common Mistakes)
|
|
156
145
|
|
|
157
146
|
**DON'T:**
|
|
158
|
-
|
|
159
147
|
- ❌ Use sequential `await` for independent operations
|
|
160
148
|
- ❌ Import entire libraries when you need one function
|
|
161
149
|
- ❌ Use barrel exports (`index.ts` re-exports) in app code
|
|
@@ -165,7 +153,6 @@ Before shipping to production:
|
|
|
165
153
|
- ❌ Use client components when server components work
|
|
166
154
|
|
|
167
155
|
**DO:**
|
|
168
|
-
|
|
169
156
|
- ✅ Fetch data in parallel with `Promise.all()`
|
|
170
157
|
- ✅ Use dynamic imports: `const Comp = dynamic(() => import('./Heavy'))`
|
|
171
158
|
- ✅ Import directly: `import { specific } from 'library/specific'`
|
|
@@ -179,20 +166,17 @@ Before shipping to production:
|
|
|
179
166
|
## 🎯 How to Use This Skill
|
|
180
167
|
|
|
181
168
|
### For New Features:
|
|
182
|
-
|
|
183
169
|
1. Check **Section 1 & 2** while building (prevent waterfalls, keep bundle small)
|
|
184
170
|
2. Use server components by default (Section 3)
|
|
185
171
|
3. Apply memoization for expensive operations (Section 5)
|
|
186
172
|
|
|
187
173
|
### For Performance Reviews:
|
|
188
|
-
|
|
189
174
|
1. Start with **Section 1** (waterfalls = biggest impact)
|
|
190
175
|
2. Then **Section 2** (bundle size)
|
|
191
176
|
3. Then **Section 3** (server-side)
|
|
192
177
|
4. Finally other sections as needed
|
|
193
178
|
|
|
194
179
|
### For Debugging Slow Performance:
|
|
195
|
-
|
|
196
180
|
1. Identify the symptom (slow load, lag, etc.)
|
|
197
181
|
2. Use Quick Decision Tree above
|
|
198
182
|
3. Read relevant section
|
|
@@ -217,8 +201,8 @@ Before shipping to production:
|
|
|
217
201
|
|
|
218
202
|
## 🔍 Validation Script
|
|
219
203
|
|
|
220
|
-
| Script
|
|
221
|
-
|
|
204
|
+
| Script | Purpose | Command |
|
|
205
|
+
|--------|---------|---------|
|
|
222
206
|
| `scripts/react_performance_checker.py` | Automated performance audit | `python scripts/react_performance_checker.py <project_path>` |
|
|
223
207
|
|
|
224
208
|
---
|
|
@@ -226,42 +210,34 @@ Before shipping to production:
|
|
|
226
210
|
## 📖 Section Details
|
|
227
211
|
|
|
228
212
|
### Section 1: Eliminating Waterfalls (CRITICAL)
|
|
229
|
-
|
|
230
213
|
**Impact:** Each waterfall adds 100-500ms+ latency
|
|
231
214
|
**Key Concepts:** Parallel fetching, Promise.all(), Suspense boundaries, preloading
|
|
232
215
|
|
|
233
216
|
### Section 2: Bundle Size Optimization (CRITICAL)
|
|
234
|
-
|
|
235
217
|
**Impact:** Directly affects Time to Interactive, Largest Contentful Paint
|
|
236
218
|
**Key Concepts:** Dynamic imports, tree-shaking, barrel import avoidance
|
|
237
219
|
|
|
238
220
|
### Section 3: Server-Side Performance (HIGH)
|
|
239
|
-
|
|
240
221
|
**Impact:** Faster server responses, better SEO
|
|
241
222
|
**Key Concepts:** Parallel server fetching, streaming, API route optimization
|
|
242
223
|
|
|
243
224
|
### Section 4: Client-Side Data Fetching (MEDIUM-HIGH)
|
|
244
|
-
|
|
245
225
|
**Impact:** Reduces redundant requests, better UX
|
|
246
226
|
**Key Concepts:** SWR deduplication, localStorage caching, event listeners
|
|
247
227
|
|
|
248
228
|
### Section 5: Re-render Optimization (MEDIUM)
|
|
249
|
-
|
|
250
229
|
**Impact:** Smoother UI, less wasted computation
|
|
251
230
|
**Key Concepts:** React.memo, useMemo, useCallback, component structure
|
|
252
231
|
|
|
253
232
|
### Section 6: Rendering Performance (MEDIUM)
|
|
254
|
-
|
|
255
233
|
**Impact:** Better rendering efficiency
|
|
256
234
|
**Key Concepts:** Virtualization, image optimization, layout thrashing
|
|
257
235
|
|
|
258
236
|
### Section 7: JavaScript Performance (LOW-MEDIUM)
|
|
259
|
-
|
|
260
237
|
**Impact:** Incremental improvements in hot paths
|
|
261
238
|
**Key Concepts:** Loop optimization, caching, RegExp hoisting
|
|
262
239
|
|
|
263
240
|
### Section 8: Advanced Patterns (VARIABLE)
|
|
264
|
-
|
|
265
241
|
**Impact:** Specific use cases
|
|
266
242
|
**Key Concepts:** useLatest hook, init-once patterns, event handler refs
|
|
267
243
|
|
|
@@ -270,7 +246,6 @@ Before shipping to production:
|
|
|
270
246
|
## 🎓 Best Practices Summary
|
|
271
247
|
|
|
272
248
|
**Golden Rules:**
|
|
273
|
-
|
|
274
249
|
1. **Measure first** - Use React DevTools Profiler, Chrome DevTools
|
|
275
250
|
2. **Biggest impact first** - Waterfalls → Bundle → Server → Micro
|
|
276
251
|
3. **Don't over-optimize** - Focus on real bottlenecks
|
|
@@ -278,7 +253,6 @@ Before shipping to production:
|
|
|
278
253
|
5. **Think about users** - Real-world conditions matter
|
|
279
254
|
|
|
280
255
|
**Performance Mindset:**
|
|
281
|
-
|
|
282
256
|
- Every `await` in sequence = potential waterfall
|
|
283
257
|
- Every `import` = potential bundle bloat
|
|
284
258
|
- Every re-render = wasted computation (if unnecessary)
|
|
@@ -187,7 +187,7 @@ def main():
|
|
|
187
187
|
# Paths
|
|
188
188
|
base_dir = Path(__file__).parent.parent.parent.parent.parent
|
|
189
189
|
rules_dir = base_dir / "others/agent-skills/skills/react-best-practices/rules"
|
|
190
|
-
output_dir = base_dir / ".agent/skills/react-
|
|
190
|
+
output_dir = base_dir / ".agent/skills/nextjs-react-expert"
|
|
191
191
|
|
|
192
192
|
print(f"[*] Reading rules from: {rules_dir}")
|
|
193
193
|
print(f"[*] Output to: {output_dir}")
|
|
@@ -13,15 +13,16 @@ This skill provides a framework for breaking down work into clear, actionable ta
|
|
|
13
13
|
|
|
14
14
|
## Task Breakdown Principles
|
|
15
15
|
|
|
16
|
-
### 1.
|
|
17
|
-
- Each task should take 2-5 minutes
|
|
18
|
-
-
|
|
19
|
-
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
-
|
|
24
|
-
- What
|
|
16
|
+
### 1. Kỷ Luật Micro-Tasking (Hành động 5 phút)
|
|
17
|
+
- Each task should take 2-5 minutes MAXIMUM.
|
|
18
|
+
- Tên Task KHÔNG PHẢI LÀ "Làm tính năng X". Tên Task phải là **hành động cụ thể trên 1 file cụ thể**.
|
|
19
|
+
- VD Sai: `[ ] Thêm logic phân quyền`
|
|
20
|
+
- VD Đúng: `[ ] Taọ file auth.middleware.ts, đọc token từ header và trả về role.`
|
|
21
|
+
|
|
22
|
+
### 2. Clear Verification & TDD (Nếu có thể)
|
|
23
|
+
- How do you know it's done?
|
|
24
|
+
- What exact command to run? (e.g. `npm run test auth.test.ts`)
|
|
25
|
+
- What's the expected output?
|
|
25
26
|
|
|
26
27
|
### 3. Logical Ordering
|
|
27
28
|
- Dependencies identified
|
|
@@ -50,15 +51,15 @@ This skill provides a framework for breaking down work into clear, actionable ta
|
|
|
50
51
|
|
|
51
52
|
---
|
|
52
53
|
|
|
53
|
-
### Principle 2: Be SPECIFIC
|
|
54
|
-
|
|
55
|
-
| ❌ Wrong | ✅ Right |
|
|
56
|
-
|----------|----------|
|
|
57
|
-
| "Set up project" | "Run `npx create-next-app`" |
|
|
58
|
-
| "Add authentication" | "
|
|
59
|
-
| "Style the UI" | "
|
|
60
|
-
|
|
61
|
-
> **Rule:**
|
|
54
|
+
### Principle 2: Be STRICTLY SPECIFIC (File-Level)
|
|
55
|
+
|
|
56
|
+
| ❌ Wrong (Cấm Tuyệt Đối) | ✅ Right (Chuẩn Superpowers) |
|
|
57
|
+
|----------|----------|
|
|
58
|
+
| "Set up project" | "Run `npx create-next-app`" |
|
|
59
|
+
| "Add authentication" | "Tạo `api/auth.ts`, code hàm verify JWT và trả 401" |
|
|
60
|
+
| "Style the UI" | "Mở `Header.tsx`, đổi bg-white thành bg-slate-900" |
|
|
61
|
+
|
|
62
|
+
> **Rule:** Mỗi task là một phát súng bắn tỉa chính xác vào 1 file. Không viết task bắn tỉa mù.
|
|
62
63
|
|
|
63
64
|
---
|
|
64
65
|
|
|
@@ -110,19 +111,19 @@ This skill provides a framework for breaking down work into clear, actionable ta
|
|
|
110
111
|
|
|
111
112
|
## Plan Structure (Flexible, Not Fixed!)
|
|
112
113
|
|
|
113
|
-
```
|
|
114
|
-
# [
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
- [ ]
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
## Done When
|
|
125
|
-
- [ ] [Main success criteria]
|
|
114
|
+
```markdown
|
|
115
|
+
# [Tên tính năng ngắn gọn]
|
|
116
|
+
|
|
117
|
+
> **MANDATORY STEP BEFORE PLAN:** Đã đọc `.agent/knowledge/architecture_decisions.md` (ADR) để không lập kế hoạch sai luồng công nghệ chưa?
|
|
118
|
+
|
|
119
|
+
## Tasks
|
|
120
|
+
- [ ] `path/to/file1.py`: [Chính xác hàm gì cần thêm/sửa, tốn bao nhiêu phút?]
|
|
121
|
+
-> Verify: Chạy `pytest file1`, output X.
|
|
122
|
+
- [ ] `path/to/file2.ts`: [Chỉnh sửa dòng nào thành dòng nào?]
|
|
123
|
+
-> Verify: Bật browser check console log.
|
|
124
|
+
|
|
125
|
+
## Done When
|
|
126
|
+
- [ ] [Main success criteria]
|
|
126
127
|
```
|
|
127
128
|
|
|
128
129
|
> **That's it.** No phases, no sub-sections unless truly needed.
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: product-management
|
|
3
|
+
description: Skill nhập vai Product Manager. Viết PRD (Product Requirement Doc), lên Lộ trình (Roadmap) và theo dõi KPI.
|
|
4
|
+
allowed-tools: Read, Write
|
|
5
|
+
version: 1.0
|
|
6
|
+
priority: HIGH
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
# Kỹ năng Quản Trị Sản Phẩm (Product Management)
|
|
10
|
+
|
|
11
|
+
> **MỤC TIÊU:** Khi User muốn bổ sung "Tính năng mới", bạn KHÔNG PHẢI là Coder. Bạn là một Giám Đốc Sản Phẩm (PM).
|
|
12
|
+
|
|
13
|
+
Hãy từ chối viết code ngay lập tức. Thay vào đó, hãy kích hoạt Kỹ năng PM:
|
|
14
|
+
|
|
15
|
+
## 1. Viết PRD (Product Requirement Document)
|
|
16
|
+
Bắt buộc trải qua quy trình Mổ xẻ tính năng:
|
|
17
|
+
* **Vấn đề cốt lõi:** User/Khách hàng đang gặp nỗi đau gì?
|
|
18
|
+
* **Giải pháp:** Tính năng này giải quyết nỗi đau đó như thế nào?
|
|
19
|
+
* **User Story:** "Là một [Vai trò], tôi muốn [Hành động] để [Nhận được giá trị gì]."
|
|
20
|
+
* **Out of Scope:** Tính năng này RÕ RÀNG KHÔNG LÀM điều gì?
|
|
21
|
+
|
|
22
|
+
## 2. Đo Lường (Metrics & KPIs)
|
|
23
|
+
* Tính năng này sẽ được cho là "Thành công" khi chỉ số nào tăng/giảm? (Ví dụ: Số lượng Click vào nút Mua Hàng, Giảm độ trễ API xuống dưới 20ms).
|
|
24
|
+
* Công cụ Tracking dự kiến là gì? (Google Analytics, Sentry, Custom DB?)
|
|
25
|
+
|
|
26
|
+
## 3. Lộ Trình (Roadmap Phân Nhỏ)
|
|
27
|
+
Sử dụng tư duy của `plan-writing`: Chẻ nhỏ tính năng lớn thành nhiều viên gạch 5-phút. Viết rõ ràng từng viên gạch.
|
|
28
|
+
|
|
29
|
+
> **QUY TẮC SẮT (PM RULE):**
|
|
30
|
+
> Chỉ khi PRD và User Story được User "Gật đầu Approval", bạn mới được phép thoát vai PM và gọi `Task Boundary` chuyển sang vai Coder để Code.
|
|
@@ -100,10 +100,21 @@ grep -r "errorPattern" --include="*.ts"
|
|
|
100
100
|
pm2 logs app-name --err --lines 100
|
|
101
101
|
```
|
|
102
102
|
|
|
103
|
+
## 🛡️ Tool Use Guardian (Execution Protection)
|
|
104
|
+
|
|
105
|
+
When executing long chains of tool calls (especially when searching, indexing, or scraping), you MUST act as a Guardian of the execution:
|
|
106
|
+
1. **Pre-Call Validation:** Validate file paths and parameters before executing. Don't guess or hallucinate paths.
|
|
107
|
+
2. **Failure Recovery:** If a tool fails (Timeout, Rate Limit, Truncated JSON), **DO NOT panic and restart from scratch**.
|
|
108
|
+
- *Truncated:* Use `view_file` with line ranges to fetch the rest.
|
|
109
|
+
- *Timeout:* Simplify the bash command or narrow the `grep_search` scope.
|
|
110
|
+
- *Error-as-200:* Always check tool output for disguised `{"error": ...}` messages before assuming success.
|
|
111
|
+
3. **Checkpoints:** Maintain logical mental checkpoints. If Step 5 of a 10-step process fails, resume exactly at Step 5.
|
|
112
|
+
|
|
103
113
|
## Anti-Patterns
|
|
104
114
|
|
|
105
115
|
❌ **Random changes** - "Maybe if I change this..."
|
|
106
116
|
❌ **Ignoring evidence** - "That can't be the cause"
|
|
117
|
+
❌ **Assuming Data/API is dead** - Concluding an API endpoint is removed or data is unavailable just because a simple test failed (e.g., testing outside of service hours or without proper auth). ALWAYS check official documentation or sample SDK code before declaring an API dead.
|
|
107
118
|
❌ **Assuming** - "It must be X" without proof
|
|
108
119
|
❌ **Not reproducing first** - Fixing blindly
|
|
109
120
|
❌ **Stopping at symptoms** - Not finding root cause
|
|
@@ -134,15 +134,14 @@ Every test follows:
|
|
|
134
134
|
|
|
135
135
|
---
|
|
136
136
|
|
|
137
|
-
## 10.
|
|
137
|
+
## 10. Cognitive Roleplay TDD
|
|
138
138
|
|
|
139
|
-
###
|
|
139
|
+
### Solo-Agent Pattern
|
|
140
140
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
| Agent C | Optimize (REFACTOR) |
|
|
141
|
+
As a solo agent, you must explicitly shift cognitive contexts:
|
|
142
|
+
1. **Tester Persona**: Write failing tests (RED)
|
|
143
|
+
2. **Coder Persona**: Implement minimal code to pass (GREEN)
|
|
144
|
+
3. **Architect Persona**: Critically review and optimize (REFACTOR)
|
|
146
145
|
|
|
147
146
|
---
|
|
148
147
|
|