---
url: https://docs.nemo12.com/skills/ui.md
description: >-
  Bộ UI: Dựng và rà giao diện theo chuẩn đo được (grid, spacing, màu, token),
  trang mới, journey, feedback, e2e.
---

# Bộ UI

> ⚙️ **Trang này sinh tự động** bằng `scripts/gen-skills-catalog.mjs` (hằng `BUNDLES` cộng frontmatter của `.claude/skills/*/SKILL.md`): đừng sửa tay. Về [danh mục skill](index.md).

## Mục đích

Dựng và rà giao diện mọi app React theo chuẩn đo được (token màu, thang spacing bội 4px, năm bề rộng khung, lưới mobile-first, sàn chữ 14px) trên bộ ba Motion + shadcn + Tailwind, rồi kiểm chứng trên bản build thật.

Bộ có **8 skill**. Skill chỉ là quy trình; chuẩn nằm ở doc canonical bên dưới, và khi hai bên nói khác nhau thì doc thắng.

## Doc canonical

* [design-system/layout-standard.md](../design-system/layout-standard.md)
* [design-system/index.md](../design-system/index.md)
* [design-system/guided-journey/index.md](../design-system/guided-journey/index.md)
* [design-system/focus-and-load.md](../design-system/focus-and-load.md)
* [ops/ui.md](../ops/ui.md)

## Luồng gọi

Thứ tự thường gặp; bước nào không cần thì bỏ qua. Đầu ra của bước trước là đầu vào của bước sau.

