ai-developer-skill-os 9.1.1 → 9.3.0

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.
Files changed (63) hide show
  1. package/.agents/AGENTS.md +139 -42
  2. package/.agents/DEV_PROFILE.md +95 -0
  3. package/.agents/registry/capability-graph.yml +171 -334
  4. package/.agents/registry/graph.json +52 -18
  5. package/.agents/registry/index.yaml +66 -12
  6. package/.agents/registry/skills-index.yml +204 -447
  7. package/.agents/rules/coding.md +23 -0
  8. package/.agents/rules/global.md +44 -30
  9. package/.agents/skills/_template/SKILL.md +2 -300
  10. package/.agents/skills/qk-access-policy/SKILL.md +98 -393
  11. package/.agents/skills/qk-agent-observability/SKILL.md +3 -359
  12. package/.agents/skills/qk-ai-builder/SKILL.md +132 -485
  13. package/.agents/skills/qk-api-consumer/SKILL.md +256 -0
  14. package/.agents/skills/qk-api-consumer/capability.yaml +21 -0
  15. package/.agents/skills/qk-api-consumer/evals/scorecard.yaml +29 -0
  16. package/.agents/skills/qk-api-lifecycle/SKILL.md +133 -376
  17. package/.agents/skills/qk-bug-resolution/SKILL.md +128 -481
  18. package/.agents/skills/qk-code-review/SKILL.md +142 -340
  19. package/.agents/skills/qk-context-loader/SKILL.md +99 -391
  20. package/.agents/skills/qk-data-engineer/SKILL.md +253 -0
  21. package/.agents/skills/qk-data-lifecycle/SKILL.md +89 -408
  22. package/.agents/skills/qk-db-optimizer/SKILL.md +102 -408
  23. package/.agents/skills/qk-design-system-engineering/SKILL.md +76 -381
  24. package/.agents/skills/qk-devops-platform/SKILL.md +77 -383
  25. package/.agents/skills/qk-docs/SKILL.md +88 -414
  26. package/.agents/skills/qk-engineering-standard/SKILL.md +4 -508
  27. package/.agents/skills/qk-fe-api-integration/SKILL.md +343 -263
  28. package/.agents/skills/qk-fe-api-integration/evals/scorecard.yaml +29 -29
  29. package/.agents/skills/qk-feature-delivery/SKILL.md +137 -365
  30. package/.agents/skills/qk-feature-delivery/evals/scorecard.yaml +1 -1
  31. package/.agents/skills/qk-frontend-architecture/SKILL.md +5 -399
  32. package/.agents/skills/qk-help/evals/scorecard.yaml +13 -13
  33. package/.agents/skills/qk-orchestrator/SKILL.md +63 -422
  34. package/.agents/skills/qk-orchestrator/references/routing-table.md +10 -14
  35. package/.agents/skills/qk-product-specification/SKILL.md +70 -399
  36. package/.agents/skills/qk-production-release/SKILL.md +80 -457
  37. package/.agents/skills/qk-project-audit/SKILL.md +174 -0
  38. package/.agents/skills/qk-project-bootstrap/SKILL.md +244 -392
  39. package/.agents/skills/qk-project-health/SKILL.md +97 -416
  40. package/.agents/skills/qk-project-memory/SKILL.md +76 -21
  41. package/.agents/skills/qk-refactor/SKILL.md +167 -304
  42. package/.agents/skills/qk-security-audit/SKILL.md +141 -383
  43. package/.agents/skills/qk-security-audit/capability.yaml +1 -2
  44. package/.agents/skills/qk-system-evolution/SKILL.md +343 -263
  45. package/.agents/skills/qk-system-evolution/evals/scorecard.yaml +26 -26
  46. package/.agents/skills/qk-test-engineering/SKILL.md +119 -429
  47. package/.agents/skills/qk-ui-audit/SKILL.md +73 -457
  48. package/.agents/skills/qk-ui-builder/SKILL.md +521 -482
  49. package/.agents/skills/qk-ui-system-builder/SKILL.md +68 -434
  50. package/.agents/skills/qk-upgrade/SKILL.md +301 -0
  51. package/.agents/skills/qk-upgrade/capability.yaml +24 -0
  52. package/.agents/skills/qk-upgrade/evals/scorecard.yaml +26 -0
  53. package/.agents/skills/qk-validation-gate/SKILL.md +4 -523
  54. package/.agents/skills/qk-web-quality-gate/SKILL.md +85 -383
  55. package/.agents/workflows/bug-resolution.yml +6 -6
  56. package/.agents/workflows/context-discovery.yml +94 -0
  57. package/.agents/workflows/feature-delivery.yml +8 -4
  58. package/.agents/workflows/refactor.yml +6 -3
  59. package/.agents/workflows/shared/quality-gate.yml +94 -0
  60. package/.agents/workflows/skin-governance.yml +115 -0
  61. package/README.md +152 -67
  62. package/package.json +2 -2
  63. package/tooling/build-registry.js +30 -8
