ui-ux-pro-max

Tổng quan

ui-ux-pro-max là gì?

ui-ux-pro-max là một kỹ năng trí tuệ thiết kế UI/UX giúp bạn đưa ra quyết định thiết kế tốt hơn cho giao diện web và mobile. Thay vì đoán layout, màu sắc, typography hay pattern tương tác, kỹ năng này dựa trên một tập dữ liệu có cấu trúc gồm:

• Hơn 50 visual style
• 161 color palette
• 57 font pairing
• 161 loại sản phẩm với quy tắc lập luận
• 99 guideline UX
• 25 loại biểu đồ
• Bao phủ 10 stack: React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui và HTML/CSS

Kỹ năng này được xây dựng như một lớp ra quyết định thiết kế: giúp chọn pattern, giải thích lựa chọn thiết kế và giữ chất lượng UX ổn định trong quá trình bạn thiết kế và xây dựng sản phẩm.

ui-ux-pro-max dành cho ai?

ui-ux-pro-max phù hợp với:

• Product designer & UI/UX designer muốn có hướng dẫn có hệ thống về layout, hệ màu, typography và pattern tương tác.
• Frontend engineer làm việc với React, Next.js, Vue, Svelte, React Native hoặc Tailwind và cần gợi ý có ý thức về thiết kế khi hiện thực UI.
• Founder và solo dev không có team design riêng nhưng vẫn muốn UI/UX hiện đại, nhất quán.
• Người duy trì design system muốn một lớp tham chiếu cho style, pattern biểu đồ và guideline UX được căn chỉnh với nhiều stack.

Đặc biệt hữu ích khi bạn đang:

• Thiết kế hoặc review landing page, dashboard, admin panel, ứng dụng SaaS, e-commerce và mobile app.
• Lựa chọn giữa các style (glassmorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, v.v.).
• Căn chỉnh các component như button, modal, navbar, sidebar, card, table, form và chart theo best practice.

ui-ux-pro-max giải quyết vấn đề gì?

ui-ux-pro-max được thiết kế để giảm mơ hồ trong thiết kế và UX thiếu nhất quán bằng cách cung cấp:

• Lựa chọn thiết kế có lập luận: Sử dụng loại sản phẩm và ngữ cảnh để gợi ý màu sắc, typography và pattern layout phù hợp.
• Kiểm soát chất lượng UX: 99 guideline UX giúp phát hiện vấn đề tương tác và khả năng sử dụng trước khi lên production.
• Hướng dẫn đa stack: Ánh xạ quyết định thiết kế sang các yếu tố hiện thực cụ thể trên React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui và HTML/CSS.
• Tăng tốc ý tưởng: Nhanh chóng kết hợp hướng style, palette và font pairing đã được tuyển chọn và tương thích.

Nhờ vậy, ui-ux-pro-max rất hữu ích khi bạn cần rõ ràng về cách thiết kế một thứ gì đó và vì sao một hướng đi cụ thể lại phù hợp hơn với loại sản phẩm và nền tảng của bạn.

Khi nào ui-ux-pro-max phù hợp hoặc không phù hợp?

Phù hợp khi:

• Bạn đang quyết định layout page, cấu trúc navigation hoặc flow tương tác.
• Bạn đang chọn color palette, typography và hệ thống spacing cho một sản phẩm mới hoặc hiện tại.
• Bạn đang hiện thực UI bằng React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind hoặc shadcn/ui và muốn có hướng dẫn nhạy với thiết kế.
• Bạn muốn một cách tiếp cận có hệ thống để review chất lượng UI/UX cho dashboard, landing page hoặc màn hình mobile.

Không lý tưởng khi:

• Bạn chỉ cần hỗ trợ frontend engineering chung chung (quản lý state phức tạp, tích hợp backend hoặc devops) mà không có quyết định thiết kế.
• Bạn đã có một design system cứng, được định nghĩa đầy đủ và chỉ cần refactor ở mức code.
• Bạn đang làm việc với giao diện thuần văn bản với rất ít yếu tố visual hoặc tương tác.

Nếu nhu cầu chính của bạn là định hướng visual, pattern tương tác hoặc kiểm soát chất lượng UX, ui-ux-pro-max rất có thể sẽ là một bổ sung mạnh mẽ.

Cách sử dụng

1. Các bước cài đặt

Để cài đặt ui-ux-pro-max như một skill trong môi trường agent tương thích, sử dụng:

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max
``

Sau khi cài, tìm file của skill dưới thư mục `.claude/skills/ui-ux-pro-max` trong cấu trúc repository upstream. Các thành phần chính gồm:

- `SKILL.md` – định nghĩa skill chính và mục đích sử dụng
- `data/` – các dataset trí tuệ thiết kế (style, palette, guideline UX, loại biểu đồ, v.v.)
- `scripts/` – logic hỗ trợ để tìm kiếm hoặc diễn giải dữ liệu thiết kế

