spec-lite 1.1.6 → 1.1.8
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/package.json +4 -2
- package/references/accessibility-checklist.md +160 -0
- package/references/orchestration-patterns.md +370 -0
- package/references/performance-checklist.md +153 -0
- package/references/security-checklist.md +134 -0
- package/references/testing-patterns.md +236 -0
- package/skills/archive/SKILL.md +125 -0
- package/skills-overview.md +462 -0
|
@@ -0,0 +1,462 @@
|
|
|
1
|
+
# Skills Overview
|
|
2
|
+
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
## Getting Started — Greenfield
|
|
6
|
+
|
|
7
|
+
Dùng khi bắt đầu dự án mới chưa có code. Mục tiêu: bootstrap `prd.md`, `domain.md`, `sad.md` thông qua interview có cấu trúc, sau đó chuyển vào **Integration Pipeline** để implement.
|
|
8
|
+
|
|
9
|
+
| Command | Reads | Writes |
|
|
10
|
+
| --- | --- | --- |
|
|
11
|
+
| `/spec-prd` | — | `specs/main/prd.md`, `specs/main/domain.md` *(skeleton)* |
|
|
12
|
+
| `/spec-sad` | `prd.md`, `domain.md` | `specs/main/sad.md` |
|
|
13
|
+
|
|
14
|
+
### `/spec-prd`
|
|
15
|
+
|
|
16
|
+
Tạo hoặc cập nhật `specs/main/prd.md` thông qua interview có cấu trúc. Ngoài ra **scaffold luôn `specs/main/domain.md` skeleton** (Glossary placeholder + Shared Entities rỗng) — domain mọc dần qua cascade từ integrations.
|
|
17
|
+
|
|
18
|
+
**Sections template** (7): Problem Statement · Target Users · Scope · Features · Components · Non-Functional Requirements · Business Constraints
|
|
19
|
+
|
|
20
|
+
**Khi file chưa tồn tại hoặc là template rỗng** → full interview tuần tự từng section.
|
|
21
|
+
|
|
22
|
+
**Khi file đã có nội dung** → quét tất cả `##` headings theo thứ tự xuất hiện trong file, hiển thị menu:
|
|
23
|
+
- Section thuộc template: `✓ đã có` hoặc `✗ chưa có — cần bổ sung`
|
|
24
|
+
- Section thừa (không có trong template): `⚠ không có trong template`
|
|
25
|
+
- Option `[A]` để interview tất cả sections thuộc template
|
|
26
|
+
|
|
27
|
+
Chọn số section thuộc template → interview rồi merge vào file.
|
|
28
|
+
Chọn số section thừa → xoá ngay.
|
|
29
|
+
Chọn `A` → interview tuần tự 7 sections template (sections thừa không bị đụng tới).
|
|
30
|
+
|
|
31
|
+
---
|
|
32
|
+
|
|
33
|
+
### `/spec-sad`
|
|
34
|
+
|
|
35
|
+
Tạo hoặc cập nhật `specs/main/sad.md`. Yêu cầu `prd.md` và `domain.md` đã tồn tại (cả hai do `/spec-prd` scaffold).
|
|
36
|
+
|
|
37
|
+
Trước khi interview, đọc `prd.md` (NFRs, constraints) và `domain.md` (glossary, shared entities) để surface assumptions và đề xuất options phù hợp khi user chưa quyết định.
|
|
38
|
+
|
|
39
|
+
**Sections template** (7): Architectural Style · System Overview · Tech Stack · Cross-Cutting Concerns · Inter-Service Communication · Infrastructure Overview · Architectural Guardrails
|
|
40
|
+
|
|
41
|
+
**Khi file chưa tồn tại** → full interview tuần tự từng section.
|
|
42
|
+
|
|
43
|
+
**Khi file đã có nội dung** → cùng cơ chế quét + menu như `/spec-prd`.
|
|
44
|
+
|
|
45
|
+
Nếu `prd.md` chưa có → dừng, yêu cầu chạy `/spec-prd` trước.
|
|
46
|
+
|
|
47
|
+
> **Lưu ý:** Architectural Guardrails là phần quan trọng nhất của SAD — skill luôn hỏi riêng về phần này khi review, vì đây là constraints mà mọi agent phải tuân theo khi sinh `tech.md`.
|
|
48
|
+
|
|
49
|
+
---
|
|
50
|
+
|
|
51
|
+
### Thứ tự thực hiện
|
|
52
|
+
|
|
53
|
+
```
|
|
54
|
+
/spec-prd → /spec-sad
|
|
55
|
+
│
|
|
56
|
+
│ (có thể chạy /scaffold để khởi tạo project structure)
|
|
57
|
+
│
|
|
58
|
+
▼
|
|
59
|
+
→ Integration Pipeline
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
---
|
|
63
|
+
|
|
64
|
+
## Getting Started — Brownfield
|
|
65
|
+
|
|
66
|
+
Dùng khi onboarding một project đã có code vào SDD. Mục tiêu: extract main artifacts từ codebase hiện có, sau đó chuyển vào **Integration Pipeline** để implement.
|
|
67
|
+
|
|
68
|
+
**Thứ tự bắt buộc:** `init` → `component` → `feature`
|
|
69
|
+
|
|
70
|
+
| Command | Scan | Reads | Writes |
|
|
71
|
+
| --- | --- | --- | --- |
|
|
72
|
+
| `/spec-brownfield-init [path]` | tech stack, README, auth, infra | attachments | `prd.md` *(no indexes)*, `domain.md` *(glossary only)*, `sad.md` |
|
|
73
|
+
| `/spec-brownfield-component [path]` | module dirs, service/controller/entity files | `prd.md`, `domain.md` | `component/{C-XXX}-*/crd.md + cdd.md`; update `prd.md` Component Index; cascade Shared Entities → `domain.md` |
|
|
74
|
+
| `/spec-brownfield-feature [path]` | use cases, routes, test files | `prd.md`, `domain.md`, `component/*/crd.md` | `feature/{F-XXX}-*/frd.md + fdd.md`; update `prd.md` Feature Index |
|
|
75
|
+
|
|
76
|
+
### Phân chia trách nhiệm
|
|
77
|
+
|
|
78
|
+
Mỗi skill chịu trách nhiệm duy nhất cho phần nó scan — **không có scan nào bị lặp lại**:
|
|
79
|
+
|
|
80
|
+
| | init | component | feature |
|
|
81
|
+
|---|---|---|---|
|
|
82
|
+
| Discover what exists | product/arch level | scan module dirs → discover components | scan routes/use cases → discover features |
|
|
83
|
+
| Deep code scan | ✗ | ✓ files bên trong từng component | ✓ use cases, tests, call chains |
|
|
84
|
+
| Write back to prd.md | skeleton (no indexes) | Component Index | Feature Index |
|
|
85
|
+
| Cascade to domain.md | Glossary skeleton | Shared Entities | ✗ |
|
|
86
|
+
|
|
87
|
+
### Điểm khác biệt so với greenfield
|
|
88
|
+
|
|
89
|
+
- **Scan trước, hỏi sau** — agent build structural picture từ code trước khi đặt câu hỏi.
|
|
90
|
+
- **Pre-filled options** — user confirm/adjust, không nhập từ đầu. Luôn có `[0] Chưa rõ → NEEDS_CLARIFY`.
|
|
91
|
+
- **Batch generation** — component/feature artifacts generate theo batch, review ở cuối.
|
|
92
|
+
- **NEEDS_CLARIFY** không block flow — có thể fill in dần sau.
|
|
93
|
+
|
|
94
|
+
---
|
|
95
|
+
|
|
96
|
+
### `/spec-brownfield-init [path]`
|
|
97
|
+
|
|
98
|
+
**Mục tiêu:** `prd.md` (product context, không có Component/Feature Index), `domain.md` (Glossary only), `sad.md`
|
|
99
|
+
|
|
100
|
+
**Scan**: package files → tech stack · README/docs → business context · top-level dir structure → architecture style · auth/middleware → cross-cutting concerns · docker-compose/infra → deployment info
|
|
101
|
+
|
|
102
|
+
**prd.md interview** (5 phần): Problem Statement · Target Users · Scope · NFRs · Business Constraints
|
|
103
|
+
|
|
104
|
+
Component Index và Feature Index **để placeholder** — sẽ được điền bởi skill component và feature.
|
|
105
|
+
|
|
106
|
+
**domain.md**: chỉ Glossary từ README/docs terms. Shared Entities trống — sẽ được cascade từ skill component.
|
|
107
|
+
|
|
108
|
+
**sad.md**: auto-fill từ scan + hỏi 2 câu (Guardrails + additional constraints).
|
|
109
|
+
|
|
110
|
+
---
|
|
111
|
+
|
|
112
|
+
### `/spec-brownfield-component [path]`
|
|
113
|
+
|
|
114
|
+
**Mục tiêu:** `crd.md` + `cdd.md` cho mỗi component + điền prd.md Component Index + cascade Shared Entities vào domain.md
|
|
115
|
+
|
|
116
|
+
**Precondition:** `prd.md` tồn tại (init đã chạy).
|
|
117
|
+
|
|
118
|
+
**Bước 1 — Discover:** scan module dirs (`src/modules/`, `services/`, `packages/`, `apps/`) → detect component candidates → present cho user confirm/adjust → assign C-XXX IDs.
|
|
119
|
+
|
|
120
|
+
**Bước 2 — Deep scan từng component:** responsibilities (service methods) · owned entities (entity files) · public interface (controller routes + events) · dependencies (imports) · business rules (validators/guards) · internal design (cho cdd.md).
|
|
121
|
+
|
|
122
|
+
**Bước 3 — Identify cross-component entities:** entities được import bởi 2+ components → candidate Shared Entities.
|
|
123
|
+
|
|
124
|
+
**Bước 4 — Generate batch:** crd.md + cdd.md cho tất cả. Batch clarification tối đa 5 câu.
|
|
125
|
+
|
|
126
|
+
**Bước 5 — Write back:** update prd.md Component Index + cascade Shared Entities vào domain.md (nếu có).
|
|
127
|
+
|
|
128
|
+
---
|
|
129
|
+
|
|
130
|
+
### `/spec-brownfield-feature [path]`
|
|
131
|
+
|
|
132
|
+
**Mục tiêu:** `frd.md` + `fdd.md` cho mỗi feature + điền prd.md Feature Index
|
|
133
|
+
|
|
134
|
+
**Precondition:** `prd.md` Component Index đã có entries (component skill đã chạy). fdd.md cần C-XXX IDs để mô tả inter-component flows — nếu Component Index trống thì skill dừng và yêu cầu chạy component skill trước.
|
|
135
|
+
|
|
136
|
+
**Bước 1 — Discover:** scan use case files, route groups, test describe blocks, page/screen dirs → detect feature candidates → present cho user confirm/adjust → assign F-XXX IDs.
|
|
137
|
+
|
|
138
|
+
**Bước 2 — Deep scan từng feature:** user stories (infer từ use case + routes + tests) · AC (extract từ test assertions, đánh dấu source) · components consumed (map sang C-XXX) · inter-component call chain (cho fdd.md).
|
|
139
|
+
|
|
140
|
+
**Bước 3 — Generate batch:** frd.md + fdd.md cho tất cả. Batch clarification tối đa 5 câu.
|
|
141
|
+
|
|
142
|
+
**Bước 4 — Write back:** update prd.md Feature Index.
|
|
143
|
+
|
|
144
|
+
---
|
|
145
|
+
|
|
146
|
+
### Thứ tự thực hiện
|
|
147
|
+
|
|
148
|
+
```
|
|
149
|
+
/spec-brownfield-init [path]
|
|
150
|
+
│
|
|
151
|
+
▼
|
|
152
|
+
/spec-brownfield-component [path]
|
|
153
|
+
│
|
|
154
|
+
▼
|
|
155
|
+
/spec-brownfield-feature [path]
|
|
156
|
+
│
|
|
157
|
+
▼
|
|
158
|
+
(fill in NEEDS_CLARIFY items khi có thêm context)
|
|
159
|
+
│
|
|
160
|
+
▼
|
|
161
|
+
→ Integration Pipeline
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
---
|
|
165
|
+
|
|
166
|
+
## Integration Pipeline — dùng cho cả greenfield và brownfield
|
|
167
|
+
|
|
168
|
+
Sau khi main artifacts đã sẵn sàng (từ greenfield hoặc brownfield), mọi requirement mới đều đi qua pipeline này.
|
|
169
|
+
|
|
170
|
+
| Command | Reads | Writes |
|
|
171
|
+
| --- | --- | --- |
|
|
172
|
+
| `/spec-new [requirement]` | `prd.md`, `domain.md`, frd(s), crd(s) | `specs/integrations/{slug}/spec.md` |
|
|
173
|
+
| `/spec-tech [number]` | `sad.md`, `domain.md`, cdd(s), fdd(s), `spec.md` | `specs/integrations/{slug}/tech.md` |
|
|
174
|
+
| `/plan` | `spec.md`, `tech.md`, `domain.md` | `plan.md`, `todo.md` |
|
|
175
|
+
| `/build` | `plan.md`, `todo.md` | *(source code)* |
|
|
176
|
+
| `/review` | `spec.md`, `tech.md`, `plan.md`, `todo.md`, *(source code)* | *(findings report)* |
|
|
177
|
+
| `/archive` | `specs/integrations/` | `specs/archive/` |
|
|
178
|
+
|
|
179
|
+
### `/spec-new [requirement]`
|
|
180
|
+
|
|
181
|
+
Tạo `specs/integrations/{slug}/spec.md` cho một integration mới. Chạy bởi BA.
|
|
182
|
+
|
|
183
|
+
**Nếu không có argument** → đọc `prd.md`, hiển thị danh sách features có `Status = TODO`, user chọn số.
|
|
184
|
+
|
|
185
|
+
**Nếu có argument** → argument là raw requirement, dùng trực tiếp làm input.
|
|
186
|
+
|
|
187
|
+
Context load: `prd.md` + `domain.md` + `frd.md` (cho mỗi feature liên quan) + `crd.md` (cho mỗi component bị touched). Frontmatter `features` và `components` được điền theo những gì agent xác định.
|
|
188
|
+
|
|
189
|
+
**Interview** (4 phần, tuần tự): Problem Statement · Requirements · Acceptance Criteria · Out of Scope
|
|
190
|
+
|
|
191
|
+
AC tự nhóm theo bản chất integration: Feature → US → AC, hoặc Component → AC, hoặc mix.
|
|
192
|
+
|
|
193
|
+
**Cascade Proposals** đề xuất delta cho: `prd.md`, `domain.md`, `component/{C-XXX}/crd.md`, `feature/{F-XXX}/frd.md`. Component và feature mới có thể được đề xuất tạo cùng cascade (auto-pick ID + slug).
|
|
194
|
+
|
|
195
|
+
Sau khi confirm → ghi `spec.md`, cập nhật `prd.md`: Status `TODO → In Progress` (nếu liên quan feature).
|
|
196
|
+
|
|
197
|
+
---
|
|
198
|
+
|
|
199
|
+
### `/spec-tech [number]`
|
|
200
|
+
|
|
201
|
+
Tạo `specs/integrations/{slug}/tech.md` cho một integration. Chạy bởi DEV sau khi `spec.md` đã được approve.
|
|
202
|
+
|
|
203
|
+
**Luôn hiển thị danh sách tất cả integrations** trong `specs/integrations/`, đánh dấu `✓` những cái đã có `tech.md`. Nếu có argument → argument là số thứ tự (`1`, `001`...), chọn luôn không cần hiển thị.
|
|
204
|
+
|
|
205
|
+
Nếu integration đã có `tech.md` → hỏi confirm trước khi ghi đè.
|
|
206
|
+
|
|
207
|
+
Context load: `spec.md` + `sad.md` + `domain.md` + `cdd.md` (cho mỗi component bị touched) + `fdd.md` (cho mỗi feature liên quan).
|
|
208
|
+
|
|
209
|
+
**Interview** (4 phần, tuần tự): Solution Overview · Data Model Changes · Interface Changes · Implementation Notes
|
|
210
|
+
|
|
211
|
+
**Cascade Proposals** đề xuất delta cho: `sad.md`, `domain.md`, `component/{C-XXX}/cdd.md`, `feature/{F-XXX}/fdd.md`.
|
|
212
|
+
|
|
213
|
+
---
|
|
214
|
+
|
|
215
|
+
### `/plan`
|
|
216
|
+
|
|
217
|
+
Tạo `plan.md` và `todo.md` từ `spec.md` + `tech.md`. Là SDD wrapper quanh `planning-and-task-breakdown`.
|
|
218
|
+
|
|
219
|
+
**Bước 1: Xác định integration**
|
|
220
|
+
Quét `specs/integrations/`, hiển thị danh sách với trạng thái `spec✓/—`, `tech✓/—`, `plan✓/—`. Nếu có argument → chọn luôn. Nếu `plan.md`/`todo.md` đã tồn tại → hỏi trước khi ghi đè.
|
|
221
|
+
|
|
222
|
+
**Bước 2: Load và surface context**
|
|
223
|
+
Đọc `spec.md`, `tech.md`, `domain.md`. Surface tóm tắt (features, components, AC IDs, thay đổi kỹ thuật, shared entities) và assumptions để user confirm. Plan mode từ đây — chỉ đọc, không viết code.
|
|
224
|
+
|
|
225
|
+
**Bước 3: Handoff → `planning-and-task-breakdown`**
|
|
226
|
+
Delegate toàn bộ breakdown (dependency graph, vertical slicing, sizing) sang `planning-and-task-breakdown`. Output phải theo Output Format định nghĩa trong `skills/plan/SKILL.md`.
|
|
227
|
+
|
|
228
|
+
**Không có Cascade Proposals** — nếu phát hiện delta cần cập nhật `sad.md`/`domain.md`/component/feature artifacts → dừng, báo user, đề xuất tạo integration riêng.
|
|
229
|
+
|
|
230
|
+
---
|
|
231
|
+
|
|
232
|
+
### `/build`
|
|
233
|
+
|
|
234
|
+
Implement từng task trong `todo.md` theo vòng lặp TDD incremental. Chạy bởi DEV sau khi `plan.md` đã được approve.
|
|
235
|
+
|
|
236
|
+
Với mỗi task `[ ]` trong `todo.md`, lặp lại:
|
|
237
|
+
|
|
238
|
+
1. **Load context** — đọc code, types, patterns liên quan. Hỏi: cách đơn giản nhất có thể làm việc là gì?
|
|
239
|
+
2. **UI/UX check** — nếu task liên quan đến UI/UX → invoke `frontend-design` + `frontend-ui-engineering` trước khi implement.
|
|
240
|
+
3. **RED** — viết test trước, chạy và xác nhận nó fail.
|
|
241
|
+
4. **GREEN** — implement code tối thiểu để test pass.
|
|
242
|
+
5. **Verify** — chạy `npm test` (toàn bộ suite). Nếu regression → invoke `debugging-and-error-recovery`.
|
|
243
|
+
6. **Build** — chạy `npm run build`. Nếu fail → invoke `debugging-and-error-recovery`.
|
|
244
|
+
7. **Commit** — atomic commit trong phạm vi task này.
|
|
245
|
+
8. **Đánh dấu** — check `[x]` trong `todo.md`, chuyển task tiếp theo.
|
|
246
|
+
|
|
247
|
+
**Scope discipline** — chỉ chạm vào những gì task yêu cầu. Không refactor code liền kề, không implement task tương lai.
|
|
248
|
+
|
|
249
|
+
**Quan hệ với các skill khác:** delegates to `incremental-implementation` + `test-driven-development` · invokes `frontend-design` + `frontend-ui-engineering` (UI/UX tasks) · escalates to `debugging-and-error-recovery` (test/build failures).
|
|
250
|
+
|
|
251
|
+
---
|
|
252
|
+
|
|
253
|
+
### `/review`
|
|
254
|
+
|
|
255
|
+
Review implementation sau `/build` theo năm trục: correctness, readability, architecture, security, performance. Đối chiếu trực tiếp với `spec.md` và `tech.md`. Delegates to `code-review-and-quality`.
|
|
256
|
+
|
|
257
|
+
**Findings** phân loại theo severity:
|
|
258
|
+
|
|
259
|
+
| Severity | Ý nghĩa | Action |
|
|
260
|
+
|----------|---------|--------|
|
|
261
|
+
| **Critical** | Blocks merge | Security vulnerability, data loss, chức năng vỡ |
|
|
262
|
+
| **Important** | Phải sửa | Bug logic, vi phạm spec, architecture sai |
|
|
263
|
+
| **Suggestion** | Tuỳ chọn | Readability, style nhẹ |
|
|
264
|
+
|
|
265
|
+
**Verdict:**
|
|
266
|
+
- Có Critical/Important → dừng, không tiếp tục `/build`, sửa và re-review.
|
|
267
|
+
- Chỉ Suggestion hoặc không có finding → approve, tiếp tục `/build` task tiếp theo.
|
|
268
|
+
|
|
269
|
+
---
|
|
270
|
+
|
|
271
|
+
### `/archive`
|
|
272
|
+
|
|
273
|
+
Di chuyển integration đã hoàn thành hoặc không còn active từ `specs/integrations/` sang `specs/archive/` để dọn dẹp thư mục làm việc chính.
|
|
274
|
+
|
|
275
|
+
**Bước 1 — Kiểm tra thư mục:** Tự động tạo `specs/archive/` nếu chưa tồn tại.
|
|
276
|
+
|
|
277
|
+
**Bước 2 — Liệt kê:** Quét `specs/integrations/`, hiển thị numbered list kèm status (đọc từ `spec.md` nếu có). Nếu không có integration nào → thông báo và dừng.
|
|
278
|
+
|
|
279
|
+
**Bước 3 — Xác nhận:** Hiển thị preview mapping `integrations/{slug}/ → archive/{slug}/` trước khi di chuyển. Chờ user confirm.
|
|
280
|
+
|
|
281
|
+
**Bước 4 — Di chuyển:** Move toàn bộ thư mục, giữ nguyên cấu trúc bên trong. Nếu slug đã tồn tại trong `specs/archive/` → bỏ qua và cảnh báo để tránh ghi đè.
|
|
282
|
+
|
|
283
|
+
**Bước 5 — Kết quả:** Liệt kê integrations đã archive, integrations bị bỏ qua (nếu có), và số integration còn lại trong `specs/integrations/`.
|
|
284
|
+
|
|
285
|
+
---
|
|
286
|
+
|
|
287
|
+
### Thứ tự thực hiện
|
|
288
|
+
|
|
289
|
+
```
|
|
290
|
+
/spec-new [requirement]
|
|
291
|
+
(human review + apply cascade proposals + approve)
|
|
292
|
+
│
|
|
293
|
+
/spec-tech
|
|
294
|
+
(human review + apply cascade proposals + approve)
|
|
295
|
+
│
|
|
296
|
+
/plan
|
|
297
|
+
(human approve)
|
|
298
|
+
│
|
|
299
|
+
/build ←──────────────┐
|
|
300
|
+
│ │
|
|
301
|
+
/review │ (nếu Critical/Important)
|
|
302
|
+
│ │
|
|
303
|
+
[approve] ──────────┘ (nếu Suggestion only)
|
|
304
|
+
│
|
|
305
|
+
/archive (khi integration Done, dọn dẹp khỏi integrations/)
|
|
306
|
+
```
|
|
307
|
+
|
|
308
|
+
---
|
|
309
|
+
|
|
310
|
+
## Cross-cutting skills
|
|
311
|
+
|
|
312
|
+
Không nằm trong pipeline chính — được `build` tự động invoke khi gặp task phù hợp.
|
|
313
|
+
|
|
314
|
+
| Skill | Vai trò | Invoke khi |
|
|
315
|
+
| --- | --- | --- |
|
|
316
|
+
| `frontend-design` | Aesthetic direction | Task tạo/sửa UI, chưa có design system |
|
|
317
|
+
| `frontend-ui-engineering` | Component architecture & engineering standards | Mọi task UI/UX |
|
|
318
|
+
|
|
319
|
+
### `frontend-design`
|
|
320
|
+
|
|
321
|
+
Xác định hướng aesthetic trước khi implement. Trả lời câu hỏi: *interface này trông như thế nào và cảm giác như thế nào?*
|
|
322
|
+
|
|
323
|
+
- Chọn aesthetic direction rõ ràng và táo bạo (minimalist, brutalist, editorial, luxury...) — không để mặc định
|
|
324
|
+
- Typography: font đặc trưng, không dùng Inter/Roboto/Arial
|
|
325
|
+
- Color: palette nhất quán với accent mạnh, dùng CSS variables
|
|
326
|
+
- Motion: animation có chủ đích tại các điểm quan trọng (page load, hover, transition)
|
|
327
|
+
- Layout: bất đối xứng, overlap, grid-breaking — tránh card grid đều nhau kiểu AI
|
|
328
|
+
|
|
329
|
+
**Mục tiêu:** UI memorable và unmistakably designed — không phải AI-generated look.
|
|
330
|
+
|
|
331
|
+
---
|
|
332
|
+
|
|
333
|
+
### `frontend-ui-engineering`
|
|
334
|
+
|
|
335
|
+
Đảm bảo engineering quality cho mọi UI được implement. Trả lời câu hỏi: *interface này có đúng kỹ thuật không?*
|
|
336
|
+
|
|
337
|
+
- **Component architecture**: colocate file, composition over configuration, tách container/presentation
|
|
338
|
+
- **Accessibility (WCAG 2.1 AA)**: keyboard navigation, ARIA labels, focus management, đủ contrast
|
|
339
|
+
- **State management**: chọn cách đơn giản nhất (useState → lifted state → context → server state → global store)
|
|
340
|
+
- **Responsive**: mobile-first, test tại 320px / 768px / 1024px / 1440px
|
|
341
|
+
- **Loading/error/empty states**: bắt buộc — không để blank screen
|
|
342
|
+
|
|
343
|
+
**Mục tiêu:** UI production-quality — accessible, performant, không có AI aesthetic.
|
|
344
|
+
|
|
345
|
+
---
|
|
346
|
+
|
|
347
|
+
## ADO Integration
|
|
348
|
+
|
|
349
|
+
Nhóm skill kết nối SDD workflow với Azure DevOps — từ setup project đến tạo tickets tự động từ spec.
|
|
350
|
+
|
|
351
|
+
> `/ado-create` và `/ado-update` thực hiện **một integration mỗi lần chạy** — chọn integration ở đầu skill, toàn bộ thao tác chỉ trong phạm vi integration đó.
|
|
352
|
+
|
|
353
|
+
| Command | Reads | Writes |
|
|
354
|
+
| --- | --- | --- |
|
|
355
|
+
| `/ado-config` | `.claude/ado.yaml` *(nếu đã có)* | `.claude/ado.yaml`, `.gitignore` *(nếu cần)* |
|
|
356
|
+
| `/ado-create` | `.claude/ado.yaml`, `spec.md`, `frd.md` | ADO tickets, `spec.md`, `frd.md`, `prd.md` |
|
|
357
|
+
| `/ado-update` | `.claude/ado.yaml`, `spec.md` | ADO ticket states *(via MCP)* |
|
|
358
|
+
|
|
359
|
+
### Thứ tự thực hiện
|
|
360
|
+
|
|
361
|
+
```
|
|
362
|
+
/ado-config (một lần per project)
|
|
363
|
+
│
|
|
364
|
+
▼
|
|
365
|
+
/ado-create (mỗi lần có integration mới được approve)
|
|
366
|
+
│
|
|
367
|
+
▼
|
|
368
|
+
/ado-update (mỗi lần deploy/verify qua môi trường)
|
|
369
|
+
```
|
|
370
|
+
|
|
371
|
+
---
|
|
372
|
+
|
|
373
|
+
### `/ado-config`
|
|
374
|
+
|
|
375
|
+
Tạo hoặc cập nhật `.claude/ado.yaml` — file config ADO dùng chung cho tất cả skill `/ado-*`.
|
|
376
|
+
|
|
377
|
+
**Khi file chưa tồn tại** → collect toàn bộ tuần tự.
|
|
378
|
+
|
|
379
|
+
**Khi file đã tồn tại** → hiển thị tóm tắt nội dung hiện tại, hỏi user muốn cập nhật phần nào:
|
|
380
|
+
- Toàn bộ từ đầu
|
|
381
|
+
- Thông tin project
|
|
382
|
+
- Team members
|
|
383
|
+
- Epic ticket
|
|
384
|
+
- Môi trường
|
|
385
|
+
|
|
386
|
+
**Bước 2 — Project:**
|
|
387
|
+
- Hỏi organization (tự extract nếu user paste full URL)
|
|
388
|
+
- Gọi MCP `core_list_projects` để list projects trong org → user chọn số thứ tự → tự điền `project_name` và `project_id`
|
|
389
|
+
- Đề xuất `project_code` từ tên project (ví dụ `Galaxy GCC` → `GAL-GCC`), user confirm hoặc nhập lại
|
|
390
|
+
|
|
391
|
+
**Bước 3 — Team:** Collect PE / SE / DE, mỗi role nhập email, mỗi người một dòng. PE là bắt buộc.
|
|
392
|
+
|
|
393
|
+
**Bước 4 — Epic Ticket:** Tạo Epic mới qua MCP (title được prefix `[{project_code}]`, assignee là PE đầu tiên) hoặc nhập ID ticket có sẵn (validate qua MCP: phải là type `Epic`). Lưu `id`, `title`, `url` vào config.
|
|
394
|
+
|
|
395
|
+
**Bước 5 — Environments:** Collect danh sách môi trường (dev / stag / prod).
|
|
396
|
+
|
|
397
|
+
**Cuối:** Ghi `.claude/ado.yaml`, đảm bảo file không bị ignore bởi `.gitignore` (thêm `!.claude/ado.yaml` nếu `.claude/` đang bị ignore).
|
|
398
|
+
|
|
399
|
+
---
|
|
400
|
+
|
|
401
|
+
### `/ado-create`
|
|
402
|
+
|
|
403
|
+
Đọc `spec.md` của một integration, tạo Feature và User Story tickets trên ADO, ghi ticket references trở lại vào spec artifacts.
|
|
404
|
+
|
|
405
|
+
**Prerequisite:** `.claude/ado.yaml` phải có `epic.id` (chạy `/ado-config` trước).
|
|
406
|
+
|
|
407
|
+
**Bước 1 — Current user:** Đọc `git config user.email`, tìm trong `team.*` của `ado.yaml`. Nếu không khớp → hỏi user chọn. Resolve email → ADO identity ID để dùng làm assignee.
|
|
408
|
+
|
|
409
|
+
**Bước 2 — Chọn integration:** List tất cả `specs/integrations/` kèm title và status từ frontmatter `spec.md`.
|
|
410
|
+
|
|
411
|
+
**Bước 3 — Parse spec.md:** Extract Features (`### Feature: <name> (<ID>)`) và User Stories (`#### US-FXXX-YYY — <title>`). Detect ticket đã tồn tại qua dòng `**ADO:**` ngay sau heading — đánh dấu `already_created`, bỏ qua khi tạo.
|
|
412
|
+
|
|
413
|
+
**Bước 4 — Preview:** Hiển thị kế hoạch đầy đủ (Feature và User Story sẽ tạo, skip list) trước khi tạo bất kỳ ticket nào. Chờ user confirm.
|
|
414
|
+
|
|
415
|
+
**Bước 5-6 — Tạo tickets:**
|
|
416
|
+
- Feature ticket: type `Feature`, title `[{project_code}] [{feature_id}] {feature_name}`, description từ `frd.md`. Link parent → Epic ngay sau khi tạo.
|
|
417
|
+
- User Story ticket: type `User Story`, title `[{project_code}] [{feature_name}] - {US-code} — {story_title}`, description gồm câu story + ACs. Link parent → Feature ngay sau khi tạo.
|
|
418
|
+
- Nếu link parent fail → retry 1 lần → nếu vẫn fail: đánh dấu `orphan` (KHÔNG xóa ticket), báo cáo cuối.
|
|
419
|
+
|
|
420
|
+
**Bước 7-9 — Ghi lại references:**
|
|
421
|
+
- `spec.md`: thêm dòng `**ADO:** [#ID — title](url)` ngay sau heading của mỗi Feature và User Story đã tạo thành công
|
|
422
|
+
- `frd.md`: append section `## ADO Tickets` (bảng Feature + User Story) hoặc append row vào bảng đã có
|
|
423
|
+
- `prd.md`: thêm/cập nhật cột `ADO` trong bảng Features
|
|
424
|
+
|
|
425
|
+
**Bước 10 — Tóm tắt:** Liệt kê tickets đã tạo (kèm URL), files đã cập nhật, tickets thất bại, và orphans cần link thủ công.
|
|
426
|
+
|
|
427
|
+
---
|
|
428
|
+
|
|
429
|
+
### `/ado-update`
|
|
430
|
+
|
|
431
|
+
Cập nhật state đồng loạt cho User Story (và tuỳ chọn Feature) tickets của một integration theo tiến trình deploy/verify qua các môi trường.
|
|
432
|
+
|
|
433
|
+
**Prerequisites:** `.claude/ado.yaml` có `environments`, tất cả tickets đã được tạo qua `/ado-create`.
|
|
434
|
+
|
|
435
|
+
**Bước 1 — Load config:** Đọc `ado.yaml`. Dừng nếu thiếu file hoặc `environments` rỗng.
|
|
436
|
+
|
|
437
|
+
**Bước 2 — Chọn integration:** List `specs/integrations/` kèm title và status.
|
|
438
|
+
|
|
439
|
+
**Bước 3 — Parse & validate:** Extract tất cả Feature và User Story tickets từ dòng `**ADO:**` trong `spec.md`. Nếu bất kỳ ticket nào chưa có → dừng, báo danh sách thiếu, yêu cầu chạy `/ado-create` trước.
|
|
440
|
+
|
|
441
|
+
**Bước 4 — Fetch state hiện tại:** Gọi song song: batch fetch state hiện tại của tất cả tickets + fetch danh sách states hợp lệ từ ADO work item type `User Story` và `Feature`. State list lấy thực tế từ ADO — **không hardcode**, **không generate từ `environments`**.
|
|
442
|
+
|
|
443
|
+
**Environment-State Filtering:** Sau khi fetch, filter bớt các state `Deploy *` / `Verify *` không tương ứng với environments trong config. ADO trả về pairs theo thứ tự (Deploy X, Verify X) — map positional: pair thứ N → `environments[N]`. Pairs có index ≥ số environments → loại. General states (New, In Progress, Done...) giữ nguyên.
|
|
444
|
+
|
|
445
|
+
**Bước 5 — Chọn state mới (User Story):** Hiển thị numbered list plain text (không dùng `AskUserQuestion` — số options có thể vượt 4). Chờ user nhập số.
|
|
446
|
+
|
|
447
|
+
**Bước 6 — Preview & cập nhật User Story:** Hiển thị từng ticket với state cũ → mới, đánh dấu "(không đổi)" cho ticket đã đúng state. Chỉ gọi API update cho ticket thực sự thay đổi. Gọi tuần tự, không dừng nếu 1 ticket fail.
|
|
448
|
+
|
|
449
|
+
**Bước 7 — Feature tickets (tuỳ chọn):** Hỏi user có muốn cập nhật Feature tickets không. Nếu có → hiển thị Feature state list, chọn, preview, cập nhật tương tự.
|
|
450
|
+
|
|
451
|
+
**Bước 8 — Tóm tắt:** Liệt kê tickets đã cập nhật, tickets không đổi, và tickets thất bại.
|
|
452
|
+
|
|
453
|
+
---
|
|
454
|
+
|
|
455
|
+
## Ghi chú
|
|
456
|
+
|
|
457
|
+
- Cascade proposals trong `spec.md` và `tech.md` do human review và apply thủ công — không có skill riêng.
|
|
458
|
+
- **Greenfield**: Component và Feature artifacts mọc dần qua cascade từ integrations — không có skill chuyên biệt để tạo.
|
|
459
|
+
- **Brownfield**: Component và Feature artifacts được bootstrap bởi `spec-brownfield-component` và `spec-brownfield-feature` — sau đó tiếp tục mọc qua cascade như bình thường.
|
|
460
|
+
- Thứ tự trong một integration: `spec-new` → `spec-tech` → `plan` → `build`.
|
|
461
|
+
- `frontend-design` và `frontend-ui-engineering` được `build` invoke tự động — không cần gọi thủ công.
|
|
462
|
+
- `**[NEEDS_CLARIFY]**` items trong brownfield artifacts không block workflow — có thể proceed và fill in dần khi có thêm context.
|