@@ -1,9 +1,9 @@
1
- ---
1
+ ---
2
2
  # ── Identity ───────────────────────────────────────────────
3
3
  name: qk-ui-audit
4
- version: 9.1.0
4
+ version: 9.2.0
5
5
  status: stable
6
- description: "Kiểm toán giao diện (UI) với 57-check Anti-Slop checklist — fail nếu score < 76/85 base."
6
+ description: "Kiểm toán chất lượng thiết kế UI với 57-check Anti-Slop checklist: spacing nhất quán, contrast ratio, component polish, interaction states. Output là nhận xét thiết kế và danh sách cần cải thiện. Dùng skill này khi user nhắc đến: review ui, audit giao diện, kiểm tra ui, ui quality, component spacing, design consistency, anti-slop KHÔNG dùng cho đo hiệu năng hay SEO."
7
7
  platforms: [antigravity, claude-code, cursor, windsurf, kilo-code]
8
8
 
9
9
  # ── V9: Classification ─────────────────────────────────────
@@ -21,12 +21,15 @@ complexity:
21
21
  has_external_dependency: false
22
22
  has_breaking_change: false
23
23
 
24
- triggers:
25
- - "audit ui"
26
- - "check ui"
27
- - "kiểm tra giao diện"
28
- - "ui slop"
29
- - "review ui"
24
+ triggers:
25
+ - "review ui"
26
+ - "audit giao diện"
27
+ - "kiểm tra ui"
28
+ - "ui quality"
29
+ - "component spacing"
30
+ - "design consistency"
31
+ - "anti"
32
+
30
33
 
31
34
  # ── V8: References ─────────────────────────────────────────
32
35
  workflow: code-review
@@ -78,482 +81,95 @@ token_budget:
78
81
  max_shell_commands: 0
79
82
  stop_early: true
80
83
 
81
- exit_codes: [SUCCESS, BLOCKED, FAILED, PARTIAL]
84
+ exit_codes: [SUCCESS, BLOCKED, FAILED, PARTIAL]
82
85
  ---
83
86
 
84
87
  # qk-ui-audit — Anti-Slop UI Inspector
85
88
 
86
89
  > **Language rule:** Code, identifiers, file names → English. Explanations, summaries → Vietnamese.
87
90
 