Môi trường của bạn có thể mount hoặc mirror các path này khác nhau, nhưng đây là các phần cốt lõi mà skill phụ thuộc vào.

### 2. Những file nên xem trước
Sau khi cài đặt, hãy bắt đầu với các file này để hiểu ui-ux-pro-max hoạt động thế nào:

#### `SKILL.md`

- Mô tả mục đích tổng quan: trí tuệ thiết kế UI/UX cho web và mobile.
- Giải thích phạm vi: hơn 50 style, 161 color palette, 57 font pairing, 161 loại sản phẩm, 99 guideline UX, 25 loại biểu đồ.
- Làm rõ các trường hợp **When to Apply** và **Must Use** để skill chỉ được gọi khi thực sự cần quyết định thiết kế.

Đây là tài liệu tham chiếu chính về việc skill sẽ ưu tiên điều gì và nên được kích hoạt ra sao.

#### `data/`

- Chứa các dataset có cấu trúc là nền tảng cho ui-ux-pro-max.
- Bao gồm tham chiếu đến loại sản phẩm, hệ màu, lựa chọn typography, guideline UX và loại biểu đồ.
- Cho phép agent tìm kiếm và chọn khuyến nghị dựa trên ngữ cảnh (ví dụ: SaaS dashboard so với e-commerce checkout).

Thông thường bạn không chỉnh sửa các file này khi cài đặt; hãy dùng chúng như kho tri thức.

#### `scripts/`

- Cung cấp các script hỗ trợ để đọc và diễn giải dữ liệu.
- Kích hoạt gợi ý dựa trên mức độ ưu tiên và các truy vấn có cấu trúc (ví dụ: chọn palette → font pairing → layout pattern).

Nếu bạn mở rộng hoặc tích hợp skill vào workflow tùy biến, đây là nơi nên tìm kiếm hook hoặc logic để tái sử dụng.

### 3. Các workflow điển hình

#### Thiết kế một page hoặc màn hình mới
Sử dụng ui-ux-pro-max khi bạn đang lên kế hoạch:

- **Landing page** và website marketing
- **Dashboard và admin panel**
- **Ứng dụng SaaS và flow e-commerce**
- **Màn hình mobile app**

Một workflow phổ biến:

1. Mô tả loại sản phẩm, đối tượng người dùng mục tiêu và nền tảng (ví dụ: “B2B SaaS analytics dashboard in React with Tailwind”).
2. Yêu cầu agent (với ui-ux-pro-max đã bật) đề xuất:
   - Cấu trúc layout tổng thể và navigation
   - Style khuyến nghị (ví dụ: minimalism, bento grid, dark mode)
   - Color palette và font pairing phù hợp với loại sản phẩm
   - Các pattern tương tác chính và guideline UX nên áp dụng
3. Để skill gợi ý pattern ở cấp độ component cho button, modal, form, table và chart.
4. Nếu bạn dùng React, Next.js, Vue, Svelte, React Native, Tailwind hoặc shadcn/ui, hãy yêu cầu hướng dẫn triển khai tập trung vào hiện thực nhưng vẫn tôn trọng hướng thiết kế đã chọn.

#### Cải thiện hoặc review UI hiện có
Khi bạn đã có UI và muốn cải thiện:

1. Mô tả thiết kế hiện tại, điểm đau và stack đang dùng.
2. Sử dụng ui-ux-pro-max để:
   - Đối chiếu vấn đề với 99 guideline UX.
   - Gợi ý điều chỉnh về spacing, hierarchy, cách dùng màu và typography để tăng rõ ràng.
   - Đề xuất loại biểu đồ phù hợp hơn (trong 25 pattern biểu đồ) cho dữ liệu của bạn.
3. Yêu cầu bộ gợi ý trước/sau, kèm theo lý do gắn với loại sản phẩm và best practice.

#### Căn chỉnh với design system và thư viện component
Nếu bạn đang làm việc với design system (ví dụ: setup Tailwind hoặc shadcn/ui):

- Dùng ui-ux-pro-max để quyết định **pattern nào** và **kết hợp token nào** (màu, cỡ chữ, spacing) nên ưu tiên cho một loại sản phẩm nhất định.
- Khi có tích hợp shadcn/ui MCP trong môi trường rộng hơn, bạn có thể:
  - Yêu cầu ui-ux-pro-max xác định pattern component phù hợp.
  - Dùng MCP để tra cứu ví dụ cụ thể và code cho các pattern đó.

Cách này giúp quyết định thiết kế và lựa chọn component luôn đồng bộ mà không phải tự tay lọc tài liệu.

### 4. Khi nào nên gọi skill một cách rõ ràng
Theo hướng dẫn upstream trong `SKILL.md`, ui-ux-pro-max hoạt động tốt nhất khi nhiệm vụ liên quan đến:

- **Cấu trúc UI** – layout page, thứ bậc nội dung, pattern navigation.
- **Quyết định thiết kế visual** – style, màu sắc, typography, spacing, shadow, gradient.
- **Pattern tương tác** – trạng thái hover/focus, loading, xử lý lỗi, micro-interaction.
- **Kiểm soát chất lượng UX** – nhận diện điểm ma sát và áp dụng guideline UX.

Với những tác vụ thuần code không có hàm ý về thiết kế, bạn có thể bỏ qua skill này để câu trả lời tập trung hơn vào kỹ thuật.


## FAQ

### ui-ux-pro-max thực sự chứa những gì?
ui-ux-pro-max đi kèm một kho tri thức thiết kế đã được tuyển chọn: hơn 50 style, 161 color palette, 57 font pairing, 161 loại sản phẩm với quy tắc lập luận, 99 guideline UX và 25 loại biểu đồ được ánh xạ trên 10 stack (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, HTML/CSS). Tất cả được lưu dưới dạng data và script để agent có thể truy vấn và đưa ra khuyến nghị có ý thức về thiết kế.

### ui-ux-pro-max khác gì với một trợ lý code thông thường?
Trợ lý code thông thường tập trung vào cú pháp, API và chi tiết triển khai. ui-ux-pro-max tập trung vào **quyết định thiết kế và chất lượng UX**: chọn layout nào, palette nào phù hợp sản phẩm, cấu trúc form ra sao, dùng loại biểu đồ nào và tránh UX anti-pattern thế nào. Sau đó nó căn chỉnh các quyết định đó với frontend stack của bạn.

### ui-ux-pro-max hỗ trợ những tech stack nào?
Skill này được xây dựng để bao phủ hướng dẫn thiết kế cho:

- Web framework: **React, Next.js, Vue, Svelte**
- Mobile và app framework: **SwiftUI, React Native, Flutter**
- Styling và component: **Tailwind, shadcn/ui và HTML/CSS**

Bạn vẫn có thể dùng nó về mặt ý tưởng với các stack khác, nhưng đây là những hệ sinh thái nó nhắm tới một cách rõ ràng.

### Tôi có thể dùng ui-ux-pro-max với Tailwind hoặc shadcn/ui không?
Có. ui-ux-pro-max được thiết kế để hiểu Tailwind và shadcn/ui. Nó có thể giúp bạn chọn pattern thiết kế, hệ màu, spacing và typography dễ dịch sang Tailwind utility class hoặc component shadcn/ui. Khi có shadcn/ui MCP, nó còn có thể tận dụng tìm kiếm component và ví dụ.

### ui-ux-pro-max có tạo full code UI không?
Skill này tập trung vào **trí tuệ thiết kế trước**, hướng dẫn triển khai là bước thứ hai. Nó có thể giúp bạn:

- Xác định cấu trúc và hành vi của UI component.
- Gợi ý cách hiện thực chúng trong React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind hoặc HTML/CSS.

Tuy nhiên, giá trị chính của nó là **chọn và biện minh quyết định thiết kế**, không chỉ sinh các đoạn code rời rạc.

### Khi nào tôi không nên dùng ui-ux-pro-max?
Hãy bỏ qua skill này khi nhiệm vụ của bạn là:

- Thuần backend hoặc hạ tầng.
- Refactor ở mức thấp không ảnh hưởng đến UI hoặc UX.
- Bài toán thuật toán hẹp hoặc tối ưu hiệu năng.

Trong các trường hợp đó, bật ui-ux-pro-max không mang lại nhiều giá trị vì không có quyết định thiết kế nào cần đưa ra.

### Làm sao để bắt đầu dùng ui-ux-pro-max hiệu quả?
Sau khi cài skill:

1. Đọc `SKILL.md` để hiểu phạm vi và cách sử dụng được khuyến nghị.
2. Khi tạo mới hoặc cập nhật UI, mô tả rõ loại sản phẩm, người dùng mục tiêu, nền tảng và tech stack cho agent.
3. Yêu cầu output có cấu trúc: đề xuất layout, hướng style, gợi ý màu và font, checklist UX và lựa chọn biểu đồ.
4. Lặp lại: tinh chỉnh brief và để ui-ux-pro-max đánh giá lại chất lượng UX khi bạn tiến dần tới triển khai.

### Tôi có thể xem dữ liệu và script nền tảng ở đâu?
Mở tab Files của skill và xem:

- `SKILL.md` để nắm định nghĩa tổng quan và quy tắc áp dụng.
- `data/` để xem các dataset thiết kế có cấu trúc.
- `scripts/` để xem logic hỗ trợ đứng sau các khuyến nghị.

Những tài nguyên này giải thích cách ui-ux-pro-max lập luận về UI/UX để bạn có thể tin tưởng và điều chỉnh gợi ý của nó cho phù hợp với dự án.