@haposoft/cafekit 0.16.7 → 0.18.0

package/src/claude/skills/ui-ux/references/budgets.md

@@ -0,0 +1,113 @@
+# Ngân sách và nhịp
+
+Đếm được thì mới giữ được. Vượt số nào thì phải có lý do, và nói lý do đó lúc giao.
+
+Skill này chỉ lo **màn hình trong app** — dashboard, danh sách, bảng, form, cài
+đặt. Nhánh trang bán hàng đã gỡ khỏi skill (nằm ở `archive/` của repo).
+
+---
+
+## Trần
+
+| Hạng mục | Trần | Ghi chú |
+| --- | --- | --- |
+| Màu nhấn | 1 | Màu thứ hai phải xin phép. Tag phân loại (`M8`) và màu nhận diện của thực thể người dùng tạo (`M34`) không tính |
+| Họ chữ | 1 | Phân vai bằng weight, không bằng font thứ hai |
+| Sắc độ chữ | 3 | chính, phụ, và màu trên nền nhấn |
+| Bậc bo góc | 4 | full, lớn, giữa, nhỏ |
+| Bậc shadow | 2 | **chỉ cho lớp nổi**: dropdown/popover, và modal. Trong trang thì không bóng — xem `M15` |
+| Token viền | 2 | một cho đường tóc, tối đa một bậc đậm hơn. Cộng `--border-focus`. Xem `M16` |
+| Tầng lồng khối | 2 | |
+| Độ dài dòng chữ | 75 ký tự | |
+| Dạng nút | 4 | `outline` (mặc định; icon trái khi glyph gọi đúng hành động), `primary` nền nhấn, `secondary` nền xám, `ghost`. Nút nguy hiểm là `ghost` phủ nền `rose` mờ (`I4`), không phải dạng thứ năm. Cộng nút chỉ-icon. Xem `I1`, `components/button.md` |
+| Bậc spacing | thang 4/8/12/16/20/24/32/40 cho khoảng cách giữa các khối | Bên trong control (nút, badge, danh sách dày) được dùng nửa bậc 2/6/10 (`py-0.5`, `gap-1.5`, `py-2.5`, `space-y-0.5`). Ngoài hai thang này thì không |
+
+---
+
+## Nhịp
+
+| | Giá trị |
+| --- | --- |
+| Padding trang | `p-4 sm:p-6` |
+| Padding card | `p-4` ở mobile, `p-5` từ `sm` |
+| Padding trong thẻ, desktop | 20–24px |
+| Gap lưới | `gap-3` |
+| Padding section | `py-4` |
+| Chiều cao dòng danh sách | 12–16px chiều dọc |
+| Chiều cao nút | `py-2.5` |
+| **Ô nhập, select, nút trong form** | **`h-11 md:h-10`** (44px màn hẹp, 40px từ `md`), ô và nút đổi cùng nhau. Form đăng nhập/đăng ký đứng riêng giữa trang được lên `h-12` |
+| "Xem tất cả", "đọc thêm" | link chữ `h-8`, không padding ngang, căn phải (`I7`) |
+| Viền card | đường tóc 1px, một token duy nhất |
+| Bóng card | **không có** |
+
+**Nút trong form phải cao bằng ô nhập, và cả hai phải đổi cùng nhau.** Cùng
+`h-11 md:h-10`: đổi một cái mà giữ cái kia là lỗi thấy ngay, nút 40px nằm dưới ô
+48px trông như hai thứ của hai bộ khác nhau.
+
+**Vì sao 40px, không phải 48px.** Đừng dùng lại `h-12` cho ô và nút form ở mọi bề
+rộng với lý do suy từ `R8`: `R8` nói về **cỡ chữ** 16px, không nói
+chiều cao: chữ 16px nằm trong ô 40px vẫn thoáng. 48px trong dashboard thì thô,
+lệch một bậc so với link sidebar, mục menu, mục dropdown (đều `h-10`), và 2 ô + 1
+hàng nút đã ăn gần hết một modal. Màn hẹp lên 44px cho vừa ngón tay. Chỉ form
+đăng nhập/đăng ký đứng một mình giữa trang mới được `h-12`: cả màn chỉ có form đó.
+
+Áp cho mọi nút nằm trong luồng form — đăng nhập, đăng ký, đổi mật khẩu, nút
+`Lưu` / `Huỷ` cuối form. Không áp cho nút trong header hay trong dòng danh sách.
+
+`p-3` cho padding trang **chỉ** dành cho màn hình cố ý sát mép: trang tab mới của
+trình duyệt, bảng điều khiển toàn màn, kiosk. Trang app bình thường dùng
+`p-4 sm:p-6`, nếu không nội dung dính lề và cả trang trông chật dù từng khối đều
+đúng nhịp.
+
+---
+
+## Thẻ nhỏ trong cột hoặc lưới dày
+
+Thẻ kanban, thẻ trong lưới nhiều cột, thẻ trong panel hẹp đều là card nên vẫn bám
+thang. Đừng tự hạ xuống cho gọn — gọn quá thành chật (luật `F12`).
+
+| | Giá trị |
+| --- | --- |
+| Padding thẻ | `p-4`, **không** xuống `p-3` |
+| Gap giữa các thẻ trong một cột | `gap-3` |
+| Gap giữa các cột | `gap-4` |
+| Khoảng cách tiêu đề cột với thẻ đầu | `mb-3` |
+
+Thẻ chứa hai dòng chữ trở lên thì `p-3` là chật. `p-3` chỉ dành cho chip, nhãn,
+và ô điều khiển nhỏ.
+
+---
+
+## Thang cỡ chữ
+
+Bảy tên, và bảy tên đó là **hết**. Không inline pixel ngoài thang (`T7`).
+
+| Token | Dùng cho |
+| --- | --- |
+| `xs` | nhãn, dấu thời gian |
+| `sm` | **mặc định của app** (`T6`): chữ nội dung, dòng danh sách, mô tả |
+| `base` | tên thẻ, tiêu đề card |
+| `sm` + `font-medium` | nút (`button.md`). Tailwind không có `text-md` |
+| `lg` | tiêu đề khối (nhóm nhiều card); tên bản ghi ở đầu trang chi tiết của app quản lý (khách hàng, đơn, dự án) |
+| `xl` | **tên của một trang**, ở mọi khổ màn |
+| `2xl` | hero của trang trình diễn ở màn hẹp; con số trong card số liệu từ `sm` (`sm:text-2xl`) |
+| `3xl` | hero từ `sm`; giá trong bảng giá. Tên trang bảng giá đứng riêng là `text-2xl sm:text-3xl`, không nhỏ hơn giá (`layouts/pricing.md`) |
+
+Thứ bậc bắt buộc: **tên trang (`xl`) > tiêu đề khối (`lg`) > tên thẻ (`base`)**,
+mỗi bậc cách nhau đúng một nấc ở **mọi** breakpoint (luật `T8`).
+
+Tiêu đề trang chi tiết của nội dung lặp lại (bài viết, khoá học, sản phẩm) lấy **đúng cỡ
+nó có ở danh sách**, không nhảy lên một bậc (`T9`). Bản ghi của app quản lý (khách hàng, đơn,
+dự án) không thuộc `T9`: ở danh sách nó là một dòng bảng `text-sm`, lên trang chi tiết là tên
+đầu trang `lg`.
+
+⚠️ Hai bẫy đã dính ở dự án thật:
+
+- `md` và `lg` lỡ cùng một giá trị, nên "8 size chuẩn" thực ra chỉ có **7**. Kiểm thang của dự án trước khi tin vào tên token.
+- Tên trang từng là `2xl` ở desktop, chủ dự án chốt hạ về `xl` vì đọc ra **quá to so với nội dung bên dưới**. `2xl` chỉ còn cho hero và con số card số liệu.
+
+---
+
+## Ở mobile thì hạ bậc
+
+Bảng nhịp cho màn hẹp nằm ở `responsive.md`. Đừng chép lại ở đây — một nguồn thôi.

package/src/claude/skills/ui-ux/references/checklist.md