88
- ## Memory Workflow
89
-
90
- ### 0. Self-Init Protocol (Khởi Tạo Bộ Nhớ Local & Gitignore)
91
- - Trước khi tra cứu hoặc lưu trữ tri thức, BẮT BUỘC kiểm tra sự tồn tại của thư mục `.ai-local/` tại gốc dự án:
92
- - **Tự động tạo mới:** Nếu `.ai-local/` chưa tồn tại, AI phải tự động tạo cấu trúc thư mục `.ai-local/knowledge/` (và file `index.yaml` nếu cần thiết) cùng `.ai-local/candidates/`. Tuyệt đối không ngưng chạy hay hỏi ý kiến người dùng về thao tác khởi tạo tiêu chuẩn này.
93
- - **Bảo mật Gitignore:** BẮT BUỘC kiểm tra file `.gitignore` của dự án, nếu chưa có dòng `.ai-local/` thì phải tự động thêm vào để tuyệt đối bảo mật tri thức cá nhân và tránh lộ lọt lên Git.
94
-
95
- ---
96
-
97
- ### Pre-flight Retrieve (Trước khi thực thi)
98
- - Trước các task có tính lặp lại, debug, refactor, kiến trúc hoặc rủi ro cao:
99
- bắt buộc tra cứu:
100
- - `.ai-local/knowledge/index.yaml` (Private Local Knowledge)
101
-
102
- - Ưu tiên sử dụng các Knowledge đang có trạng thái `Active` thuộc:
103
- - Architecture
104
- - Hard Bug
105
- - Convention
106
- - Pattern
107
- - Tech Debt Pattern
108
- - 👉 *Domain Focus:* Convention / Pattern (vd: 57 check Anti-Slop, độ tương phản A11y, Design Contract).
109
-
110
- - Memory chỉ đóng vai trò **Navigator (bản đồ chỉ đường)**.
111
- Không được xem Memory là Source of Truth.
112
- Luôn xác minh lại bằng source code, configuration và trạng thái hiện tại của dự án trước khi áp dụng.
113
-
114
- ---
115
-
116
- ### Learning Flow (AI tự học có kiểm soát)
117
- - Trong quá trình làm việc, AI được phép tự phát hiện và tạo **Candidate Memory** khi nhận thấy:
118
- - Hard Bug có khả năng tái diễn.
119
- - Pattern làm việc lặp lại trong dự án.
120
- - Convention hoặc quy tắc kiến trúc mới.
121
- - Quyết định Architecture quan trọng.
122
- - Tech Debt Pattern hoặc Code Smell có tính hệ thống.
123
- - 👉 *Domain Harvest:* Các mẫu lỗi AI-Slop phổ biến mới phát hiện trong UI dự án.
124
-
125
- - Candidate Memory chỉ là bản nháp quan sát, chưa phải tri thức chính thức.
126
- - Candidate Memory có thể lưu tạm tại: `.ai-local/candidates/`
127
- - AI không được tự động Promote Candidate Memory thành Project Knowledge.
128
-
129
- ---
130
-
131
- ### Post-flight Harvest (Đề xuất → Phê duyệt)
132
- Sau khi hoàn thành task:
133
- - AI đánh giá các Candidate Memory đã tạo.
134
- - Nếu phát hiện tri thức có giá trị tái sử dụng:
135
- - Đề xuất người dùng xem xét.
136
- - Gửi yêu cầu phê duyệt thông qua:
137
- - `/learn`
138
- - `qk-project-memory`
139
- - Chỉ sau khi được phê duyệt, Candidate Memory mới được chuyển thành Knowledge chính thức:
140
-
141
- ```
142
- .ai-local/candidates/ ──(Approve)──> .ai-local/knowledge/index.yaml
143
- ```
144
-
145
- - Project Knowledge phải được xem như tài sản kỹ thuật của dự án:
146
- - Có thể review, cập nhật, loại bỏ và có lịch sử thay đổi.
147
-
148
- ---
149
-
150
- ### Ignore (Không đưa vào Memory)
151
- Không lưu:
152
- - Trace log của một session đơn lẻ.
153
- - Temporary debugging data.
154
- - Output của một lần chạy test/scan.
155
- - Report health tạm thời của một đợt kiểm tra.
156
- - Lỗi nhỏ chỉ xảy ra một lần.
157
- - Thông tin không có khả năng tái sử dụng.
158
- - 👉 *Domain Ignore:* Lỗi lệch vài pixel hoặc sai color shade lẻ tẻ.
159
-
160
- ---
161
-
162
- ### Golden Rule
163
- > **AI được phép học, nhưng không được tự quyết định tri thức chính thức.**
164
- > **AI quan sát → Đề xuất → Con người phê duyệt → Dự án tiến hóa.**
165
-
166
- ---
167
-
168
-
169
-
170
- ### Pre-flight Retrieve (Trước khi thực thi)
171
- - Trước các task có tính lặp lại, debug, refactor, kiến trúc hoặc rủi ro cao:
172
- bắt buộc tra cứu:
173
- - `.agents/knowledge/index.yaml` (Shared Project Knowledge)
174
- - `.ai-local/knowledge/index.yaml` (Private Local Knowledge)
175
-
176
- - Ưu tiên sử dụng các Knowledge đang có trạng thái `Active` thuộc:
177
- - Architecture
178
- - Hard Bug
179
- - Convention
180
- - Pattern
181
- - Tech Debt Pattern
182
- - 👉 *Domain Focus:* Convention / Pattern (vd: 57 check Anti-Slop, độ tương phản A11y, Design Contract).
183
-
184
- - Memory chỉ đóng vai trò **Navigator (bản đồ chỉ đường)**.
185
- Không được xem Memory là Source of Truth.
186
- Luôn xác minh lại bằng source code, configuration và trạng thái hiện tại của dự án trước khi áp dụng.
187
-
188
- ---
189
-
190
- ### Learning Flow (AI tự học có kiểm soát)
191
- - Trong quá trình làm việc, AI được phép tự phát hiện và tạo **Candidate Memory** khi nhận thấy:
192
- - Hard Bug có khả năng tái diễn.
193
- - Pattern làm việc lặp lại trong dự án.
194
- - Convention hoặc quy tắc kiến trúc mới.
195
- - Quyết định Architecture quan trọng.
196
- - Tech Debt Pattern hoặc Code Smell có tính hệ thống.
197
- - 👉 *Domain Harvest:* Các mẫu lỗi AI-Slop phổ biến mới phát hiện trong UI dự án.
198
-
199
- - Candidate Memory chỉ là bản nháp quan sát, chưa phải tri thức chính thức.
200
- - Candidate Memory có thể lưu tạm tại: `.ai-local/candidates/`
201
- - AI không được tự động Promote Candidate Memory thành Project Knowledge.
202
-
203
- ---
204
-
205
- ### Post-flight Harvest (Đề xuất → Phê duyệt)
206
- Sau khi hoàn thành task:
207
- - AI đánh giá các Candidate Memory đã tạo.
208
- - Nếu phát hiện tri thức có giá trị tái sử dụng:
209
- - Đề xuất người dùng xem xét.
210
- - Gửi yêu cầu phê duyệt thông qua:
211
- - `/learn`
212
- - `qk-project-memory`
213
- - Chỉ sau khi được phê duyệt, Candidate Memory mới được chuyển thành Knowledge chính thức:
214
-
215
- ```
216
- .ai-local/candidates/ ──(Approve)──> .agents/knowledge/index.yaml
217
- ```
218
-
219
- - Project Knowledge phải được xem như tài sản kỹ thuật của dự án:
220
- - Có thể review, cập nhật, loại bỏ và có lịch sử thay đổi.
221
-
222
- ---
223
-
224
- ### Ignore (Không đưa vào Memory)
225
- Không lưu:
226
- - Trace log của một session đơn lẻ.
227
- - Temporary debugging data.
228
- - Output của một lần chạy test/scan.
229
- - Report health tạm thời của một đợt kiểm tra.
230
- - Lỗi nhỏ chỉ xảy ra một lần.
231
- - Thông tin không có khả năng tái sử dụng.
232
- - 👉 *Domain Ignore:* Lỗi lệch vài pixel hoặc sai color shade lẻ tẻ.
233
-
234
- ---
235
-
236
- ### Golden Rule
237
- > **AI được phép học, nhưng không được tự quyết định tri thức chính thức.**
238
- > **AI quan sát → Đề xuất → Con người phê duyệt → Dự án tiến hóa.**
239
-
240
- ---
241
- ---
242
-
243
- ### Learning Flow (AI tự học có kiểm soát)
244
- - Trong quá trình làm việc, AI được phép tự phát hiện và tạo **Candidate Memory** khi nhận thấy:
245
- - Hard Bug có khả năng tái diễn.
246
- - Pattern làm việc lặp lại trong dự án.
247
- - Convention hoặc quy tắc kiến trúc mới.
248
- - Quyết định Architecture quan trọng.
249
- - Tech Debt Pattern hoặc Code Smell có tính hệ thống.
250
- - 👉 *Domain Harvest:* Các mẫu lỗi AI-Slop phổ biến mới phát hiện trong UI dự án.
251
-
252
- - Candidate Memory chỉ là bản nháp quan sát, chưa phải tri thức chính thức.
253
- - Candidate Memory có thể lưu tạm tại: `.ai-local/candidates/`
254
- - AI không được tự động Promote Candidate Memory thành Project Knowledge.
255
-
256
- ---
257
-
258
- ### Post-flight Harvest (Đề xuất → Phê duyệt)
259
- Sau khi hoàn thành task:
260
- - AI đánh giá các Candidate Memory đã tạo.
261
- - Nếu phát hiện tri thức có giá trị tái sử dụng:
262
- - Đề xuất người dùng xem xét.
263
- - Gửi yêu cầu phê duyệt thông qua:
264
- - `/learn`
265
- - `qk-project-memory`
266
- - Chỉ sau khi được phê duyệt, Candidate Memory mới được chuyển thành Knowledge chính thức:
267
-
268
- ```
269
- .ai-local/candidates/ ──(Approve)──> .agents/knowledge/index.yaml
270
- ```
271
-
272
- - Project Knowledge phải được xem như tài sản kỹ thuật của dự án:
273
- - Có thể review, cập nhật, loại bỏ và có lịch sử thay đổi.
274
-
275
- ---
276
-
277
- ### Ignore (Không đưa vào Memory)
278
- Không lưu:
279
- - Trace log của một session đơn lẻ.
280
- - Temporary debugging data.
281
- - Output của một lần chạy test/scan.
282
- - Report health tạm thời của một đợt kiểm tra.
283
- - Lỗi nhỏ chỉ xảy ra một lần.
284
- - Thông tin không có khả năng tái sử dụng.
285
- - 👉 *Domain Ignore:* Lỗi lệch vài pixel hoặc sai color shade lẻ tẻ.
286
-
287
- ---
288
-
289
- ### Golden Rule
290
- > **AI được phép học, nhưng không được tự quyết định tri thức chính thức.**
291
- > **AI quan sát → Đề xuất → Con người phê duyệt → Dự án tiến hóa.**
292
-
293
- ---
294
- ---
295
-
296
- ### Learning Flow (AI tự học có kiểm soát)
297
- - Trong quá trình làm việc, AI được phép tự phát hiện và tạo **Candidate Memory** khi nhận thấy:
298
- - Hard Bug có khả năng tái diễn.
299
- - Pattern làm việc lặp lại trong dự án.
300
- - Convention hoặc quy tắc kiến trúc mới.
301
- - Quyết định Architecture quan trọng.
302
- - Tech Debt Pattern hoặc Code Smell có tính hệ thống.
303
- - 👉 *Domain Harvest:* Các mẫu lỗi AI-Slop phổ biến mới phát hiện trong UI dự án.
304
-
305
- - Candidate Memory chỉ là bản nháp quan sát, chưa phải tri thức chính thức.
306
- - Candidate Memory có thể lưu tạm tại: `.ai-local/candidates/`
307
- - AI không được tự động Promote Candidate Memory thành Project Knowledge.
308
-
309
- ---
310
-
311
- ### Post-flight Harvest (Đề xuất → Phê duyệt)
312
- Sau khi hoàn thành task:
313
- - AI đánh giá các Candidate Memory đã tạo.
314
- - Nếu phát hiện tri thức có giá trị tái sử dụng:
315
- - Đề xuất người dùng xem xét.
316
- - Gửi yêu cầu phê duyệt thông qua:
317
- - `/learn`
318
- - `qk-project-memory`
319
- - Chỉ sau khi được phê duyệt, Candidate Memory mới được chuyển thành Knowledge chính thức:
320
-
321
- ```
322
- .ai-local/candidates/ ──(Approve)──> .agents/knowledge/index.yaml
323
- ```
324
-
325
- - Project Knowledge phải được xem như tài sản kỹ thuật của dự án:
326
- - Có thể review, cập nhật, loại bỏ và có lịch sử thay đổi.
327
-
328
- ---
329
-
330
- ### Ignore (Không đưa vào Memory)
331
- Không lưu:
332
- - Trace log của một session đơn lẻ.
333
- - Temporary debugging data.
334
- - Output của một lần chạy test/scan.
335
- - Report health tạm thời của một đợt kiểm tra.
336
- - Lỗi nhỏ chỉ xảy ra một lần.
337
- - Thông tin không có khả năng tái sử dụng.
338
- - 👉 *Domain Ignore:* Lỗi lệch vài pixel hoặc sai color shade lẻ tẻ.
339
-
340
- ---
341
-
342
- ### Golden Rule
343
- > **AI được phép học, nhưng không được tự quyết định tri thức chính thức.**
344
- > **AI quan sát → Đề xuất → Con người phê duyệt → Dự án tiến hóa.**
345
-
346
- ---
347
- ---
348
- ---
349
- ---
350
-
351
- ## Preconditions
352
- - [ ] `DESIGN.md` exists in project root
353
- - [ ] Target UI file(s) or component(s) are specified
354
-
355
- ```
356
- On missing precondition:
357
- EXIT: BLOCKED
358
- Message: "DESIGN.md not found. Run qk-project-bootstrap to create one, or provide design tokens manually."
359
- ```
360
-
361
- ## Scope
362
- - ✅ Score UI components against DESIGN.md tokens
363
- - ✅ Detect generic AI-slop aesthetics
364
- - ✅ Verify ARIA roles and contrast ratios
365
- - ✅ Validate responsive, interactive, and animation states
366
-
367
- ## Non-Goals
368
- - ❌ Fix the UI — only audit and report (fixes go to qk-ui-builder)
369
- - ❌ Pixel-level screenshot comparison
370
- - ❌ Read entire CSS files — use targeted reads
371
-
372
- ## Priority Order
91
+ Chịu trách nhiệm kiểm toán chi tiết tính thẩm mỹ, sự nhất quán và độ hoàn thiện thị giác của giao diện người dùng theo bộ **57-Check Anti-Slop Checklist**. Ngăn chặn triệt để tình trạng giao diện AI cẩu thả (AI-generated slop): lệch nhịp spacing, độ tương phản kém, thiếu states tương tác.
373
92
 