| Bước | Việc | Skill | Đầu ra |
| --- | --- | --- | --- |
| 1 | Thiết kế journey của learner hay phụ huynh | [`/journey-design`](#journey-design) | journey theo mẫu Guided Journey |
| 2 | Thêm trang có URL riêng (không phải journey) | [`/new-page`](#new-page) | route, header, deep link |
| 3 | Dựng hoặc rà một trang quản trị ở Dolphin | [`/dolphin-ui`](#dolphin-ui) | trang đúng một trong bốn loại: danh sách, xem, sửa tại chỗ, tạo mới |
| 4 | Dựng hoặc sửa component, khối, màn | [`/ui-build`](#ui-build) | UI sạch `npm run audit:ui -- --changed` |
| 5 | Xử lý một vòng feedback UI | [`/ui-feedback`](#ui-feedback) | sửa code, đóng vết docs |
| 6 | Kiểm chứng trên bản build (learn) | [`/e2e-check`](#e2e-check) | Playwright xanh, console sạch |
| 7 | Audit chặt định kỳ hay trước khi chốt | [`/audit-ui`](#audit-ui) | danh sách vi phạm hai lớp |
| 8 | Chấm một màn theo 25 yếu tố rồi sửa dần (thứ tự tập trung, tải thông tin) | [`/ui-audit-25`](#ui-audit-25) | bảng điểm theo màn + một lô sửa mỗi PR |

## Các skill

### `/audit-ui` {#audit-ui}

* **Mục đích:** Audit giao diện CHẶT theo chuẩn đo được - lớp 1 máy quét code (token màu, thang spacing, bề rộng khung, sàn chữ, giá trị tuỳ ý, style inline) bằng `npm run audit:ui`, lớp 2 đo trên trang thật ở 375/768/1440 (tràn ngang, lưới lệch, mép trái, thẻ cao lệch, vùng bấm, tối giản SRC-048, tương phản, trạng thái rỗng/lỗi/đang tải). Chỉ đọc và chụp, trả về phát hiện có bằng chứng.
* **Khi nào dùng:** Dùng khi skill /audit chia việc xuống, khi rà một app hay một màn, hoặc trước khi gộp một thay đổi giao diện lớn.
* **Docs phụ thuộc:** [design-system/layout-standard.md](../design-system/layout-standard.md) · [design-system/index.md](../design-system/index.md)
* **Version:** chưa đánh · **Cập nhật:** 08.10.2026 · **Chủ:** platform · **File:** `.claude/skills/audit-ui/SKILL.md`

### `/dolphin-ui` {#dolphin-ui}

* **Mục đích:** Tiêu chuẩn UI/UX cho các trang quản trị nội bộ (Dolphin và các cổng admin) - thanh bên, breadcrumb, trang danh sách, trang xem chỉ đọc có Edit tại chỗ, trang tạo mới có URL riêng, trạng thái rỗng và đang tải.
* **Khi nào dùng:** Dùng khi dựng hoặc sửa một trang trong apps/mentors (hoặc một cổng admin khác), và khi rà một trang theo tiêu chuẩn mới (SRC-1320).
* **Docs phụ thuộc:** [CLAUDE.md](https://github.com/dac2205/nemo12.com/blob/main/CLAUDE.md)
* **Version:** chưa đánh · **Cập nhật:** 10.10.2026 · **Chủ:** platform · **File:** `.claude/skills/dolphin-ui/SKILL.md`

### `/e2e-check` {#e2e-check}

* **Mục đích:** Kiểm chứng thay đổi giao diện bằng Playwright (smoke + console error) trên bản build thật, vì learn chặn sau đăng nhập Google nên không mở mắt xem được.
* **Khi nào dùng:** Dùng sau mỗi thay đổi UI đáng kể ở apps/learn, trước khi báo "đã sửa".
* **Docs phụ thuộc:** không trỏ doc nào
* **Version:** chưa đánh · **Cập nhật:** 04.09.2026 · **Chủ:** platform · **File:** `.claude/skills/e2e-check/SKILL.md`

### `/journey-design` {#journey-design}

* **Mục đích:** Thiết kế hoặc sửa một journey của learner hay phụ huynh trên bất kỳ bề mặt nào của Nemo12 (www, learn /ielts, AI Teen, khoá bố mẹ Marlins) đúng mẫu Guided Journey: persona và giọng, NavBar = journey, thanh bước có số và tên, trang lesson với card Activity bên trái và scroll-spy, một card đang mở, xem/sửa, cổng đọc, tick bước lưu server, tag Learning Cycle, lưu trạng thái, test 375px.
* **Khi nào dùng:** Dùng mỗi khi chủ dự án yêu cầu journey mới, thêm/bớt/đổi tên/đánh số lại bước, hay đổi cách một journey hiển thị.
* **Docs phụ thuộc:** [design-system/guided-journey/index.md](../design-system/guided-journey/index.md) · [architecture/sdd-043-ai-teen-program/index.md](../architecture/sdd-043-ai-teen-program/index.md) · [design-system/hierarchy.md](../design-system/hierarchy.md) · [design-system/card-patterns.md](../design-system/card-patterns.md) · [product/visitor-state/index.md](../product/visitor-state/index.md) · [intake.md](../intake.md)
* **Version:** chưa đánh · **Cập nhật:** 08.10.2026 · **Chủ:** platform · **File:** `.claude/skills/journey-design/SKILL.md`

### `/new-page` {#new-page}

* **Mục đích:** Thêm một trang mới có URL riêng vào app learn hoặc marlins (route, header, entry point, deep link).
* **Khi nào dùng:** Dùng khi chủ dự án yêu cầu "tách ra trang riêng" hoặc "mỗi card một URL".
* **Docs phụ thuộc:** không trỏ doc nào
* **Version:** chưa đánh · **Cập nhật:** 04.09.2026 · **Chủ:** platform · **File:** `.claude/skills/new-page/SKILL.md`

### `/ui-audit-25` {#ui-audit-25}

* **Mục đích:** Chấm một màn (route) theo 25 yếu tố giao diện của ui.nemo12.com (pass / partial / fail + bằng chứng), áp hai chuẩn đo được Focus Order (nhìn đâu trước, đâu sau) và Information Load (ngân sách khối, hiện dần, không lặp), rồi sửa từng lô theo thứ tự ưu tiên, mỗi lô một PR, ghi bảng điểm theo màn để đi dần qua đủ 25 yếu tố.
* **Khi nào dùng:** Dùng khi chủ dự án nói "không biết nhìn vào đâu", "quá nhiều thông tin", khi muốn rà một màn theo 25 yếu tố, hoặc khi mở lại bảng điểm để sửa lô kế tiếp.
* **Docs phụ thuộc:** [design-system/focus-and-load.md](../design-system/focus-and-load.md) · [design-system/hierarchy.md](../design-system/hierarchy.md) · [design-system/scorecards/learn-ielts-grammar-topic.md](../design-system/scorecards/learn-ielts-grammar-topic.md)
* **Version:** chưa đánh · **Cập nhật:** 09.10.2026 · **Chủ:** platform · **File:** `.claude/skills/ui-audit-25/SKILL.md`

### `/ui-build` {#ui-build}

* **Mục đích:** Dựng hoặc sửa một component, một khối, một màn giao diện ở bất kỳ app React nào của Nemo12 ĐÚNG CHUẨN đo được - chỉ token màu, thang spacing bội 4px, sáu bề rộng khung, lưới mobile-first, thang chữ sàn 14px, shadcn + Motion + Tailwind - và chứng minh bằng `npm run audit:ui -- --strict` sạch trước khi báo xong.
* **Khi nào dùng:** Dùng mỗi khi viết mới hay sửa JSX/className, kể cả sửa nhỏ trong một vòng feedback.
* **Docs phụ thuộc:** [design-system/layout-standard.md](../design-system/layout-standard.md) · [design-system/index.md](../design-system/index.md)
* **Version:** chưa đánh · **Cập nhật:** 08.10.2026 · **Chủ:** platform · **File:** `.claude/skills/ui-build/SKILL.md`

### `/ui-feedback` {#ui-feedback}

* **Mục đích:** Xử lý một vòng feedback UI của chủ dự án (thường kèm ảnh chụp màn hình) - sửa code, kiểm chứng, rồi đóng vết vào docs.
* **Khi nào dùng:** Dùng mỗi khi nhận yêu cầu chỉnh giao diện learn/marlins/coral/web.
* **Docs phụ thuộc:** [traceability.md](../traceability.md)
* **Version:** chưa đánh · **Cập nhật:** 25.09.2026 · **Chủ:** platform · **File:** `.claude/skills/ui-feedback/SKILL.md`