@@ -0,0 +1,271 @@
+# Checklist
+
+Ba cổng. Mỗi cổng chạy ở một thời điểm khác nhau — đừng gộp làm một lượt cuối.
+
+Mỗi dòng ở đây là một lỗi **đã thật sự xảy ra**. Dòng nào ba vòng test liền không
+bắt được lỗi nào thì xoá (luật ở `SKILL.md` mục 4).
+
+---
+
+## Cổng 1 — trước khi viết dòng class đầu tiên
+
+- [ ] **Câu 1 của `SKILL.md`** đã trả lời chưa: nhánh `U` (mặc định cho mọi đề dựng hay làm lại một màn trở lên), soi, dựng lại giữ brand, dựng lại theo gu skill, refactor, dựng luôn hay việc nhỏ hơn một màn? Chưa trả lời thì chưa được đi tiếp.
+- [ ] **Đã báo dòng "Audit: …" chưa?** Không có dòng đó là chưa audit, dù có grep hay không.
+- [ ] Đã grep `package.json` và `components/ui` chưa — họ dùng Tailwind? shadcn? Hay bộ khác?
+- [ ] **Thứ sắp dựng đã có trong codebase chưa?** Grep tên nó (`Avatar`, `Dropdown`, `Modal`…). Có rồi thì dùng, đừng dựng cái thứ hai.
+- [ ] **Đã chạy audit tầng 3 (phong cách) chưa?** Dự án có phong cách khác flat thì theo dự án, không hỏi, báo một dòng lúc giao; dự án flat mà tự đổi sang glass là sai (`P1`).
+- [ ] Phong cách đã chọn không phải flat: đã mở đúng khối của nó trong `styles.md` và kiểm hết mục **Bẫy** chưa?
+- [ ] **Tương phản (`P3`)**: chữ thường ≥ 4.5 : 1, đo ở **chỗ tệ nhất** — đầu nhạt của gradient, vùng sáng nhất phía sau kính. Chữ phụ `/50` là thứ trượt trước.
+- [ ] Theo phong cách của dự án nhưng **không theo lỗi** của dự án: vẫn chỉ một nút chính (`I3`), vẫn một màu nhấn (`M3`).
+- [ ] **Không có `package.json`?** Vậy sắp đưa code gì ra — `.tsx` hay HTML thuần? Đưa JSX cho dự án không React là hỏng.
+- [ ] Đã grep token sẵn có chưa (`--primary`, `--brand`, `font-family`)? Có thì dùng, đừng hỏi.
+- [ ] **Copy sắp viết bằng tiếng gì** — đã grep i18n và nhãn hiện có chưa (`T24`)? Người dùng đang viết tiếng gì, để trả lời bằng tiếng đó (`T27`)?
+- [ ] Đề bài có từ nào mơ hồ không (bảng, thẻ, danh sách, khung, trang, lịch)?
+- [ ] Đề để hở: đã dựng **đủ bộ khối mặc định** trong file layout chưa, hay làm mỏng dính (`S5`)? Không hỏi phạm vi.
+- [ ] Nhánh `U`, wireframe: dữ liệu mẫu có mục ở trạng thái suy từ giờ (trễ, quá hạn) không; số khối có đè chữ không; sidebar, panel `sticky` còn dính khi cuộn không; thanh công cụ vừa một dòng ở 1280 không (`U3`)?
+- [ ] Nhánh `U`: đã dựng đúng **phương án wireframe đã chọn** chưa, hay tự bịa (`U4`)? Lối dựng luôn: dựng theo phương án sẽ khuyên, báo một dòng "Bố cục: … vì …". Việc nhỏ hơn một màn: **bố cục mặc định** trong file layout, báo một dòng "muốn kiểu khác thì nói".
+- [ ] Dự án đã có UI (nhánh `U` hay dựng lại): tin giao có dòng **`Dáng:`** đi qua bảng "Dáng lấy từ skill, không từ CSS cũ" (`review.md`) chưa? Dropdown, checkbox, viền card, thanh cuộn, nút header lấy theo mẫu của skill, hay còn CSS cũ của dự án?
+- [ ] Cùng ca đó: tin giao có mục **"Còn thấy"** (`U4`) chưa? Thứ bản dựng không được tự sửa (bớt thông tin, gom màu trang trí, badge nhiều màu tranh với giá) đã nêu thành dòng đánh số, hay giữ nguyên mà im lặng?
+- [ ] Đề nhiều hơn một màn? Đã chốt **hợp đồng nguyên tố** (`system.md` `D1`) ở `U4`, trước màn đầu tiên chưa?
+- [ ] Người dùng nói "chưa biết muốn UI thế nào" → đã dựng hướng A và báo còn B, C chưa?
+
+---
+
+## Cổng 2 — dựng xong, trước khi báo
+
+- [ ] **Mười hai phép thử `N1`–`N12`** (`principles.md`) đã chạy chưa? Thứ không có dòng riêng trong checklist này thì bám chúng.
+
+### Phạm vi
+
+- [ ] Đối chiếu với đề bài: có section nào **mình tự thêm** không? Có thì bỏ.
+- [ ] Có con số hay chính sách nào mình tự bịa mà lẽ ra phải để `[cần điền]` không?
+- [ ] Có dòng nào để `[cần điền]` mà lẽ ra phải điền số giả không?
+- [ ] Project có sẵn component mà mình viết lại không?
+
+### Màu
+
+- [ ] Đếm màu nhấn trên màn hình. Nhiều hơn một thì cắt (tag phân loại `M8` và màu nhận diện thực thể `M34` không tính). App có dự án, board, danh mục người dùng tạo mà tên vẫn xám trơn thì thêm chấm màu theo `M34`.
+- [ ] **Cả màn có chỗ nào dùng màu nhấn không?** Không có là chưa quyết định, không phải tối giản (`D5`).
+- [ ] Có khối nào được tô nền màu chỉ để phân loại không? Phân loại bằng icon + chữ (`M5`).
+- [ ] Grep mã hex. Chỉ được có trong khối đổi thương hiệu ở đầu file.
+- [ ] Mọi mã hex có đúng 6 hoặc 8 ký tự sau `#` không? Lệch là CSS chết âm thầm.
+- [ ] Khối thương hiệu có khớp **từng ký tự** với `tokens.css` không?
+- [ ] Có chữ `text-muted` nào nằm trên nền xám đậm hơn nền trang không (`--secondary`, lớp phủ `foreground/5`–`/8`, `--background-hover`)? Có thì đổi sang `text-foreground/70` (`styles.md`).
+
+### Viền, bóng, khối
+
+- [ ] Có `shadow-*` nào trên khối **nằm trong trang** không? Bóng chỉ cho modal/dropdown (`M15`), ngoại lệ trong trang chỉ có ô chọn của tab `segmented` và núm công tắc (`shadow-sm`).
+- [ ] Có token viền nào tự đẻ ra ngoài `--border`, `--border-strong`, `--border-focus` không?
+- [ ] Có chỗ nào mỗi mục một card không? Gom thành một khung chia đường kẻ (`F3`).
+- [ ] Card chỉ có tiêu đề, không nút ở header: còn `min-h-10` không? Còn thì tiêu đề cách mép trên xa hơn nội dung cách mép dưới, card hẫng đầu (`components/card.md`).
+- [ ] Dòng tiêu đề và nút "Xem tất cả" có nằm **trong** khung không?
+- [ ] Phần tử nổi bật có mang quá một dấu hiệu không (badge + viền + to hơn)?
+- [ ] Bảng có bị bọc vào card không?
+- [ ] **Bảng**: rê chuột lên một dòng, nền hover có trùng màu nền trang không? Phải `--surface-hover` (`I10`). Cột trạng thái là badge màu (`M7`)? Từ 3 hành động hoặc có xoá thì đã gom vào nút ba chấm chưa (`I11`)? Tab trạng thái là ô nền `--surface-hover` viền mảnh, không chip đen?
+- [ ] **Bảng nhóm theo trạng thái**: liếc hàng nhóm có tách được nhóm nào với nhóm nào không, hay ba nhóm cùng pill xám? Hàng nhóm và đầu cột kanban cùng icon + tên + số (`M7`, `D2`)? Trong nhóm có xếp theo một khoá, tiêu đề cột đang sắp có mũi tên? Tên người có bị cắt mất tên gọi trong khi cột tiêu đề còn dư? Cột ngắn nào bị bóp còn một chữ (thiếu `whitespace-nowrap`)? Thu nhóm có bọc `<tr>` trong `<div>` trượt không? Rê lên ô sửa tại chỗ của dòng đang rê: ô có nổi lên không, hay nền ô trùng nền dòng? Ô trống mọi cột cùng `—`? Lịch mở từ ô hạn chót có "Xoá hạn" không, hay đặt rồi là hết đường gỡ? "Xoá hạn" là hàng rộng hết bề ngang kiểu mục menu, căn trái, không đỏ (`I4`: gỡ hạn không mất bản ghi), hay một nút nhỏ lẻ loi? Khung chờ có hàng nhóm? View kanban có bị ghi "Bảng" không? Ở 375, 768 và 1024px (sidebar mở) bảng có cuộn ngang không, nút ⋯ và cột hạn chót có nằm trong khung không? Khung hẹp thì người phụ trách chỉ còn avatar, dưới `@2xl` thành dòng với tên việc hai dòng `text-pretty` (dòng hai không trơ một chữ), mảnh trống bỏ hẳn chứ không còn "— —" (`layouts/app.md`)?
+- [ ] **Cột kanban rỗng**: là viền đứt không nền, hay một mảng xám đặc nặng hơn thẻ (`components/empty-state.md`)?
+- [ ] **Board kanban ở 1366 và 1440px, sidebar mở**: đủ bốn cột, hay cột cuối hụt vài px ở mép phải? Khung cuộn có `scrollbar-clean` không (không được)? Nút ⋯ nằm ở hàng cuối trước avatar, đo ra 32×32, chỉ hiện khi rê / Tab vào thẻ? Đếm tên việc bị cắt "…" ở cột 248px: quá một hai thẻ là có thứ đang giữ chỗ bên phải tên? Có nút "Thêm việc" trên trang và `plus` ở đầu cột? Kéo thử đủ ba đường: chuột (nhích 4px), giữ tay 250ms, bàn phím Space / ← → / Enter / Esc có đọc qua `aria-live`; kéo tới mép thì board tự cuộn; nhấc bằng phím sang cột cuối thì cột đó nằm trọn trong khung, không dưới mép mờ (`layouts/app.md`, "Kéo thả thẻ").
+- [ ] Bo góc có nằm trong bốn bậc không, và có bo nhầm link chữ không nền không?
+
+### Nút và trạng thái
+
+- [ ] Nút mặc định có phải **nút viền** không, hay đang là nền nhấn? Icon chỉ ở nút mà glyph gọi đúng hành động; nút form và nút trong modal chỉ có chữ (`I1`)
+- [ ] Trong một nhóm có đúng một nút nền nhấn không?
+- [ ] Nút phụ có trông như đã bị khoá không? Chữ và nền có đủ chênh không?
+- [ ] "Xem tất cả" / "Đọc thêm" (sang màn khác) có đang là nút có nền khi rê không? Phải là link chữ `h-8` không padding ngang, rê vào gạch chân, chữ thẳng mép phải nội dung, không icon mũi tên (`I7`). Nạp thêm tại chỗ ("Xem hoạt động cũ hơn") mới là nút `ghost`.
+- [ ] **Rê chuột lên một hàng: có phần tử con nào biến mất không?** (`M18`)
+- [ ] Rê chuột lên hàng: nền hover có ôm sát chữ không? Phải có padding đủ bốn phía.
+- [ ] Màn chỉ có MỘT card giữa trang trống? Vậy card phải **không viền** (`M29`), và không bao giờ có cả viền lẫn bóng.
+- [ ] **Đăng xuất** ở cuối menu sau đường chia, lúc thường trung tính, **rê vào thì đỏ** như mục xoá (`I4`)?
+- [ ] **Nút xoá** đứng riêng: nền `rose-500/10` + chữ `rose-700` ngay lúc thường, không viền, không đỏ đặc (`I4`)? **Mục** xoá trong menu: rê vào thì chữ, icon VÀ nền cùng đỏ lên chưa? Icon còn xám là thiếu `group`. Chữ đỏ là `rose-700` chưa, hay đang `rose-500` hồng tươi (3.2:1, trượt tương phản)? Radix thì đi bằng phím mũi tên cũng đỏ (`data-[highlighted]`)?
+- [ ] **Công tắc chỉ cho việc gạt là xong.** Bật mà phải quét mã, nhập mật khẩu, xác nhận (xác thực hai lớp, tên miền riêng, gói trả phí) thì là dòng trạng thái + nút mở luồng (`components/choice-controls.md`, "Hàng cài đặt")?
+- [ ] Hộp xác nhận chỉ trung tính (icon xám, nút `primary`, ngoại lệ có tên của `I2`) khi **ba câu của `I4` đều "không"** (không mất dữ liệu, không kết thúc thứ đang chạy, không cắt quyền), như gửi lại lời mời hàng loạt, gửi email hàng loạt (`layouts/overlay.md`)? "Không mất dữ liệu" thôi thì chưa đủ: đăng xuất, huỷ gói vẫn đỏ.
+- [ ] **Trang bảo mật**: "Bật xác thực hai lớp" là nút `primary` (`I2`: việc nên làm nhất của trang)? Nút đăng xuất hàng loạt đỏ sẵn nhưng cùng cỡ `h-11 md:h-10` với nút "Đăng xuất" trong dòng (cả trang một cỡ nút), còn nút trong dòng chỉ đỏ lúc rê (`I4`, `layouts/app.md`)?
+- [ ] **Trang khoá API** (`layouts/app.md`): thao tác của dòng là nút `⋯` (Đổi tên, Thu hồi khoá / Xoá), không nút viền lặp trên từng dòng? Ở 375px dòng phụ có dấu `·` nào rớt lên đầu dòng không (phải chia hai nhóm theo nghĩa)? Ngày năm nay có bỏ năm không ("Dùng 07/09", không "07/09/2026")? Khoá hết hạn có badge và không lặp mảnh hạn dùng? Hộp tạo sẵn "Chỉ đọc" và một hạn cụ thể, không sẵn "Không hết hạn"? Bước hiện khoá nằm trong cùng hộp, bấm ra ngoài không đóng?
+- [ ] **Trang thanh toán** (`layouts/app.md`): gói là một hàng (tên gói `text-base font-semibold`, giá và "Gia hạn ngày …" là hai dòng phụ riêng), không tách thành các hàng nhãn–ngày cao như hàng có ô? Có mục phương thức thanh toán (thẻ che số, hạn thẻ, "Đổi thẻ")? "Huỷ gói" nằm ở Vùng nguy hiểm cuối trang, nền đỏ mờ (`I4`, nút đứng riêng), không đứng cạnh "Đổi gói"? Hộp xác nhận huỷ đỏ như hộp xoá (không icon xám, nút đen)? Đang trừ lỗi thì khối gói đã bỏ dòng "Gia hạn ngày …" chưa, và câu ở Vùng nguy hiểm, hộp huỷ có còn hứa "dùng tới hết <ngày gia hạn>" không? Nút "Cập nhật thẻ" trong banner là nút viền trắng, không `primary`? Ca trừ tiền thất bại có banner lỗi đầu trang với nút "Cập nhật thẻ", không chỉ badge đỏ ở dòng hoá đơn?
+- [ ] **Bấm nút làm dòng của nó biến mất** (đăng xuất thiết bị, xoá dòng, gỡ hàng loạt qua hộp xác nhận): `document.activeElement` sau đó là gì? `<body>` là lỗi (`I31`).
+- [ ] Đỏ đang dùng đúng sắc chưa (`M30`)? Lỗi là `red`, hành động nguy hiểm lúc rê vào là `rose`. Không có viền hay banner `rose`.
+- [ ] Đường chia trong dropdown, card: có chạm hai mép khối không, hay thụt theo padding (`F25`)?
+- [ ] **Bo lồng nhau (`M19`)**: bo khung ngoài = bo phần tử trong + padding khung? Dropdown mặc định `rounded-2xl` + `p-1` + mục `rounded-xl` (`layouts/overlay.md`). Command palette rộng thì `p-2` + mục `rounded-lg`. Trong bằng ngoài là góc phình.
+- [ ] **Panel thông báo**: có nút "Đánh dấu đã đọc" ở header không? Mục đã đọc có nhạt hơn mục chưa đọc (không chỉ thiếu chấm) không? Bấm sang tab rỗng thì panel có sụp chiều cao không? Tiêu đề dài có bị cắt ở 2 dòng không? Mép trên panel có cách đường kẻ header 8px, hay đường kẻ chọc vào góc bo (`layouts/overlay.md`)?
+- [ ] **Panel xem bản ghi có tab** (khách hàng, dự án): cuộn thân thì chỉ hàng tên + ✕ đứng yên, tab dính đỉnh, còn trạng thái và hàng nút cuộn đi chưa? Tên có phải chữ nặng nhất panel, hay số liệu to hơn tên? Ô số liệu là **một khung 2×2** số `text-lg`, hay bốn card rời số `text-3xl`? Kỳ so sánh ghi một lần hay lặp ở từng ô? Khách chưa có đơn nào thì còn lưới số 0 không? Tab tới hàng tab: không nền xám, không vòng (`components/small-controls.md`)?
+- [ ] **Trang chi tiết bản ghi**: tab đầu có phải bản ghi con chính (Đơn hàng của khách, Công việc của dự án), là bảng gọn có link sang từng bản ghi, hay phải lội tab Hoạt động mới thấy? Tab bản ghi con có số đếm, tab Tin nhắn / Hoạt động chữ trơn? Email, số điện thoại bấm được và có nút sao chép cạnh giá trị, hay "Gọi điện", "Sao chép email" nằm trong menu ⋯? Mã đơn nhắc tới ở đâu cũng là link? Ô "Đơn đã giao" (12 tháng) và tab "Đơn hàng" (trọn đời) khác số thì nhãn ô đã ghi "· 12 tháng" chưa? Email dài xuống dòng ở sau `@` hay vỡ giữa chữ? "Xem tất cả" cuối bảng căn trái cùng phía "Xem hoạt động cũ hơn"? Khách chưa có đơn thì hàng số liệu đã bỏ chưa, hay còn khung "Chưa có đơn nào" nói trùng tab rỗng? Dòng hoạt động "Đơn đã giao" vòng xám, không phải một cột vòng xanh (`timeline.md`)? Id sai thì có trang "Không tìm thấy" với `<h1>` và lối về danh sách (`layouts/app.md`)?
+- [ ] **Trang cài đặt / hồ sơ cá nhân**: hàng có chữ gợi ý hoặc lỗi dưới ô thì nhãn còn thẳng tâm ô, hay tụt xuống giữa ô và dòng chữ (thiếu `sm:items-start` trên hàng)? Avatar lớn trên trang cùng màu với avatar của chính người đó trên header chưa? Xoá trống ô họ tên thì avatar có thành "?" không (phải giữ chữ của tên đã lưu)? Dấu `*` ở nhãn và ở dòng chú thích cùng đỏ chưa? Hàng Email nhiều dòng: nhãn thẳng dòng đầu hay trôi xuống giữa? Có đủ trạng thái có ảnh (Đổi ảnh + Xoá ảnh, cả hai `outline`, Xoá ảnh không đỏ vì có Hoàn tác (`I4`), không ghost xám trông như khoá), đang tải ảnh, email chờ xác nhận? Email trong hộp xoá tài khoản ở 375px xuống dòng sau `@`, hay vỡ giữa tên miền (`layouts/app.md`, "Trang hồ sơ cá nhân")?
+- [ ] **Đường dẫn** (`components/breadcrumb.md`): chỉ cấp cha, không trùng chữ `<h1>` ngay dưới? Chữ mỗi mục đúng tên trang đích? Một hàng, không xuống dòng; từ 4 cấp cha có nút "…" mở menu, và nút đó trông như một mục chữ (không ô nền, nét cách dấu › bằng chữ cách dấu)? Tab tới một mục: chữ gạch chân, không vòng (`I13`)? Ở 375px chỉ còn "‹ Cấp cha" cao 40px? Đặt đúng một chỗ, header hoặc đầu trang?
+- [ ] **Khu cài đặt và trang thông báo**: bấm "Cài đặt" ở sidebar và ở đường dẫn trên header có ra trang con đầu, hay trang trắng? Có hàng tab `underline` nối các trang cài đặt (Hồ sơ, Thông báo, Bảo mật), tab là link có `aria-current`? Trang con còn đầu trang riêng lặp tên tab không? Câu lỗi, câu lý do khoá trong hàng cài đặt cùng cỡ `text-sm` với mô tả các hàng khác chưa? Mục "Báo cho bạn khi" nói rõ có áp cho chuông không, hay mâu thuẫn với câu "Chuông luôn nhận đủ"? Mô tả công tắc mở khu có trỏ vào thứ đang giấu ("khung giờ này") không (`layouts/app.md`, "Khu cài đặt có nhiều trang", "Trang tuỳ chọn thông báo")?
+- [ ] **Trang thành viên**: ô vai trò đổi được có `ChevronDown` luôn hiện, dòng khoá (chủ sở hữu, chính mình) là chữ trơn không mũi tên, hay phải rê chuột mới biết đổi được? Có cột Trạng thái lặp "Đang hoạt động" trên gần hết các dòng không (chỉ lời mời mới có badge "Chờ chấp nhận" cạnh email)? Lọc vai trò là một dropdown cạnh ô tìm, hay thêm một hàng chip dưới hàng tab? Email của lời mời bị cắt mất tên miền không? Modal mời nhận nhiều email (tag input), email trùng phân biệt "Đã là thành viên" với "Đã mời …, chưa chấp nhận"? Thanh hàng loạt có "Đổi vai trò" (`layouts/app.md`, "Trang thành viên và phân quyền")?
+- [ ] **Modal xem bản ghi có nút trước / sau** (chi tiết đơn): modal neo đỉnh hay căn giữa dọc? Bấm Đơn sau sang đơn cao thấp khác thì nút ‹ › có đứng yên dưới con trỏ không? Tới đầu, cuối thì nút mờ nhưng vẫn giữ chỗ, tiêu điểm chuyển sang nút còn lại chưa? Chỉ phần mã `font-mono`? Tiền bám một mép phải, tạm tính đếm theo số lượng, các số cộng trừ có khớp không (`layouts/overlay.md`)?
+- [ ] **Vùng cuộn trong lớp nổi** (select, dropdown dài, command palette): chưa rê chuột, mép dưới có cắt ngang một mục (lộ khoảng nửa) không? Cắt sát ranh giới hai mục là trông như đã hết. Rê chuột vào (không cuộn) thì thanh cuộn có hiện không? Chỉ hiện khi cuộn là đang dùng CSS thanh cuộn cũ (`I18`).
+- [ ] **Sidebar**: nền trắng chứ không trùng nền trang; vùng nội dung nền xám thì **không `border-r`** giữa sidebar và nội dung; rê `hover:bg-item-hover`, mục đang chọn đậm hơn một bậc `bg-secondary` + `font-medium`, không màu nhấn, không viền (chủ dự án chốt; "rê và đã chọn cùng một nền" chỉ còn cho dòng bảng tick checkbox); hover vào thì icon và chữ cùng đậm lên; số đếm là số trơn `text-muted`, không pill, không badge màu brand (`I15`); nhãn nhóm IN HOA, giữa các nhóm không kẻ đường chia (chỉ khoảng trắng + nhãn), profile là hàng không viền có icon `ChevronsUpDown`, nhiều nhóm thì thu gọn được; thanh cuộn tự ẩn (`I18`); tên dài bị cắt thì rê vào có tooltip đủ tên, cả lúc sidebar mở; dưới `lg` sidebar là panel trượt trái, lớp phủ `bg-black/15`, 500/350ms đường cong sheet.
+- [ ] **Thu gọn sidebar**: thu về dải icon `w-16`; **mục nào đang hiện lúc mở thì lúc thu vẫn hiện**, nhóm đang đóng vẫn đóng; nhãn nhóm chỉ `opacity-0` + `inert`, giữ chiều cao hàng, **thay bằng gạch ngắn `w-4` thẳng tâm icon**; màn thấp thì mép vùng nav mờ dần ở phía còn mục bị khuất; chấm góc icon chỉ cho số cần xử lý, cùng độ đậm với số lúc mở; mục đang chọn vẫn sáng và được cuộn vào tầm nhìn; lúc thu ẩn thanh cuộn (vẫn cuộn được); bấm mở/thu thì icon, logo, avatar ĐỨNG YÊN (không `justify-center`, không đổi padding), chữ không gỡ khỏi DOM mà bị cắt dần và mờ đi; mỗi icon có tooltip kèm số đếm; focus theo `I13` (`layouts/app.md`).
+- [ ] **Chân sidebar**: profile là một hàng `h-10` **không viền**, avatar không viền, icon `ChevronsUpDown` ở mép phải, cả hàng là nút mở menu; lúc thu rê vào thì vòng quanh avatar, không tô ô vuông; email ở đầu menu một dòng, chỉ cắt phần trước `@`, tên miền còn nguyên; menu rộng bằng hàng; Đăng xuất cuối menu, đỏ khi rê (`layouts/app.md`). **Tải lại trang rồi bấm mở ngay lần đầu**, và thu/mở sidebar rồi bấm lại: menu có nằm sát nút không, hay trôi lên đầu sidebar? Menu tự dựng đo chiều cao trước khi có bề rộng là dính lỗi này (`layouts/overlay.md`).
+- [ ] **Menu con / menu tài khoản** (`layouts/overlay.md`): bay ra thì hàng đầu thẳng mục cha, mục cha giữ nền sáng, đi chéo chuột sang không tắt? Ở 375px menu con **thay chỗ** menu cha có nút `‹` lùi, hay đang xổ ra bên dưới mục cha? Hàng tài khoản có hàng nào quá hai dòng không (email phải một dòng, cắt phần trước `@`)? Đầu menu mở từ avatar có lặp lại avatar không? Header có avatar mà chân sidebar vẫn còn hàng profile là hai lối vào một menu.
+- [ ] **Khung chat** (`components/chat.md`): câu trả lời có vòng avatar robot không (bỏ)? Tên bước công cụ có nhỏ hơn và nhạt hơn câu trả lời không? Mở danh sách công cụ đang chạy: còn hai spinner không? Công cụ lỗi mà vẫn trả lời: có tự mở, có "1 lỗi" đỏ ở hàng đầu không? Mô tả bước có lặp con số câu trả lời sắp nói không? Câu bị dừng có hàng Sao chép / Tạo lại chưa? Gợi ý là nút viền chữ đậm, hay nền xám chữ xám trông như bị khoá? Gợi ý có dài quá một dòng, rộng quá cột câu trả lời không? Chat mới là gợi ý mở đầu, hay "Chưa có tin nhắn nào"? Ô soạn trống: nút gửi mờ `opacity-30`, góc nút song song góc ô (`M19`)?
+- [ ] **Rê chuột chậm từ mép trái sang mép phải** của từng mục menu, link sidebar, dòng bấm được: con trỏ có giữ bàn tay suốt không? Đổi một lần là vùng bấm hụt (`I29`).
+- [ ] Tailwind v4: `<button>` có `cursor-pointer` chưa, hoặc base CSS đã trả lại chưa (`W7`)?
+- [ ] **Bấm Tab qua các nút, tab, checkbox**: không có vòng bao ngoài nào (`I13`)? **Trong menu** thì mục đang focus đổi nền như hover.
+- [ ] **Bấm Tab qua ô nhập, select**: có viền `--border-focus` **và** ring mờ `--ring-focus` `ring-2` chưa? `ring-4` là quá dày (`F20`). Select đang mở cũng giữ viền + ring.
+- [ ] **Không còn control gốc của trình duyệt** (select, ô ngày / giờ, checkbox, radio, thanh trượt, ô chọn tệp), kể cả trong dialog, sheet, popover đang đóng, kể cả khi app cũ đang dùng bản gốc đã tô? Chỉ select, ô ngày chỉ hiện trên mobile mới được để gốc.
+- [ ] **Checkbox / radio / công tắc** (`components/choice-controls.md`): cỡ mặc định 20px (công tắc 24×44), không phải 16px? Card chọn: đang chọn có viền + ring, Tab tới không thêm vòng? Khoá thì nhãn mờ theo? Nhóm radio có sẵn một lựa chọn và có `<legend>`? Nhóm xếp một hàng hoặc một cột, không lưới 2×2 (thang Thấp → Khẩn cấp đọc chữ Z)? Ở 375px mỗi lựa chọn là dòng cao 44px bấm được cả dòng?
+- [ ] Vừa Tab vừa rê chuột trong menu: có **hai mục sáng cùng lúc** không? Chỉ được một (`data-[highlighted]`).
+- [ ] Rê chuột lên **nút chính**: có đổi màu không? Nút `primary` là chỗ hay quên hover nhất (`I9`).
+- [ ] **Bấm vào chữ nhãn**: ô có focus không (`for`/`htmlFor`)? Con trỏ có thành bàn tay không?
+- [ ] **Bấm vào khoảng trắng bên phải chữ nhãn**: ô KHÔNG được focus. Focus là thiếu `w-fit` (`I26`).
+- [ ] Form có ô mật khẩu: có nút hiện/ẩn chưa, và nó có `type="button"` không (`I27`)?
+- [ ] Có placeholder nào chỉ chép lại nhãn ("Nhập email của bạn") không? Có thì bỏ (`T25`), trừ màn đăng nhập, đăng ký đứng một mình.
+- [ ] Đọc từng câu lỗi: có câu nào **trùng chữ** với placeholder hay nhãn của chính ô đó không? Trùng là bỏ.
+- [ ] Chữ đỏ dưới ô có thật sự là lỗi không, hay là **gợi ý bị tô đỏ**? Gợi ý thì xám và hiện sẵn.
+- [ ] **Màn xác thực: đã báo một dòng** về "quên mật khẩu" / ghi nhớ đăng nhập / mạng xã hội chưa? Dựng theo mặc định thì được, dựng xong im lặng thì không.
+- [ ] **Dự án mới chưa có logo**: đầu sidebar là dấu SVG trong ô màu nhấn, hay vẫn là ô chữ cái? Dấu còn nhận ra ở 16px không, favicon đã thay favicon mặc định của framework chưa? (`components/logo.md`)
+- [ ] Màn đăng nhập, đăng ký có đủ logo sản phẩm, nút Google, placeholder chưa? Đăng ký có đang thừa ô "Nhập lại mật khẩu" không? (`layouts/form.md`)
+- [ ] Luồng quên mật khẩu: bước nhập mã có đang xác nhận email có tài khoản không? Phiên hết hạn có còn để ô mật khẩu và nút Lưu dưới khối lỗi không? (`layouts/form.md`)
+- [ ] Màn OTP: bấm Xác nhận khi chưa đủ sáu số có ra câu lỗi không, hay im lặng?
+- [ ] Màn OTP: "Đổi email" có về form với dữ liệu điền sẵn không? Bấm "Gửi lại mã" có câu "Đã gửi mã mới" (`role="status"`) không? Sai mã, hết hạn có xoá sáu ô và đưa con trỏ về ô đầu không?
+- [ ] Trang bảng giá đứng riêng: đầu trang căn giữa, tên trang `sm:text-3xl` (không nhỏ hơn giá)? Dãy gói xếp chồng có `max-w-lg` không (mở ở 768px xem card có kéo dài 650px không)? FAQ là accordion (`components/accordion.md`) trong khung `max-w-3xl`, câu hỏi dài nhất một dòng ở desktop? `h2` cùng font với `h1`? Vạch dưới giá kẻ `--border-strong`? Gói nổi bật là card nền `--primary` với nút trắng? Nút gói `h-12`?
+- [ ] Có accordion: trượt bằng `grid-rows` (không `<details>`), mục đóng có `inert`? Rê vào tiêu đề: không nền xám, chỉ chevron đậm lên? Tô màu nút, khối bọc, nội dung: nút đều hai mép cả lúc mở, nội dung cùng `px` với nút và lấp kín khối bọc (không `max-w`, không `pr` riêng)? Mục đóng không lòi chữ lúc đang trượt? Tiêu đề `text-pretty`? (`components/accordion.md`)
+- [ ] Form có khu "Cài đặt nâng cao" thu gọn: là dòng chữ có chevron liền sau, không khung (khung lồng trong card lúc đóng trông như ô select)? Ô bên trong cùng mép trái, cùng bề rộng với ô ngoài? Khối cắt `overflow-y-clip` (không `overflow-hidden` cắt quầng focus hai bên)? Bấm gửi khi ô trong khu sai thì khu tự mở và con trỏ vào ô đó? Lựa chọn riêng tư / công khai nằm ngoài khu? (`components/accordion.md`)
+- [ ] Form nhiều bước (`layouts/form.md`, kiểu C): thanh ngang chỉ có nhãn, không mô tả lặp câu dẫn trong card? Màn hẹp dòng trên thanh chỉ "Bước 2 / 3" khi card đã có tiêu đề bước? Vòng, đường nối, đoạn chưa tới là `bg-secondary` (mở trên nền trang xem vòng "3" còn thấy không)? Bước cuối `flex-none`, thanh trải hết bề ngang card? "Không bắt buộc" nói đúng một lần? Bước xác nhận có link "Sửa" từng nhóm, tiêu đề nhóm `font-semibold` khác hẳn kiểu chữ giá trị (xem ở 375px)? Bấm Tiếp khi trống, ô tự điền theo ô khác (đường dẫn) có đỏ theo không?
+- [ ] Đường chia "hoặc" kẻ bằng `--border-strong` chưa (`--border` tan trên card trắng)? Nút mắt `size-10` chưa? Form đúng mà bấm gửi có đi tiếp không, hay im lặng? Bước sau có hiện đúng email vừa gõ không?
+- [ ] Mọi màn trong luồng xác thực mở ra con trỏ đã nằm ở ô đầu chưa? Form đặt mật khẩu mới có ô `username` ẩn chưa (`I28`)?
+- [ ] "Quên mật khẩu?" có nằm cùng hàng với nhãn không? Dưới ô nhập là **tranh chỗ với câu lỗi**.
+- [ ] "Quên mật khẩu?" có bị làm mờ không? Mờ là đọc ra disabled (`I8`).
+- [ ] Từ ô email bấm Tab có vào thẳng ô mật khẩu không, hay rơi vào "Quên mật khẩu?" trước? Link phải đứng sau ô trong DOM.
+- [ ] Sai email hoặc mật khẩu: ô mật khẩu đã xoá và con trỏ nằm trong đó chưa? Khối lỗi có `role="alert"` không?
+- [ ] Nút, ô sửa tại chỗ trong dòng bảng: rê vào có tách khỏi nền dòng đang rê không (`bg-foreground/8`, không `/5`, `I10`)? Cột có nút mũi tên (vai trò, trạng thái) thì các mũi tên có thẳng một cột không (nút rộng bằng nhãn dài nhất)?
+- [ ] Nút viền đứng thẳng trên nền trang: rê vào có tan vào nền không? Rê chỉ đổi nền sang màu đặc `--button-hover` (`#f1f1f3`), viền giữ nguyên; `bg-background`, lớp phủ `foreground/5` là tan, viền đậm lên là nặng. Đo pixel nền nút so với nền trang, đừng nhìn class. Nút có mũi tên mở danh sách lựa chọn ("Vai trò ▾", "Mỗi trang 10 ▾") thì **không hover**, cùng class ô Select. Nút lọc dạng dropdown lúc mở có viền + ring như ô Select không (`components/button.md`)?
+- [ ] Dự án có ngôn ngữ màu riêng (dòng "màu" ở tầng 3 từ 3 file, hoặc có `--chart-*`) thì màn mới có tô cùng cách không, hay rút về xám lạc giữa các màn cũ? Refactor có lỡ trung tính hoá màu của họ không? Biểu đồ phân loại từ 5 nhóm có mỗi nhóm một sắc, chấm trong bảng khớp màu thanh, tối đa 6 sắc + "Khác" (`principles.md` đầu file, `components/charts.md`)?
+- [ ] Hộp xác nhận ở 375px: câu hậu quả, ô gõ lại tên và hai nút có cùng mép trái không, hay thân hộp còn thụt 56px sau icon, ô hẹp hơn nút (`layouts/overlay.md`, Hộp xác nhận)? Probe báo "Ô nhập lệch mép với nút rộng hết khung".
+- [ ] Mô tả dưới tiêu đề modal / hộp xác nhận: cách tiêu đề `mt-2` và dòng `text-sm/6`, hay `mt-1` + dòng 20px làm dấu tiếng Việt chạm dòng trên (`T30`)?
+- [ ] Toast có trượt vào từ mép màn và trượt ra khi hết giờ không, hay bật "phựt"? Render bằng `{toast && …}` là mất chuyển động ra. Email trong toast nằm tầng dưới, xuống dòng sau `@` (`layouts/overlay.md`, Toast)?
+- [ ] Ô mật khẩu có đang lấy `••••••` làm placeholder không? Nhìn y hệt mật khẩu đã gõ (`T26`).
+- [ ] Form có yêu cầu độ dài tối thiểu: đã ghi bằng chữ ở dòng gợi ý chưa, hay đợi gõ sai mới báo?
+- [ ] Ô có giới hạn tối đa ("Tối đa 120 ký tự"): gõ tới ~80% có bộ đếm cùng dòng gợi ý, căn phải không? Gõ quá có đỏ lên không, hay im lặng? Có `maxlength` cắt mất đuôi câu dán vào không (`layouts/form.md`, "Ô có giới hạn ký tự")?
+- [ ] Modal có ô nhập mà bấm ra ngoài vẫn đóng không? (`I20`)
+- [ ] Modal đã gỡ dismiss thì **còn đường đóng khác** chưa?
+- [ ] Có đủ ba trạng thái chưa: đang tải, rỗng, lỗi? Khung chờ có **đúng hình** nội dung không? Đổi lọc, đổi trang: dữ liệu cũ còn đó với thanh mảnh trên đầu, hay cả bảng thành khung chờ lần nữa? Dữ liệu về nhanh có làm khung chớp không (chờ 300ms, giữ 500ms)? Toggle, kéo thẻ có spinner không (phải đổi ngay)? Lúc chờ có chớp câu rỗng "Chưa có…" không? Tải lần hai hỏng: tab, chip có trả về khớp dữ liệu đang hiện không, hay tab mới sáng trên bảng cũ? Việc chạy nền: còn spinner trong nút song song toast tiến độ không (`components/loading.md`)?
+- [ ] Danh sách quá 25 dòng đã có phân trang chưa, và có hiện tổng số không? Ở 375px số đếm có rớt chữ xuống dòng hai cạnh nav không (dưới `sm` chỉ còn tổng, `components/small-controls.md`)?
+- [ ] Phân trang: nav có nằm phải cùng hàng ở mọi số trang không? Trang đang chọn có trông như ô input không? Một trang thì đã ẩn nav, 0 dòng thì đã ẩn footer chưa?
+- [ ] **Tải tệp lên** (`components/file-upload.md`): chỉ tệp đang tải có thanh (`h-1`), tệp xong và tệp hỏng không còn thanh, không còn số %? Tệp hỏng có cả Thử lại lẫn ✕? Đang kéo tệp vào thì viền đậm lên vừa phải, không nét đứt đen? Dòng đổi trạng thái thì các dòng dưới có nhảy không? Tên dài cắt giữa còn đuôi `.pdf` không? Tên cắt giữa có giữ vài ký tự cuối, không thành bốn chấm "….docx"? Icon tệp cùng dáng tờ giấy, viền không bị hình tròn cắt góc? Không có quyền thì ẩn cả khu tải, không dựng khung khoá? Khung bị khoá: tiêu đề là lý do, nền khác lúc kéo vào, có nút lối ra thay cho nút mờ chưa?
+- [ ] Toast: rộng theo chữ chưa? Hành động là nút có hover, dồn phải cùng ✕ chưa? Câu dài đã tách hai tầng thay vì vỡ ba dòng chưa? (`layouts/overlay.md`)
+
+### Chữ
+
+- [ ] Tiêu đề khối có lớn hơn chữ bên trong **ít nhất một bậc** không?
+- [ ] `body` đã có `antialiased` chưa?
+- [ ] Có dòng chữ nào dài quá 75 ký tự không?
+- [ ] Có tiêu đề nào rớt lại một chữ ở dòng cuối, hay bị chẻ sai nghĩa không?
+- [ ] Có dòng mô tả nào đang bị `truncate` không? Mô tả thì cho xuống dòng.
+- [ ] Số xếp cột đã có `tabular-nums` chưa?
+- [ ] Font đã nạp chưa, hay đang rơi về `system-ui`?
+
+### Nội dung
+
+- [ ] Có emoji nào trong tiêu đề, câu chào, hay đang đóng vai icon không?
+- [ ] Có chữ hướng dẫn thừa không ("Bấm để lưu", chữ "Có" cạnh dấu tick)?
+- [ ] Có dấu gạch dài trong câu văn không, ở bất kỳ thứ tiếng nào (`T18`)?
+- [ ] Copy tiếng Anh: đã sentence case chưa, số nhiều chia đúng chưa, tiền, số, ngày đã theo locale chưa, có nhãn nào dịch từng chữ từ tiếng Việt không (`T27`, `T28`, `T29`)?
+- [ ] Câu giao có cùng tiếng với người dùng không, có câu mẫu tiếng Việt nào lọt vào câu trả lời tiếng Anh không (`T27`)?
+- [ ] Nút đăng nhập bằng Google hay Apple đã có logo gốc chưa?
+- [ ] Có tự gán mỗi mục một icon khác nhau, hay ba mục ba icon giống hệt nhau?
+- [ ] Màn tổng quan: số đếm theo kỳ đã là cột chưa (`charts.md`, "Cột hay đường")? Thanh tiến độ trong danh sách có thanh nào tô hổ phách không (phải `bg-primary`, chỉ cụm "quá hạn" có màu)? "Hoạt động gần đây" có đang bê khuôn timeline không (phải avatar + một câu, 5 mục)? Hai cột lưới có kết thúc gần ngang nhau không? Workspace mới có khung "Các bước bắt đầu" (hoặc khối chào có nút "Tạo dự án"), không phải năm khung "Chưa có…"?
+- [ ] **Các bước bắt đầu** (`layouts/app.md`): chỉ ở một chỗ, không có thêm trang "Chào mừng" lặp khối chào của tổng quan? Vòng bên trái là ô tick viền đứt, không số? Chỉ bước tiếp theo mở sẵn, nút nằm dưới câu vì sao, là nút đặc duy nhất? Bước khoá có nút mờ không (không được)? Tên bước xong có gạch ngang không (không được)? Có nút `X` ẩn, thẳng cột chevron? Xong hết thì khung thu lại, không in năm dòng đã xong? Mở một bước ra đo: tên → câu vì sao có nhỏ hơn câu → nút không (câu phải bám tên)? Khung cách lưới bên dưới 24px, dòng chú thích hàng số không lơ lửng giữa hai khối?
+- [ ] **Có câu nào giống hệt nhau ở mọi ô, mọi hàng không** ("so với 2025" bốn ô, "Chưa có kỳ trước" bốn ô, `/2026` ở mọi mốc giờ)? Kéo ra ghi một lần, hoặc bỏ (`N3`, `T16b`).
+
+### Grep một lượt
+
+```bash
+grep -nE "gradient|backdrop-blur|shadow-(xl|2xl)|scale-1|text-transparent|border-dashed|<details|<summary" <file>
+grep -nE "(^|[\" '`:])-(m[trblxy]?|space-[xy]|translate-[xy]|inset|top|left|right|bottom)-" <file>
+# Dự án viết CSS thuần / CSS Modules / styled: số âm nằm trong giá trị, dòng trên không bắt được
+grep -nE "(margin[a-z-]*|inset[a-z-]*|top|left|right|bottom|translate|transform)\s*:[^;]*(\s|\(|:)-[0-9.]" <file.css>
+```
+
+Phải sạch, trừ ngoại lệ đã ghi trong luật. `<details>` / `<summary>` không có ngoại lệ: mở/đóng tức thì, không animate được (`I30`).
+Dòng grep thứ hai và thứ ba (số âm, `N11`): mỗi kết quả phải có comment lý do ngay trên, không có thì làm lại bằng padding, `gap`, căn hàng. Chỉ grep file mình vừa viết hay sửa; số âm có sẵn của dự án không phải việc của lượt dựng.
+
+---
+
+## Cổng 3 — vòng tra tấn, BẮT BUỘC sau mỗi lần dựng
+
+**Mở trang thật, không trả lời cổng này bằng cách đọc lại code.** Đọc code thì chỉ thấy
+thứ mình định viết, không thấy thứ trình duyệt vẽ ra.
+
+0. [ ] **Chạy `scripts/probe.mjs`** (nằm cạnh `SKILL.md`) trên đúng route vừa dựng:
+   `node <thư mục skill>/scripts/probe.mjs http://localhost:<cổng>/<route> --sweep`.
+   Script mở trang ở 375, 768, 1024, 1280, 1440, 1920px, chụp ảnh từng khổ, rồi kéo bề rộng từ
+   1440 xuống 375 mỗi bước 20px để bắt lỗi nằm giữa hai khổ. Nó đo: cuộn ngang, lỗi
+   console, tương phản chữ, khung giấu mất chữ, chữ trong nút xuống dòng, chữ bị cắt còn
+   dưới 10 ký tự, phần tử cùng loại cao lệch nhau 1–4px, chữ cùng cột lệch mép, chỗ bấm
+   dưới 32px ở màn cảm ứng, rê chuột làm nhảy bố cục, trang
+   tự cuộn khi tải, dấu câu rơi xuống đầu dòng, dấu ngăn (›, /) cách hai bên không đều. Ở 375px nó tự bấm mở menu,
+   hộp chọn, sheet rồi chụp và đo tràn mép, cao quá màn.
+   - Dev server chưa chạy thì bật ở nền bằng lệnh dev của dự án. Chưa có playwright thì
+     cài vào thư mục tạm theo lệnh script in ra, **không cài vào dự án**.
+   - **Dựng theo wireframe đã chọn** (nhánh `U`) thì thêm `--wireframe "<link phương án>&mau=mau"`:
+     probe so khoảng cách, cỡ và độ đậm chữ, cỡ icon, màu, chữ với wireframe ở 1440 và 375, lệch
+     thì vào danh sách `P` (`design-process.md`, `U4`).
+   - Trạng thái nằm ở route khác (`/states`, trang rỗng) thì chạy thêm trên route đó. Dự án
+     có dark mode thì chạy thêm `--dark`.
+   - **Sửa rồi chạy lại cho tới khi mục "Việc phải đối chiếu" ở cuối báo cáo trống**
+     (danh sách mã `P1`, `P2`… là lỗi hạng Hỏng máy đo ra, `V1` trong `review.md`), tối đa
+     **ba vòng**. Các mục khác probe in ra (theo gu của skill) cũng sửa, vì đây là bản mình
+     dựng. Mã `P` nào còn lại sau ba vòng, hay để lại có chủ ý (vd chỗ bấm nhỏ trong bảng
+     dày), thì lúc giao ghi từng mã và lý do. Không mã nào được biến mất im lặng.
+   - **Mở từng ảnh chụp ra xem**, soi theo mười hai phép thử (`principles.md`). Script chỉ đo
+     được thứ đo được: "hôm nay đậm hơn ngày đang chọn", "nút Hôm nay tách khỏi ‹ ›" chỉ
+     mắt mới thấy.
+   - Không mở được trang (không có dev server, không chạy được trình duyệt) thì lúc giao
+     nói một dòng: *"Mình chưa mở được trang thật vì …, chưa rà ở màn hẹp."* Không im lặng
+     coi như đã rà.
+
+Rồi làm sáu việc trên trang thật (sửa tạm dữ liệu giả để thử, thử xong trả lại):
+
+1. [ ] Thu cửa sổ xuống **375px**. **Trang cuộn ngang là hỏng.**
+2. [ ] Vùng nào cuộn ngang thì **cuộn hết sang phải** — phần tử cuối có dính mép không?
+   Bảng quản lý ở 768px và 1024px (sidebar mở): còn cuộn ngang không, nút ⋯ của dòng có nằm trong khung không? Khung dưới `@4xl` thì ẩn cột phụ (công ty, ngày tạo) trước khi cho cuộn (`layouts/app.md`, Bảng dữ liệu).
+3. [ ] Đổi một tiêu đề thành câu dài **200 ký tự**.
+4. [ ] Đổi một con số thành `0`, một con số thành `1.284.500`.
+5. [ ] Xoá hết dữ liệu của một danh sách, xem trạng thái rỗng.
+6. [ ] Có dark mode thì xem lại toàn bộ ở dark mode.
+
+Kiểm thêm ở 375px:
+
+- [ ] Flex và grid item chứa nội dung động đã có `min-w-0` chưa? (`T13` — nguyên nhân số một của cuộn ngang)
+- [ ] Lưới nào còn giữ 2 cột ở mobile không? Phải xuống 1 cột, **trừ hàng ô số liệu**: 2×2 ở mobile, số nào dài quá 138px (tiền đầy đủ hàng tỷ) thì rút gọn hoặc hàng đó về 1 cột; số ô lẻ thì 1 cột (`charts.md`).
+- [ ] Hàng chip có rớt xuống hàng dưới một cái lẻ không? Phải cho cuộn ngang. Trừ chip đang lọc (bấm để gỡ): từ `sm` xuống dòng, "Xoá lọc" luôn thấy.
+- [ ] Ở desktop, hàng cuộn ngang ẩn thanh cuộn có nút mũi tên ở phía còn mục khuất không? Chuột thường không cuộn ngang được.
+- [ ] Board hay dòng thời gian có bị wrap thành 2 hàng không? Phải cuộn ngang trong khung.
+- [ ] Ở 375px, mọi hành động chính của dòng (nút trên dòng, panel chi tiết) còn lối vào không, hay bị ẩn cùng lúc (`R11`)?
+- [ ] Bảng có bị bóp cột không? Từ `sm` trở lên thì cuộn ngang trong khung, có `min-w`, **cột đầu ghim**; dưới `sm` bảng quản lý thành danh sách dòng (tên + email, badge + số chính), không cuộn ngang. Hàng tab/chip cuộn ngang có mép mờ ở phía còn mục khuất (`R10`)?
+- [ ] Trang có **đúng một `<h1>`** không? Trang danh sách: tên trên thanh header là `<h1>`, vùng nội dung không lặp tên. Trang có đầu trang riêng: `<h1>` ở đầu trang, thanh header chỉ ghi cấp cha.
+- [ ] **Ô số lượng − +**: rê vào nút thì nền là ô vuông bo thụt vào, hay một mảng phủ kín từ viền tới viền cắt ngang lưng chừng khung? Giới hạn biết trước (tồn kho) đã là `max` để nút + mờ ở đó chưa, hay vẫn bấm được rồi mới báo lỗi? Dòng gợi ý nói giới hạn thật ("Còn 8 sản phẩm"), không phải "Từ 1 đến 99" (`components/quantity-input.md`).
+- [ ] **Tên sửa tại chỗ**: chữ tên có thẳng cột với link cấp cha, câu mô tả không, hay thụt vào bằng padding của khung? Bấm vào một tên dài: chữ có đứng yên, số dòng có giữ nguyên không, hay rớt dòng vì hai nút ✓ ✕ ăn mất chỗ? Câu lỗi thẳng chữ trong ô? Bấm Huỷ bằng chuột có thành lưu không (`components/inline-edit.md`)?
+- [ ] **Tiêu đề cột sắp xếp**: rê lên tiêu đề cột đầu và cột cuối, có mảng nền nào chạm mép card không (chỉ chữ đậm lên)? Cột số có mũi tên trước chữ, chữ thẳng mép phải với số? Ở 375px còn thấy cách sắp theo từng cột (tiêu đề hoặc nút "Sắp xếp:"), hay cột đó trôi ra ngoài khung (`components/sortable-header.md`)?
+- [ ] Ô tìm `type="search"` có còn nút × của trình duyệt (Chrome tô xanh) không? Phải tắt, và có nút `X` xám tự dựng khi ô có chữ (`components/input.md`).
+- [ ] Tìm/lọc ra 0 kết quả: câu có nói đúng thứ đang lọc không, có link "Xoá tìm kiếm"/"Xoá lọc" (cùng chữ với nút cuối hàng chip) không, chỉ có từ khoá thì hàng chip có đang hiện thừa nút "Xoá lọc" không, checkbox chọn tất cả đã ẩn chưa (`components/empty-state.md`)? Ở 375px tab trạng thái có tab nào nằm hẳn ngoài khung không, phải thành dropdown có nhãn "Trạng thái:", căn trái. Hàng cuộn ngang (chip, tab, dải card) có mép mờ ở phía còn mục khuất không, lúc giao đã đề xuất một dòng vạch chỉ vị trí chưa (`R10`, không dựng sẵn)? Người dùng đã chọn vạch thì: vạch nổi, trang không nhảy lúc vạch hiện, mục đang chọn tự cuộn vào giữa.
+- [ ] Card ở mobile còn `p-8` không? Phải `p-4`, tối đa `p-5`.
+- [ ] Chip lọc có đứng cùng hàng với ô nhập và chênh chiều cao quá một bậc không?
+- [ ] Chip lọc: đang chọn là `bg-primary text-primary-foreground` (không gõ cứng màu), trừ chip trong popover có nút Áp dụng (viền đậm, nền `foreground/10`)? Nhãn dài đã `max-w-48` + `truncate` + `title` chưa? Có `aria-pressed` chưa?
+- [ ] **Popover Lọc**: chọn một người trong ô select bằng chuột rồi nhìn lại, ô còn viền đen + ring như đang mở không (phải `focus-visible:`)? Chữ "Xoá lọc" có thẳng mép trái các nhãn không, hay thụt 16px vì là nút `ghost`? Khung có mấy khối đen (chip chọn, nút Áp dụng): chỉ Áp dụng được đặc. Chọn đủ bốn mức: hàng chip có thành bốn vòng đen dày không (viền chip chọn `inset-ring-1`, không `ring-1 ring-inset`; chỉ khi bật `I14`: Tab tới chip đang chọn phải thấy cả viền chọn lẫn vòng focus)? Mở ô khoảng ngày ở 375px: hàng mốc nhanh có mốc nào bị cắt không (phải xuống dòng)? Ở 1280px: lịch có bung hai tháng tràn khỏi khung không, lọc hạn chót có mở ra tháng trước không (`layouts/overlay.md`, "Popover lọc")?
+- [ ] **Trang lịch**: đọc được tên việc trong ô ở 1024px khi sidebar mở không, hay chỉ còn một chữ ("Chuẩn …")? Khuôn đổi theo bề rộng khung (`@container`), không theo viewport. Ở lịch gọn, chọn một ngày khác hôm nay: vòng đặc có nằm ở ngày đang chọn không, hay hôm nay vẫn là khối đậm nhất? Rê chuột, bấm chuột một ngày: nền là vòng quanh số, hay ô vuông cả ô chồng lên vòng? "Hôm nay" có đứng liền ‹ › không? Chuyển qua vài tháng: lưới có cao thấp không (đo cao hàng có 3 việc)? Chữ số "1" và "31" có thẳng mép tên thứ không (`layouts/app.md`, "Trang lịch")?
+- [ ] **Trang lỗi**: gõ một đường dẫn sai **bên trong** khung app (vd `/dashboard/khong-co`): có ra trang 404 trong khung, sidebar còn, header ghi "Không tìm thấy trang" không, hay vùng nội dung trống mà header vẫn tên trang cũ? 403, 500 của một trang cũng nằm trong khung; chỉ bảo trì, chưa đăng nhập, sập cả app mới đứng riêng, và đứng riêng cũng là khối căn giữa không card (logo ở trên), không thanh đen rộng hết. 404 có dòng "404" nhỏ mờ trên tiêu đề chưa? Tiêu đề `font-semibold`, không đỏ (`M30`: người dùng không có gì phải sửa), không hình? Email giữa câu có để dấu chấm rơi xuống đầu dòng không (`suffix` của `EmailText`), có bị bẻ sau `@` dù vừa một dòng không? 403 đã gửi: tiêu đề đổi thành "Đã gửi yêu cầu", hay dòng chữ xanh nằm trong ô nút làm hàng lệch tâm? "Đổi tài khoản" có đứng dòng riêng dưới email không, hay nối sau email làm dòng chân rộng nhất khối? Giờ mở lại viết kiểu câu văn chưa (`layouts/app.md`, "Trang lỗi")?
+- [ ] **Biểu đồ đường** (`components/charts.md`): số ở điểm cuối có nằm đè lên đoạn nối không (điểm cuối thấp hơn điểm kề thì số phải xuống dưới chấm; probe báo "Nhãn số đè lên đường biểu đồ")? Điểm sát đáy (hôm nay mới vài giờ, số nhỏ): số có rơi xuống dưới đường 0, chen vào hàng nhãn trục ngay trên "27/09" không (probe báo "Nhãn số lòi ra ngoài vùng vẽ"; đặt sang cạnh chấm)? Rê vào một điểm giữa khi trục chỉ ghi vài nhãn: số có kèm ngày ("13/09 · 70,9 tr đ") không, hay chỉ còn con số không biết của ngày nào? Điểm chưa trọn kỳ có ghi "Hôm nay" không? Tab vào biểu đồ: số của mốc đang đứng có hiện ra không?
+- [ ] **Trang báo cáo** (`layouts/app.md`): chọn "Tháng này" và "Năm nay": dòng "So với…" ra cùng kỳ tháng trước / năm trước, hay "269 ngày liền trước" lùi tới một ngày lẻ? Chọn một ngày: biểu đồ chia theo giờ, hay thành khối chữ lặp số ở ô Doanh thu? Biểu đồ chính có lưới ngang và nhãn mức không? Lịch có cho chọn ngày sau hôm nay không?
+- [ ] Nhìn lại một lượt: có chỗ nào **chật dồn cục** không? Chật là chưa xong.
+
+Nếu có dark mode:
+
+- [ ] Có chỗ nào dùng màu nhấn làm **đường mảnh** không (viền focus, gạch chân, chỉ báo đang chọn)? (`M22`)
+- [ ] Nền tối: nền trang < card < dropdown / popover có **sáng dần** không? Nền rê và mục đang chọn có **sáng hơn** card (trắng phủ mờ), đang chọn đậm hơn rê một bậc không? Grep `hover:bg-background`, `focus-visible:bg-background`, `data-[highlighted]:bg-background`, và `&& "bg-background` (điều kiện JS: mục đang trỏ, đang chọn): phải ra 0, dùng `bg-item-hover` / `bg-secondary` (`M21`, `I10`). Lớp phủ sau modal là `bg-black/…`, grep `bg-foreground/[2-6]0` trên lớp phủ (`M32`).
+- [ ] Grep `text-white`. Chữ trên nền nhấn phải là `--primary-foreground`.
+- [ ] `.dark` đã khai lại màu nhấn chưa? Chưa là màu nhấn tàng hình.
+- [ ] Có dòng `@custom-variant dark` (Tailwind v4) chưa? Thiếu thì bấm Tối trên máy đang sáng, class `dark:` vẫn sáng (`M31`). `color-scheme` đổi theo theme chưa?
+- [ ] Nút đổi theme có đủ Sáng / Tối / Hệ thống, mặc định Hệ thống, không xoay vòng? Tải lại ở chế độ tối có nháy trắng không? Lật theme có chỗ chuyển màu lệch nhịp không (`M31`)?
+- [ ] Ô nhập, select ở nền tối còn viền không (`M32`)? Còn mảng nền `-50`, `-100` sáng nào giữa màn tối không (badge, avatar, banner, chip, ảnh nền trắng)? Grep `bg-[a-z]+-(50|100)\b` không kèm `dark:` (`M32`).
+- [ ] Lớp nổi dùng `bg-surface-overlay` / `bg-surface` + `border border-border` + `shadow-popover` / `shadow-modal`, không `shadow-lg` trần (`M15`)? Sidebar trượt ở màn hẹp cũng là panel: có `shadow-modal` chưa? Toast, hộp thoại của thư viện có còn nền trắng ở chế độ tối không (`M33`)?
+- [ ] Chạy probe thêm `--dark`: mục "DARK MODE" phải rỗng.
+
+> **Bốn vòng test gần nhất, ba lỗi giá trị nhất đều đến từ cổng 3**, không phải
+> từ lúc dựng. Không chạy cổng này thì coi như chưa test.
+>
+> Đây cũng là loại lỗi mà chấm bằng ảnh chụp màn rộng **không bao giờ** thấy.