374
- | Priority | Category | Points | Skip Threshold |
375
- |----------|----------|--------|----------------|
376
- | P1 | Accessibility (ARIA, contrast, keyboard) | 15pts | Never |
377
- | P2 | Layout & Spacing (tokens, grid, whitespace) | 15pts | Budget < 30% |
378
- | P3 | Typography & Colors (DESIGN.md compliance) | 15pts | Budget < 50% |
379
- | P4 | Interactions & Animations (hover, focus, transitions) | 15pts | Budget < 60% |
380
- | P5 | Anti-Slop Detection (Tra chéo với R-C-09: thẻ card xám xịt, viền nhạt nhòa, text nhỏ...) | 15pts | Budget < 70% |
381
- | P6 | Performance & Best Practices | 10pts | Budget < 80% |
382
- | BONUS | Mobile & Cross-browser | 5pts extra | Always optional |
383
- | EXTENDED | Edge cases | 9pts extra | Always optional |
384
-
385
- **Total: 85 base + 14 bonus/extended = 99 max. Pass threshold: ≥ 76/85 base (90%)**
386
-
387
- ## Workflow
388
-
389
- ### Phase 1 — Load Design Contract
390
-
391
- **Steps:**
392
- 1. `grep_search` for DESIGN.md → read color tokens, spacing scale, typography
393
- 2. Extract key tokens: primary colors (HSL), spacing unit, font families, border-radius, shadow levels
394
-
395
- **Exit When:**
396
- - Tokens extracted → go to Phase 2
397
- - DESIGN.md empty or incomplete → EXIT: BLOCKED
398
-
399
- ### Phase 2 — Scan Target UI
400
-
401
- **Steps:**
402
- 1. `view_file[targeted]` — read component file(s), focus on className, style, and JSX structure
403
- 2. Check against each Priority category in order (P1 → P6)
404
- 3. Log each finding with Evidence Format
405
-
406
- **Decision:**
407
- ```
408
- IF score accumulates ≥ 76 after P1+P2+P3
409
- → Can skip P4–P6 if token budget < 40%
410
- → EXIT: PARTIAL (pass, but incomplete audit noted)
411
-
412
- IF CRITICAL violation found (e.g., hardcoded password in UI, broken ARIA)
413
- → STOP audit, report immediately
414
- → EXIT: FAILED
415
- ```
416
-
417
- **Exit When:**
418
- - All categories checked → go to Phase 3
419
- - Token budget < 20% → go to Phase 3 with PARTIAL flag
420
-
421
- ### Phase 3 — Score & Report
422
-
423
- **Steps:**
424
- 1. Calculate total score per category
425
- 2. Identify top 3 most impactful fixes
426
- 3. Generate report with Evidence Format entries
93
+ ---
427
94
 
