/ui-ux
Gu UI/UX cho app — dashboard, danh sách, bảng, form, cài đặt, modal, trang lướt để chọn. Mặc định như một designer - brief, 2–3 wireframe, người dùng chọn rồi mới dựng. Lối khác khi đề nói rõ - soi UI đang có ("xem giúp", "review"), so bản mới với bản gốc ("có gì hơn"), dựng lại
$ npx -y skills add evondev/evondevKit --skill ui-ux --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/ui-ux
Context preview
The summary Claude sees to decide when to auto-load this skill.
Gu UI/UX cho app — dashboard, danh sách, bảng, form, cài đặt, modal, trang lướt để chọn. Mặc định như một designer - brief, 2–3 wireframe, người dùng chọn rồi mới dựng. Lối khác khi đề nói rõ - soi UI đang có ("xem giúp", "review"), so bản mới với bản gốc ("có gì hơn"), dựng lại
SKILL.md
ui-ux.SKILL.mdname: ui-ux
description: Gu UI/UX cho app — dashboard, danh sách, bảng, form, cài đặt, modal, trang lướt để chọn. Mặc định như một designer - brief, 2–3 wireframe, người dùng chọn rồi mới dựng. Lối khác khi đề nói rõ - soi UI đang có ("xem giúp", "review"), so bản mới với bản gốc ("có gì hơn"), dựng lại giữ brand ("giữ brand", "keep the brand") hay theo gu skill ("bỏ style cũ"), refactor giữ nguyên hình, dựng luôn ("dựng luôn", "just build it"), design system trước ("UI kit", "component library"), logo đơn giản ("làm logo"), sửa một component. Mặc định flat; làm được glass, gradient, nổi, nền tối. Landing page, cửa hàng online, blog chưa được dạy - vẫn làm, báo trước. Dùng khi dựng, làm lại, sửa giao diện app, xem ảnh hay link app, hoặc nhắc "làm UI cho đẹp", "dựng màn", "thiết kế", "làm lại UX", "nhìn rối", "build a page", "design this screen", "redesign", "make it look good", "ecommerce", "ui-ux", "evon".UI/UX cho hệ thống dashboard
> **Chưa đi hết mục 0 thì KHÔNG viết một dòng code nào trong lượt này.** > **Mặc định là làm như một designer** (`references/design-process.md`, nhánh `U`): brief, > việc chính của từng màn, 2–3 wireframe, người dùng chọn rồi mới dựng. Đề viết tiếng Việt > hay tiếng Anh đều vậy. Hai cổng chờ của nhánh đó (duyệt brief, chọn wireframe) là hai chỗ > duy nhất được dừng hỏi (lối design system có một cổng riêng, `D9`; lối làm logo có một cổng > chọn logo, `components/logo.md`). Ngoài các cổng đó thì **không hỏi**: chỗ nào đề chưa rõ thì lấy mặc > định, **báo lúc giao** mình đã chọn gì. > Các nhánh khác chỉ khi đề nói rõ (câu 1): **soi UI đang có** (`references/review.md`) thì > soi luôn, **sửa thì hỏi**; dựng lại giữ brand; dựng lại theo gu skill; refactor; dựng luôn > không wireframe; dựng design system trước; sửa một component nhỏ.
Skill này không dạy "thế nào là đẹp" bằng tính từ. Nó làm ba việc: **đi đúng thứ tự** trước khi dựng, **cấm** những thói quen làm giao diện lộ ngay ra là AI dựng, và **ràng buộc bằng con số** để phần còn lại tự sạch.
Phạm vi: **màn hình trong app**. Dashboard, danh sách, bảng, form, cài đặt, modal. Không lo trang bán hàng, trừ bảng giá (`references/layouts/pricing.md`).
**Đề là loại UI skill chưa được dạy thì báo trước một dòng, rồi vẫn làm.** Gồm: landing page, trang giới thiệu, trang chủ website; cửa hàng online phía người mua (trang chủ shop, trang sản phẩm, giỏ hàng, thanh toán); blog (trang chủ blog, trang đọc bài); và loại tương tự (portfolio, trang sự kiện). Phía quản trị của chúng (quản lý đơn, sản phẩm, bài viết) là màn trong app, không thuộc nhóm này. Câu báo nằm **đầu câu trả lời đầu tiên**, trước dòng audit, theo ngôn ngữ của đề:
> Lưu ý: skill chưa được dạy cho landing page / cửa hàng online / blog, nên mình vẫn làm được > nhưng kết quả có thể chưa đẹp bằng màn trong app. Phần nào trùng màn app (bảng giá, danh > sách lướt để chọn, form) thì vẫn theo mẫu đã duyệt.
Chỉ báo, **không phải cổng**: không dừng hỏi có làm tiếp không, đi tiếp câu 1 như mọi đề. Phần trang không có mẫu thì theo luồng "Dựng một thứ chưa có mẫu" (cuối `references/principles.md`). ⚑
Skill lo **giao diện**: bố cục, style, và **mỗi trạng thái trông ra sao** (đang chọn, khoá, rỗng, đang tải, lỗi, một trang, không dòng nào). **Không tự viết logic xử lý**: bấm trang thì gọi gì, đổi số dòng thì nhảy về đâu, lưu vào URL hay không, gọi API nào. Chỗ đó để prop hoặc handler rỗng (`onPageChange`, `onConfirm`) cho người dùng tự nối. Cần xem nhiều trạng thái thì dựng **mỗi trạng thái một ví dụ tĩnh** cạnh nhau, không dựng bản bấm được để xem.
---
0. Bốn câu hỏi, đúng thứ tự này
Câu 1 — Đề đi lối nào? Mặc định là như một designer
Đây là câu **đầu tiên**, trước mọi thứ khác. Các lối khác nhau về rủi ro, về thứ tự các bước, và về người phải duyệt.
Đọc đề theo thứ tự bảng, gặp dòng đầu tiên khớp thì dừng. Chủ dự án chốt: **dòng cuối là mặc định**, chín dòng trên chỉ khi đề nói rõ (tiếng Việt hay tiếng Anh).
| Đề nói | Đi đâu | | --- | --- | | **So bản mới với bản gốc** ("so với bản gốc", "so với trang gốc", "có gì hơn", "hơn hay thua", "đã ổn chưa so với…", "compare with the original", "is it better than before") | `references/review.md`, `V6`: chụp hai bản như nhau, bảng tiêu chí gốc / mới / bên hơn, phải tìm dòng thua, đề xuất sửa từng dòng thua. Không sửa tới khi người dùng chọn dòng. **Dừng mục 0 tại đây** ⚑ | | **Muốn biết UI đang có chỗ nào chưa ổn** ("xem giúp", "review", "chỗ nào chưa ổn", "nhìn rối", "check this UI", "what's wrong with", gửi ảnh hay link app của họ nhờ xem) | Mở `references/review.md`, nhánh `V` **chế độ soi**: lập bảng trước/sau, người dùng chọn dòng rồi mới sửa. **Dừng mục 0 tại đây**, lúc giao theo `V5` chứ không theo `S15` ⚑ | | **Làm lại mà giữ brand / giữ giao diện** ("giữ brand", "giữ màu", "giữ giao diện hiện tại", "chỉ làm gọn", "keep the brand", "keep the current look") | `references/review.md`, **chế độ dựng lại giữ brand**: giữ khung trang, thay control gốc bằng component của skill, giữ vai màu. Đề nói bỏ style cũ thì không phải dòng này, xem dòng dựng lại theo gu skill. **Dừng mục 0 tại đây** ⚑ | | **Refactor / dọn code mà giữ nguyên hình** ("refactor", "chuyển sang Tailwind", "dọn CSS") | Mở `references/refactor.md`, nhánh `L`. **Dừng mục 0 tại đây** — nhánh đó có bộ mặc định riêng, bắt đầu bằng "đo trước khi kết luận" | | **Làm logo** ("làm logo", "dựng logo", "thay logo", "design a logo") | Mở `references/components/logo.md`: audit câu 2, rồi **trang chọn logo** ba hướng đặt trong sidebar, màn đăng nhập, tab trình duyệt. **Một cổng**: người dùng chọn hướng; đề có "luôn" thì dựng thẳng hướng khuyên dùng. **Dừng mục 0 tại đây** ⚑ | | **Dựng luôn, không wireframe** ("dựng luôn", "không cần wireframe", "just build it", "skip the wireframe") | Nhánh `U` **không vẽ wireframe**: làm `U1`, `U2`, chọn phương án sẽ khuyên dùng trong đầu, rồi dựng thẳng theo nó (`design-process.md`, đầu file). Không hỏi. Audit câu 2 vẫn chạy, ở `U1`. **Dừng mục 0 tại đây** | | **Dựng design system trước** ("design system",
Read more
name: ui-ux
description: Gu UI/UX cho app — dashboard, danh sách, bảng, form, cài đặt, modal, trang lướt để chọn. Mặc định như một designer - brief, 2–3 wireframe, người dùng chọn rồi mới dựng. Lối khác khi đề nói rõ - soi UI đang có ("xem giúp", "review"), so bản mới với bản gốc ("có gì hơn"), dựng lại giữ brand ("giữ brand", "keep the brand") hay theo gu skill ("bỏ style cũ"), refactor giữ nguyên hình, dựng luôn ("dựng luôn", "just build it"), design system trước ("UI kit", "component library"), logo đơn giản ("làm logo"), sửa một component. Mặc định flat; làm được glass, gradient, nổi, nền tối. Landing page, cửa hàng online, blog chưa được dạy - vẫn làm, báo trước. Dùng khi dựng, làm lại, sửa giao diện app, xem ảnh hay link app, hoặc nhắc "làm UI cho đẹp", "dựng màn", "thiết kế", "làm lại UX", "nhìn rối", "build a page", "design this screen", "redesign", "make it look good", "ecommerce", "ui-ux", "evon".UI/UX cho hệ thống dashboard
> **Chưa đi hết mục 0 thì KHÔNG viết một dòng code nào trong lượt này.** > **Mặc định là làm như một designer** (`references/design-process.md`, nhánh `U`): brief, > việc chính của từng màn, 2–3 wireframe, người dùng chọn rồi mới dựng. Đề viết tiếng Việt > hay tiếng Anh đều vậy. Hai cổng chờ của nhánh đó (duyệt brief, chọn wireframe) là hai chỗ > duy nhất được dừng hỏi (lối design system có một cổng riêng, `D9`; lối làm logo có một cổng > chọn logo, `components/logo.md`). Ngoài các cổng đó thì **không hỏi**: chỗ nào đề chưa rõ thì lấy mặc > định, **báo lúc giao** mình đã chọn gì. > Các nhánh khác chỉ khi đề nói rõ (câu 1): **soi UI đang có** (`references/review.md`) thì > soi luôn, **sửa thì hỏi**; dựng lại giữ brand; dựng lại theo gu skill; refactor; dựng luôn > không wireframe; dựng design system trước; sửa một component nhỏ.
Skill này không dạy "thế nào là đẹp" bằng tính từ. Nó làm ba việc: **đi đúng thứ tự** trước khi dựng, **cấm** những thói quen làm giao diện lộ ngay ra là AI dựng, và **ràng buộc bằng con số** để phần còn lại tự sạch.
Phạm vi: **màn hình trong app**. Dashboard, danh sách, bảng, form, cài đặt, modal. Không lo trang bán hàng, trừ bảng giá (`references/layouts/pricing.md`).
**Đề là loại UI skill chưa được dạy thì báo trước một dòng, rồi vẫn làm.** Gồm: landing page, trang giới thiệu, trang chủ website; cửa hàng online phía người mua (trang chủ shop, trang sản phẩm, giỏ hàng, thanh toán); blog (trang chủ blog, trang đọc bài); và loại tương tự (portfolio, trang sự kiện). Phía quản trị của chúng (quản lý đơn, sản phẩm, bài viết) là màn trong app, không thuộc nhóm này. Câu báo nằm **đầu câu trả lời đầu tiên**, trước dòng audit, theo ngôn ngữ của đề:
> Lưu ý: skill chưa được dạy cho landing page / cửa hàng online / blog, nên mình vẫn làm được > nhưng kết quả có thể chưa đẹp bằng màn trong app. Phần nào trùng màn app (bảng giá, danh > sách lướt để chọn, form) thì vẫn theo mẫu đã duyệt.
Chỉ báo, **không phải cổng**: không dừng hỏi có làm tiếp không, đi tiếp câu 1 như mọi đề. Phần trang không có mẫu thì theo luồng "Dựng một thứ chưa có mẫu" (cuối `references/principles.md`). ⚑
Skill lo **giao diện**: bố cục, style, và **mỗi trạng thái trông ra sao** (đang chọn, khoá, rỗng, đang tải, lỗi, một trang, không dòng nào). **Không tự viết logic xử lý**: bấm trang thì gọi gì, đổi số dòng thì nhảy về đâu, lưu vào URL hay không, gọi API nào. Chỗ đó để prop hoặc handler rỗng (`onPageChange`, `onConfirm`) cho người dùng tự nối. Cần xem nhiều trạng thái thì dựng **mỗi trạng thái một ví dụ tĩnh** cạnh nhau, không dựng bản bấm được để xem.
---
0. Bốn câu hỏi, đúng thứ tự này
Câu 1 — Đề đi lối nào? Mặc định là như một designer
Đây là câu **đầu tiên**, trước mọi thứ khác. Các lối khác nhau về rủi ro, về thứ tự các bước, và về người phải duyệt.
Đọc đề theo thứ tự bảng, gặp dòng đầu tiên khớp thì dừng. Chủ dự án chốt: **dòng cuối là mặc định**, chín dòng trên chỉ khi đề nói rõ (tiếng Việt hay tiếng Anh).
| Đề nói | Đi đâu | | --- | --- | | **So bản mới với bản gốc** ("so với bản gốc", "so với trang gốc", "có gì hơn", "hơn hay thua", "đã ổn chưa so với…", "compare with the original", "is it better than before") | `references/review.md`, `V6`: chụp hai bản như nhau, bảng tiêu chí gốc / mới / bên hơn, phải tìm dòng thua, đề xuất sửa từng dòng thua. Không sửa tới khi người dùng chọn dòng. **Dừng mục 0 tại đây** ⚑ | | **Muốn biết UI đang có chỗ nào chưa ổn** ("xem giúp", "review", "chỗ nào chưa ổn", "nhìn rối", "check this UI", "what's wrong with", gửi ảnh hay link app của họ nhờ xem) | Mở `references/review.md`, nhánh `V` **chế độ soi**: lập bảng trước/sau, người dùng chọn dòng rồi mới sửa. **Dừng mục 0 tại đây**, lúc giao theo `V5` chứ không theo `S15` ⚑ | | **Làm lại mà giữ brand / giữ giao diện** ("giữ brand", "giữ màu", "giữ giao diện hiện tại", "chỉ làm gọn", "keep the brand", "keep the current look") | `references/review.md`, **chế độ dựng lại giữ brand**: giữ khung trang, thay control gốc bằng component của skill, giữ vai màu. Đề nói bỏ style cũ thì không phải dòng này, xem dòng dựng lại theo gu skill. **Dừng mục 0 tại đây** ⚑ | | **Refactor / dọn code mà giữ nguyên hình** ("refactor", "chuyển sang Tailwind", "dọn CSS") | Mở `references/refactor.md`, nhánh `L`. **Dừng mục 0 tại đây** — nhánh đó có bộ mặc định riêng, bắt đầu bằng "đo trước khi kết luận" | | **Làm logo** ("làm logo", "dựng logo", "thay logo", "design a logo") | Mở `references/components/logo.md`: audit câu 2, rồi **trang chọn logo** ba hướng đặt trong sidebar, màn đăng nhập, tab trình duyệt. **Một cổng**: người dùng chọn hướng; đề có "luôn" thì dựng thẳng hướng khuyên dùng. **Dừng mục 0 tại đây** ⚑ | | **Dựng luôn, không wireframe** ("dựng luôn", "không cần wireframe", "just build it", "skip the wireframe") | Nhánh `U` **không vẽ wireframe**: làm `U1`, `U2`, chọn phương án sẽ khuyên dùng trong đầu, rồi dựng thẳng theo nó (`design-process.md`, đầu file). Không hỏi. Audit câu 2 vẫn chạy, ở `U1`. **Dừng mục 0 tại đây** | | **Dựng design system trước** ("design system",
If you find this useful, you can support the project via MoMo (Vietnam): A ui-ux skill for Claude Code: builds and polishes app UIs (dashboards, lists, tables, forms, settings, modals) using your project's own component library and colors.