428
- **Decision:**
429
- ```
430
- IF total score ≥ 76
431
- → EXIT: SUCCESS
95
+ ## Preconditions
432
96
 
433
- IF total score 60–75
434
- → EXIT: PARTIAL — list required fixes
97
+ Trước khi audit giao diện, AI BẮT BUỘC kiểm tra:
435
98
 
436
- IF total score < 60
437
- EXIT: FAILED demand redesign, not patch
438
- ```
99
+ - [ ] Xác định các file UI component hoặc trang cần audit (`.tsx`, `.vue`, `.svelte`, `.html`, `.css`).
100
+ - [ ] Đọc file cấu hình thiết kế nếu có (`DESIGN.md`, `tailwind.config.js`, tokens file) để lấy chuẩn so sánh.
101
+ - [ ] Kiểm tra xem component có mã nguồn rõ ràng để phân tích styling không.
102
+ - [ ] Nếu component sử dụng inline style hoặc cấu trúc quá rối loạn không thể đọc được layout:
103
+ → **EXIT: PARTIAL**
104
+ → Báo cáo user tình trạng code kèm khuyến nghị refactor trước khi audit chi tiết.
439
105
 
440
- ## Confidence Model
106
+ ---
441
107
 
442
- | Level | Condition | Action |
443
- |-------|-----------|--------|
444
- | HIGH | Token clearly absent/present, ARIA attribute visible | Report directly |
445
- | MEDIUM | Inferred from surrounding code patterns | Note assumption |
446
- | LOW | Cannot verify without rendering (e.g., animation timing) | Mark as "unverifiable — manual check required" |
108
+ ## Scope
447
109
 
448
- ## Severity
110
+ Skill này làm:
111
+ - Rà soát 4 nhóm kiểm tra chính theo chuẩn Anti-Slop:
112
+ 1. Spacing & Grid System (4px/8px grid alignment, nhất quán padding/margin, không dùng giá trị arbitrary tùy tiện).
113
+ 2. Color & Contrast (Tỉ lệ tương phản văn bản/nền theo WCAG AA, tính nhất quán của bảng màu token).
114
+ 3. Typography & Hierarchy (Phân cấp kích cỡ font chữ, line-height, font-weight có trật tự).
115
+ 4. Interactive States (Đầy đủ hover, active, focus-visible, disabled, loading, skeleton states).
116
+ - Xuất danh sách các điểm vi phạm (Slop items) kèm vị trí dòng code cụ thể.
117
+ - Đề xuất mã CSS / Tailwind class sửa đổi chuẩn chỉnh.
118
+ - Chế độ hoạt động: **Read-Only / Inspection Report** (không tự sửa code khi chưa duyệt).
119
+
120
+ ❌ Skill này KHÔNG làm:
121
+ - Đo lường hiệu năng kỹ thuật web, Core Web Vitals, SEO tags (→ `qk-web-quality-gate`).
122
+ - Xây dựng component mới từ bản vẽ Figma (→ `qk-ui-builder`).
123
+ - Định nghĩa lại toàn bộ hệ thống Design Tokens từ gốc (→ `qk-design-system-engineering`).
449
124
 
450
- | Level | Definition | Example |
451
- |-------|-----------|---------|
452
- | CRITICAL | Accessibility violation blocking disabled users | Missing alt text, contrast ratio < 3:1 |
453
- | HIGH | Design system contract broken | Hardcoded hex color not in DESIGN.md |
454
- | MEDIUM | UX degraded, workaround exists | Missing hover state, no loading indicator |
455
- | LOW | Minor inconsistency | Spacing off by 1 unit |
125
+ ---
456
126
 
457
- ## Evidence Format
127
+ ## Execution Steps
458
128
 
129
+ ### Step 1 — Target Ingestion & Design Baseline
459
130
  ```
460
- [SEVERITY] path/to/Component.tsx:LINE
461
- Category: [Accessibility|Layout|Typography|Interaction|Anti-Slop|Performance]
462
- Reason: [specific violation description]
463
- Confidence: [HIGH|MEDIUM|LOW]
464
- Fix: [one-line actionable suggestion]
465
- Points: -N pts
131
+ Inputs: Danh sách file UI, DESIGN.md / Tailwind config
132
+ Actions:
133
+ - Nạp source code component.
134
+ - Xác định Design Tokens chuẩn của dự án (màu sắc, spacing scales, border-radius).
135
+ Output: Component AST / Markup map
466
136
  ```
467
137
 
468
- **Example:**
138
+ ### Step 2 — 57-Check Anti-Slop Audit
469
139
  ```
470
- [HIGH] src/components/Button.tsx:23
471
- Category: Typography
472
- Reason: font-size hardcoded as "16px" should use DESIGN.md token `--font-size-base`
473
- Confidence: HIGH
474
- Fix: Replace with `var(--font-size-base)`
475
- Points: -3 pts
140
+ Inputs: Component code, Design tokens
141
+ Actions:
142
+ - Quét Spacing: Phát hiện các giá trị cứng (hardcoded px) thay vì dùng token (ví dụ: mt-[13px]).
143
+ - Quét Visual Hierarchy: Đảm bảo tiêu đề và nội dung có sự phân biệt rõ ràng.
144
+ - Quét Interactive States: Kiểm tra các button, input, link xem có `:focus-visible` và `:disabled` chuẩn không.
145
+ - Quét Layout Bugs: Xử lý tràn chữ (overflow, text truncation), co giãn responsive.
146
+ Output: Audit findings categorized by severity
476
147
  ```
477
148
 
478
- ## Retry Policy
149
+ ### Step 3 — Remediation Formulation
479
150
  ```
480
- Audit is read-only — no retry needed.
481
- If file is inaccessible → note as PARTIAL and continue with other files.
151
+ Inputs: Audit findings
152
+ Actions:
153
+ - Viết giải thích ngắn gọn lý do vi phạm.
154
+ - Cung cấp đoạn code so sánh Before/After cụ thể.
155
+ Output: Anti-Slop Audit Report
482
156
  ```
483
157
 
484
- ## Escalation Rules
485
-
158
+ ### Step 4 — Verification & Delivery
486
159
  ```
487
- BLOCKED: DESIGN.md missing or unreadable
488
- Missing:
489
- - DESIGN.md with color tokens, spacing scale, typography definition
490
- Questions:
491
- 1. Có file design system nào khác không? (tokens.css, theme.ts, etc.)
492
- 2. Bạn có thể cung cấp màu sắc / font / spacing chính của dự án không?
493
- Recommended Assumptions (if proceeding):
494
- - Use industry-standard: 8px spacing unit, Inter font, neutral gray palette
160
+ Inputs: Anti-Slop Audit Report
161
+ Actions:
162
+ - Đảm bảo các khuyến nghị tuân thủ 100% stack khai báo trong DEV_PROFILE.md.
163
+ - Bàn giao báo cáo cho kỹ sư frontend.
164
+ Exit: SUCCESS
495
165
  ```
496
166
 
497
- ## Handoff Contract
498
-
499
- ### Consumes
500
- ```json
501
- {
502
- "from": "user or qk-orchestrator",
503
- "required_fields": ["target_component_path", "design_md_path"],
504
- "optional_fields": ["specific_checklist_categories"]
505
- }
506
- ```
507
-
508
- ### Produces
509
- ```json
510
- {
511
- "to": "qk-ui-builder (if fixes needed)",
512
- "output_fields": ["audit_score", "violations_list", "top_3_fixes", "exit_code"]
513
- }
514
- ```
167
+ ---
515
168
 
516
- ## Output Format
169
+ ## Prompt Template
517
170
 
518
171
  ```
519
- 🎨 UI Audit Report
520
- ─────────────────────────────────────────────────
521
- Component: [path/to/component]
522
- DESIGN.md: [found | not found]
523
-
524
- Scores:
525
- P1 Accessibility: [X/15]
526
- P2 Layout: [X/15]
527
- P3 Typography: [X/15]
528
- P4 Interactions: [X/15]
529
- P5 Anti-Slop: [X/15]
530
- P6 Performance: [X/10]
531
- ─────────────────
532
- Total: [X/85 base] → [PASS ≥ 76/85 | FAIL < 76/85]
533
-
534
- Violations (top priority first):
535
- [SEVERITY] file:LINE — reason — Fix: suggestion (-Xpts)
536
-
537
- Top 3 Required Fixes:
538
- 1. [Most impactful fix]
539
- 2. [Second fix]
540
- 3. [Third fix]
541
-
542
- Verdict: [PASS | FAIL — requires redesign]
543
- Exit Code: [SUCCESS | PARTIAL | FAILED]
544
- ```
545
-
546
- ## Exit Codes
547
-
548
- | Code | Meaning | When |
549
- |------|---------|------|
550
- | SUCCESS | Score ≥ 76 — UI passes Anti-Slop | All checks done, no critical violations |
551
- | PARTIAL | Score 60–75 or incomplete audit | Some categories skipped due to token budget |
552
- | BLOCKED | DESIGN.md missing or target not specified | Cannot audit without design contract |
553
- | FAILED | Score < 60 or CRITICAL violation found | Generic slop detected, redesign required |
554
-
555
- ## References
556
- - Full 57-check checklist: `references/anti-slop-checklist.md`
557
-
558
- ---
559
-
172
+ UI Component / Trang: [Đường dẫn file component hoặc page cần kiểm tra]
173
+ Design Tokens: [File cấu hình tailwind.config / css tokens / DESIGN.md]
174
+ Vấn đề nghi ngờ: [Bị lệch spacing, nút bấm xấu, thiếu hover state, ...]
175
+ ```